Forum Discussion

cartercjb's avatar
02-09-2022
Solved

ADD SPARKLINE TO INDICATOR BLOX

Here is a current screenshot of my current blox widget: 

I made this starting from a default template that was available in my library (ref the attached STARTING TEMPLATE BLOX.JSON).  

For each of the 3 KPI's my goal is to add a trending sparkline where the #1/yellow highlight is located. I am also trying to correctly remove the bottom panel row without impacting the spacing of the forecast/prior rows. 

Below is my drafted code so far. 

 

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "conditions": [
        {
            "minRange": "-Infinity",
            "maxRange": 0,
            "color": "#FA5656",
            "image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
        },
        {
            "minRange": 0,
            "maxRange": "Infinity",
            "color": "#54a254",
            "image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
        }
    ],
    "body": [
        {
            "spacing": "",
            "type": "Container",
            "width": "90%",
            "style": {
                "margin": "0 auto"
            },
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Contributions | {panel:Month}",
                    "horizontalAlignment": "center",
                    "size": "medium",
                    "style": {
                        "padding": "5px",
                        "border-radius": "5px",
                        "background-color": "#00354b",
                        "color": "#ffffff"
                    }
                },
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "spacing": "small",
                                    "type": "TextBlock",
                                    "text": "REVENUE",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "{panel:Revenue}",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "large",
                                    "style": {
                                        "color": "#a90a40"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container ",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "",
                                                    "horizontalAlignment": "right",
                                                    "weight": "bold",
                                                    "size": "small",
                                                    "style": {
                                                        "color": "#117899"
                                                    }
                                                }
                                            ]
                                        },
                                        {
                                            "separator": true,
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "class": "condition_image 1",
                                                    "url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
                                                    "horizontalAlignment": "left",
                                                    "weight": "",
                                                    "size": "small",
                                                    "style": {
                                                        "width": "30px"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "separator": true,
                                    "type": "TextBlock",
                                    "text": "FULL MONTH FORECAST: {panel:REVENUE_FORECAST}",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container 4",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "<span class='condition_data 4'>{panel:RevMin-GR} </span>",
                                                    "horizontalAlignment": "right",
                                                    "weight": "bold",
                                                    "size": "small",
                                                    "style": {
                                                        "color": "#117899"
                                                    }
                                                }
                                            ]
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "class": "conditional_image 4",
                                                    "url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
                                                    "horizontalAlignment": "left",
                                                    "weight": "",
                                                    "size": "small",
                                                    "style": {
                                                        "width": "30px"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "separator": true,
                            "type": "Column",
                            "items": [
                                {
                                    "spacing": "small",
                                    "type": "TextBlock",
                                    "text": "CONTRIBUTION MARGIN",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "{panel:CONT. MARGIN $} ({panel: CM%})",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "large",
                                    "style": {
                                        "color": "#a90a40"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container 2",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "",
                                                    "horizontalAlignment": "right",
                                                    "weight": "bold",
                                                    "size": "small",
                                                    "style": {
                                                        "color": "#117899"
                                                    }
                                                }
                                            ]
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "class": "conditional_image 2",
                                                    "url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
                                                    "horizontalAlignment": "left",
                                                    "weight": "",
                                                    "size": "small",
                                                    "style": {
                                                        "width": "30px"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "separator": true,
                                    "type": "TextBlock",
                                    "text": "FULL MONTH FORECAST: {panel:CM_FORECAST} ({panel:%_FORECAST})",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container 5",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "<span class='condition_data 5'>{panel:CostMin-GR} </span>",
                                                    "horizontalAlignment": "right",
                                                    "weight": "bold",
                                                    "size": "small",
                                                    "style": {
                                                        "color": "#117899"
                                                    }
                                                }
                                            ]
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "class": "conditional_image 5",
                                                    "url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
                                                    "horizontalAlignment": "left",
                                                    "weight": "",
                                                    "size": "small",
                                                    "style": {
                                                        "width": "30px"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "separator": true,
                            "type": "Column",
                            "items": [
                                {
                                    "spacing": "small",
                                    "type": "TextBlock",
                                    "text": "PRODUCTIVITY",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "{panel:PRODUCTIVITY}",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "large",
                                    "style": {
                                        "color": "#117899"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container 3",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "class": "conditional_image 3",
                                                    "url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
                                                    "horizontalAlignment": "left",
                                                    "weight": "",
                                                    "size": "small",
                                                    "style": {
                                                        "width": "30px"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "separator": true,
                                    "type": "TextBlock",
                                    "text": "{panel:MarginMin} per minute",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container 3",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "<span class='condition_data 6'>{panel:MarginMin-GR} </span>",
                                                    "horizontalAlignment": "right",
                                                    "weight": "bold",
                                                    "size": "small",
                                                    "style": {
                                                        "color": "#117899"
                                                    }
                                                }
                                            ]
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "Image",
                                                    "class": "conditional_image 6",
                                                    "url": "/plugins/BloX/blox-images/StockMarket/arrow-down.png",
                                                    "horizontalAlignment": "left",
                                                    "weight": "",
                                                    "size": "small",
                                                    "style": {
                                                        "width": "30px"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": []
}

 

Does anyone have suggestions on how to achieve this? THANK YOU!

  • cartercjb ,

    Please check if this is what you are looking for (if I understanding correctly).

    Here trending sparkline values are hardcoded as 25, 30, 20, 28. Please use panel values instead

     

    {
        "style": "",
        "script": "",
        "title": "",
        "showCarousel": true,
        "carouselAnimation": {
            "delay": 0,
            "showButtons": false
        },
        "conditions": [
            {
                "minRange": "-Infinity",
                "maxRange": 0,
                "color": "#FA5656",
                "image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
            },
            {
                "minRange": 0,
                "maxRange": "Infinity",
                "color": "#54a254",
                "image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
            }
        ],
        "body": [
            {
                "spacing": "",
                "type": "Container",
                "width": "90%",
                "style": {
                    "margin": "0 auto"
                },
                "items": [
                    {
                        "type": "TextBlock",
                        "text": "Contributions | {panel:Month}",
                        "horizontalAlignment": "center",
                        "size": "medium",
                        "style": {
                            "padding": "5px",
                            "border-radius": "5px",
                            "background-color": "#00354b",
                            "color": "#ffffff"
                        }
                    },
                    {
                        "type": "ColumnSet",
                        "columns": [
                            {
                                "type": "Column",
                                "items": [
                                    {
                                        "spacing": "small",
                                        "type": "TextBlock",
                                        "text": "REVENUE",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    },
                                    {
                                        "type": "TextBlock",
                                        "text": "{panel:Revenue}",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "large",
                                        "style": {
                                            "color": "#a90a40"
                                        }
                                    },
                                    {
                                        "type": "ColumnSet",
                                        "class": "condition_container ",
                                        "columns": [
                                            {
                                                "type": "Column",
                                                "items": [
                                                    {
                                                        "type": "TextBlock",
                                                        "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                                        "horizontalAlignment": "center",
                                                        "weight": "bold",
                                                        "size": "small",
                                                        "style": {
                                                            "color": "#117899"
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "separator": true,
                                        "type": "TextBlock",
                                        "text": "FULL MONTH FORECAST: {panel:REVENUE_FORECAST}",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    }
                                ]
                            },
                            {
                                "separator": true,
                                "type": "Column",
                                "items": [
                                    {
                                        "spacing": "small",
                                        "type": "TextBlock",
                                        "text": "CONTRIBUTION MARGIN",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    },
                                    {
                                        "type": "TextBlock",
                                        "text": "{panel:CONT. MARGIN $} ({panel: CM%})",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "large",
                                        "style": {
                                            "color": "#a90a40"
                                        }
                                    },
                                    {
                                        "type": "ColumnSet",
                                        "class": "condition_container 2",
                                        "columns": [
                                            {
                                                "type": "Column",
                                                "items": [
                                                    {
                                                        "type": "TextBlock",
                                                        "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                                        "horizontalAlignment": "center",
                                                        "weight": "bold",
                                                        "size": "small",
                                                        "style": {
                                                            "color": "#117899"
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "separator": true,
                                        "type": "TextBlock",
                                        "text": "FULL MONTH FORECAST: {panel:CM_FORECAST} ({panel:%_FORECAST})",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    }
                                ]
                            },
                            {
                                "separator": true,
                                "type": "Column",
                                "items": [
                                    {
                                        "spacing": "small",
                                        "type": "TextBlock",
                                        "text": "PRODUCTIVITY",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    },
                                    {
                                        "type": "TextBlock",
                                        "text": "{panel:PRODUCTIVITY}",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "large",
                                        "style": {
                                            "color": "#117899"
                                        }
                                    },
                                    {
                                        "type": "ColumnSet",
                                        "class": "condition_container 3",
                                        "columns": [
                                            {
                                                "type": "Column",
                                                "items": [
                                                    {
                                                        "type": "TextBlock",
                                                        "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                                        "horizontalAlignment": "center",
                                                        "weight": "bold",
                                                        "size": "small",
                                                        "style": {
                                                            "color": "#117899"
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "separator": true,
                                        "type": "TextBlock",
                                        "text": "{panel:MarginMin} per minute",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ],
        "actions": []
    }

     

     

     -Hari

4 Replies

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse

    cartercjb ,

    Please check if this is what you are looking for (if I understanding correctly).

    Here trending sparkline values are hardcoded as 25, 30, 20, 28. Please use panel values instead

     

    {
        "style": "",
        "script": "",
        "title": "",
        "showCarousel": true,
        "carouselAnimation": {
            "delay": 0,
            "showButtons": false
        },
        "conditions": [
            {
                "minRange": "-Infinity",
                "maxRange": 0,
                "color": "#FA5656",
                "image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
            },
            {
                "minRange": 0,
                "maxRange": "Infinity",
                "color": "#54a254",
                "image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
            }
        ],
        "body": [
            {
                "spacing": "",
                "type": "Container",
                "width": "90%",
                "style": {
                    "margin": "0 auto"
                },
                "items": [
                    {
                        "type": "TextBlock",
                        "text": "Contributions | {panel:Month}",
                        "horizontalAlignment": "center",
                        "size": "medium",
                        "style": {
                            "padding": "5px",
                            "border-radius": "5px",
                            "background-color": "#00354b",
                            "color": "#ffffff"
                        }
                    },
                    {
                        "type": "ColumnSet",
                        "columns": [
                            {
                                "type": "Column",
                                "items": [
                                    {
                                        "spacing": "small",
                                        "type": "TextBlock",
                                        "text": "REVENUE",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    },
                                    {
                                        "type": "TextBlock",
                                        "text": "{panel:Revenue}",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "large",
                                        "style": {
                                            "color": "#a90a40"
                                        }
                                    },
                                    {
                                        "type": "ColumnSet",
                                        "class": "condition_container ",
                                        "columns": [
                                            {
                                                "type": "Column",
                                                "items": [
                                                    {
                                                        "type": "TextBlock",
                                                        "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                                        "horizontalAlignment": "center",
                                                        "weight": "bold",
                                                        "size": "small",
                                                        "style": {
                                                            "color": "#117899"
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "separator": true,
                                        "type": "TextBlock",
                                        "text": "FULL MONTH FORECAST: {panel:REVENUE_FORECAST}",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    }
                                ]
                            },
                            {
                                "separator": true,
                                "type": "Column",
                                "items": [
                                    {
                                        "spacing": "small",
                                        "type": "TextBlock",
                                        "text": "CONTRIBUTION MARGIN",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    },
                                    {
                                        "type": "TextBlock",
                                        "text": "{panel:CONT. MARGIN $} ({panel: CM%})",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "large",
                                        "style": {
                                            "color": "#a90a40"
                                        }
                                    },
                                    {
                                        "type": "ColumnSet",
                                        "class": "condition_container 2",
                                        "columns": [
                                            {
                                                "type": "Column",
                                                "items": [
                                                    {
                                                        "type": "TextBlock",
                                                        "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                                        "horizontalAlignment": "center",
                                                        "weight": "bold",
                                                        "size": "small",
                                                        "style": {
                                                            "color": "#117899"
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "separator": true,
                                        "type": "TextBlock",
                                        "text": "FULL MONTH FORECAST: {panel:CM_FORECAST} ({panel:%_FORECAST})",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    }
                                ]
                            },
                            {
                                "separator": true,
                                "type": "Column",
                                "items": [
                                    {
                                        "spacing": "small",
                                        "type": "TextBlock",
                                        "text": "PRODUCTIVITY",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    },
                                    {
                                        "type": "TextBlock",
                                        "text": "{panel:PRODUCTIVITY}",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "large",
                                        "style": {
                                            "color": "#117899"
                                        }
                                    },
                                    {
                                        "type": "ColumnSet",
                                        "class": "condition_container 3",
                                        "columns": [
                                            {
                                                "type": "Column",
                                                "items": [
                                                    {
                                                        "type": "TextBlock",
                                                        "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                                        "horizontalAlignment": "center",
                                                        "weight": "bold",
                                                        "size": "small",
                                                        "style": {
                                                            "color": "#117899"
                                                        }
                                                    }
                                                ]
                                            }
                                        ]
                                    },
                                    {
                                        "separator": true,
                                        "type": "TextBlock",
                                        "text": "{panel:MarginMin} per minute",
                                        "horizontalAlignment": "center",
                                        "weight": "bold",
                                        "size": "small",
                                        "style": {
                                            "color": "#000000"
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ],
        "actions": []
    }

     

     

     -Hari

    • cartercjb's avatar
      cartercjb
      ETL

      Hari harikm007 at first glance this appears to work perfectly!! I'll keep playing with it and let you know if I have any questions. THANK YOU!!

      As a follow-up - how could I create a similar widget but transposed, so the main KPI's are aligned vertically, and their trending sparklines would be in a second column? Kind of like this sketch:

       

      • harikm007's avatar
        harikm007
        Data Warehouse

        cartercjb ,

        Please try this:

        {
            "style": "",
            "script": "",
            "title": "",
            "showCarousel": true,
            "carouselAnimation": {
                "delay": 0,
                "showButtons": false
            },
            "conditions": [
                {
                    "minRange": "-Infinity",
                    "maxRange": 0,
                    "color": "#FA5656",
                    "image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
                },
                {
                    "minRange": 0,
                    "maxRange": "Infinity",
                    "color": "#54a254",
                    "image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
                }
            ],
            "body": [
                {
                    "spacing": "",
                    "type": "Container",
                    "width": "90%",
                    "style": {
                        "margin": "0 auto"
                    },
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Contributions | {panel:Month}",
                            "horizontalAlignment": "center",
                            "size": "medium",
                            "style": {
                                "padding": "5px",
                                "border-radius": "5px",
                                "background-color": "#00354b",
                                "color": "#ffffff"
                            }
                        },
                        {
                            "type": "ColumnSet",
                            "style": {
                                "padding": "25px 0px"
                            },
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "50%",
                                    "items": [
                                        {
                                            "spacing": "small",
                                            "type": "TextBlock",
                                            "text": "REVENUE",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#000000"
                                            }
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "{panel:Revenue}",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "large",
                                            "style": {
                                                "color": "#a90a40"
                                            }
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "FULL MONTH FORECAST: {panel:REVENUE_FORECAST}",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#000000"
                                            }
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "50%",
                                    "style": {
                                        "justify-content": "center"
                                    },
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                            "horizontalAlignment": "center",
                                            "verticalContentAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#117899"
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "ColumnSet",
                            "style": {
                                "padding": "25px 0px"
                            },
                            "separator": true,
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "50%",
                                    "items": [
                                        {
                                            "spacing": "small",
                                            "type": "TextBlock",
                                            "text": "CONTRIBUTION MARGIN",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#000000"
                                            }
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "{panel:CONT. MARGIN $} ({panel: CM%})",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "large",
                                            "style": {
                                                "color": "#a90a40"
                                            }
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "FULL MONTH FORECAST: {panel:CM_FORECAST} ({panel:%_FORECAST})",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#000000"
                                            }
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "50%",
                                    "style": {
                                        "justify-content": "center"
                                    },
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#117899"
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "ColumnSet",
                            "style": {
                                "padding": "25px 0px"
                            },
                            "separator": true,
                            "columns": [
                                {
                                    "type": "Column",
                                    "width": "50%",
                                    "items": [
                                        {
                                            "spacing": "small",
                                            "type": "TextBlock",
                                            "text": "PRODUCTIVITY",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#000000"
                                            }
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "{panel:PRODUCTIVITY}",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "large",
                                            "style": {
                                                "color": "#117899"
                                            }
                                        },
                                        {
                                            "type": "TextBlock",
                                            "text": "{panel:MarginMin} per minute",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#000000"
                                            }
                                        }
                                    ]
                                },
                                {
                                    "type": "Column",
                                    "width": "50%",
                                    "style": {
                                        "justify-content": "center"
                                    },
                                    "items": [
                                        {
                                            "type": "TextBlock",
                                            "text": "<span class='blox-sparkline' type='line' line-color='#009688' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>25,30,20, 28</span>",
                                            "horizontalAlignment": "center",
                                            "weight": "bold",
                                            "size": "small",
                                            "style": {
                                                "color": "#117899"
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ],
            "actions": []
        }
    • cartercjb's avatar
      cartercjb
      ETL

      harikm007  how/where does the number formatting happen for the sparkling values? I replaced your hardcoded values with variables and they're appearing like this:

       

      I'd want them to appear in the same currency format as the indicator. 

      Any ideas harikm007  Community_Admin Ophir_Buchman HamzaJ ? Thank you!!