cancel
Showing results for 
Search instead for 
Did you mean: 

ADD SPARKLINE TO INDICATOR BLOX

cartercjb
10 - ETL
10 - ETL

Here is a current screenshot of my current blox widget: 

cartercjb_0-1644420999374.png

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!

1 ACCEPTED SOLUTION

harikm007
12 - Data Integration
12 - Data Integration

@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

View solution in original post

4 REPLIES 4

harikm007
12 - Data Integration
12 - Data Integration

@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

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:

cartercjb_0-1644440304065.png

 

harikm007
12 - Data Integration
12 - Data Integration

@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": []
}

@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:

cartercjb_0-1647627966034.png 

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

Any ideas @harikm007  @Community_Admin @Ophir_Buchman @HamzaJ ? Thank you!!

Voice of Customer
Impact Business Intelligence (BI) and Analytics Market Research

Click Here & Complete Dresner's Wisdom of Crowds® Market Study Survey Today!

Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Need additional support?:

Community Support Request

Don't miss out:

Earn a BETA Launch Challenge Badge!