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 e...
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
