Forum Discussion

Lisha's avatar
Lisha
Cloud Apps
06-03-2022

Custom Sisense Bar Chart using Blox Progress Bar not working

I want a Progress Bar that will display my current sales in comparison to the target. I found a similar tutorial and followed it exactly
This 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.

 

 

 

 

 

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

 



dashboards & reporting

3 Replies

Replies have been turned off for this discussion
    • Lisha's avatar
      Lisha
      Cloud Apps
      06-03-2022

      Added the '%' symbol in the script, still no change.

      Also tried following the link you suggested, getting something like this

       

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

       

      • harikm007's avatar
        harikm007
        Data Warehouse
        06-03-2022

        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": "️<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;'>{panel:total}</div>",
 "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": "️<div class='inner' style='height:100%; width:{panel:percentage}; background:#27a1b8;'></div>"
                    }
                ]
            }
        ]
    }
]
}

         Result:

         

        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