Custom Sisense Bar Chart using Blox Progress Bar not working

Question

I want a Progress Bar that will display my current sales in comparison to the target. I found a similar tutorial and followed it exactlyThis is the tutorial I followed : https://profusion.com/insights/custom-bar-charts-in-sisense-blox-with-diego-cordero/
I have watched the youtube video for the same and used the exact code snippet from this blog. I am unable to get the progress bar configured correctly after trying several times. The purple tooltip is pointing before the progress bar even starts and seems static. Below is a screenshot for reference.

&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
Please let me know what I am doing wrong and how to correct it.
&nbsp;

harikm007 · Answer

Hi&nbsp;Lisha&nbsp;,
I think one change is to add '%' symbol in line number 9 (highlighted in screenshot)

&nbsp;
Another way to display progress bar in Sisense :
https://community.sisense.com/t5/build-analytics/formatting-stack-100-bar-chart/m-p/3463/highlight/true#M872
&nbsp;
-Hari
&nbsp;

lisha · Answer

Added the '%' symbol in the script, still no change.
Also tried following the link you suggested, getting something like this

&nbsp;
Unable to see the gray part, not sure what's the issue
&nbsp;

harikm007 · Answer

This is the Blox script I tried:
{
    "style": "#tooltip::after {position: absolute; left:50%; margin-left:-2px; top:21px;content:''; width: 0; height: 0; border-left:5px solid transparent;border-right: 5px solid transparent; border-top: 5px solid #a264b5;}",
 "script": "",
"title": "",
"showCarousel": false,
"body": [
    {
        "type": "TextBlock",
        "text": "️&lt;div id='tooltip' style='position:relative; margin-left:calc({panel:percentage}% + 117px); font-size:12px;color:#fff; font-weight:bold; background-color:#a264b5; width: 50px; text-align:center; border-radius: 3px; padding: 2px 4px;overflow: visible;'&gt;{panel:total}&lt;/div&gt;",
 "style": {
            "width": "calc(100% - 150px)",
            "overflow": "visible"
        }
    },
    {
        "type": "ColumnSet",
        "columns": [
            {
                "type": "Column",
                "style": {
                    "width": "140px"
                },
                "items": [
                    {
                        "type": "TextBlock",
                        "text": "️{panel:local_authority}",
                        "style": {
                            "text-align": "right",
                            "font-weight": "bold"
                        }
                    }
                ]
            },
            {
                "type": "Column",
                "style": {
                    "width": "calc(100% - 140px)"
                },
                "items": [
                    {
                        "type": "TextBlock",
                        "style": {
                            "background": "#dedede",
                            "transition": "width 2s ease",
                            "margin": "4px 5px 0px",
                            "width": "calc(100% - 10px)",
                            "height": "10px",
                            "border-radius": "5px",
                            "overflow": "hidden",
                            "display": "flex",
                            "justify-content": "flex-start"
                        },
                        "text": "️&lt;div class='inner' style='height:100%; width:{panel:percentage}; background:#27a1b8;'&gt;&lt;/div&gt;"
                    }
                ]
            }
        ]
    }
]
}
&nbsp;Result:

&nbsp;
You are not able to see the gray part in bar chart, because value of gray bar is 100% and value of green bars are greater than 100%.
Try adding target value in first value panel (with gray color) and current sales in second value panel (green bar)
-Hari
&nbsp;

Forum Discussion

Custom Sisense Bar Chart using Blox Progress Bar not working

Recent Discussions

Pivot Table widget - column headers and column data out of alignment

Blox conditional formatting up and down indicators

Remove Widget Title Box

Change Legend Category Names

Rename the Pivot Grand Total

Sisense

Support

Resources