cancel
Showing results for 
Search instead for 
Did you mean: 

Show a total value with sparkline

gwolfe
10 - ETL
10 - ETL

Hi, how can I show a total value (sum YTD), and then include a sparkline of the YTD amount by month? Here is my BloX code. This displays the monthly amount, not the YTD total. The $4,727,773 is just the current month.

gwolfe_1-1656440277053.png

 

gwolfe_0-1656440218769.png

 

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "body": [
        {
            "type": "Container",
            "style": {
                "padding": "3px",
                "backgroundImage": "linear-gradient(160deg,#2D82C3, #FFFFFF)"
            },
            "backgroundColor": "#329AD6",
            "items": [
                {
                    "type": "TextBlock",
                    "color": "white",
                    "horizontalAlignment": "left",
                    "size": "medium",
                    "style": {
                        "margin-top": "0px",
                        "margin-left": "20px",
                        "font-size": "1.2vw",
                        "font-weight": "700",
                        "text-shadow": "0 0 9px 0 rgba(0,0,0,0.5)"
                    },
                    "text": "Invoice KPIs"
                }
            ]
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "spacing": "large",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "<link rel=\"stylesheet\" href=\"https://pro.fontawesome.com/releases/v5.10.2/css/all.css\" integrity=\"sha384-XxNLWSzCxOe/CFcHcAiJAZ7LarLmw3f4975gOO6QkxvULbGGNDoSOTzItGUG++Q+\" crossorigin=\"anonymous\">"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "<i class=\"far fa-file-contract\"></i>",
                                    "horizontalAlignment": "center",
                                    "size": "icon",
                                    "color": "icon",
                                    "style": {
                                        "margin-top": "0px",
                                        "margin-bottom": "0px",
                                        "font-size": "1.3vw"
                                    }
                                },
                                {
                                    "type": "TextBlock",
                                    "horizontalAlignment": "center",
                                    "size": "small",
                                    "weight": "bold",
                                    "wrap": true,
                                    "text": "Spacer",
                                    "color": "white",
                                    "style": {
                                        "font-size": ".22vw"
                                    }
                                },
                                {
                                    "type": "TextBlock",
                                    "horizontalAlignment": "center",
                                    "size": "extraLarge",
                                    "weight": "bold",
                                    "wrap": true,
                                    "text": "{panel:YTDSpend}",
                                    "color": "darkgrey",
                                    "style": {
                                        "font-size": "1.5vw"
                                    }
                                },
                                {
                                    "type": "TextBlock",
                                    "horizontalAlignment": "center",
                                    "size": "small",
                                    "weight": "bold",
                                    "wrap": true,
                                    "text": "Total Invoiced YTD",
                                    "color": "grey",
                                    "style": {
                                        "font-size": ".85vw"
                                    }
                                },
                                {
                                    "spacing": "small",
                                    "type": "TextBlock",
                                    "text": "<span class='blox-sparkline' type='line' line-color='#2F9BD9' width='80%' height='65' line-width='3' fill-color='white' point-color:'#117899'>{spark:YTDSpend}</span>",
                                    "horizontalAlignment": "center",
                                    "size": "medium",
                                    "weight": "bold",
                                    "color": "grey"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

 

4 REPLIES 4

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @gwolfe , 

One solution is to create another panel for YTD sum and use it in blox. The formula is:

harikm007_1-1656610193353.png

-Hari

ALL overwrites the dashboard Date filter. Any way around this to display total value in a KPI Indicator with sparkline? 

harikm007
13 - Data Warehouse
13 - Data Warehouse

Try below formula to calculate total value:

harikm007_0-1657705037561.png

-Hari

 

Works perfect. Thank you.