Goal line in a bar/column chart, is it possible to take an user input to set the goal?

[hkkwon89]

I have currently implemented the benchmark target line from

https://www.binextlevel.com/post/add-target-benchmark-line-to-a-chart-in-sisense

I was wondering if it's possible to have a user input using Blox to set that benchmark line instead of using a static number in a script. Or any other way other than using Blox?

Thank you in advance

[harikm007 · Accepted solution]

Hi @hkkwon89 ,

Create a blox using below code and update "widgetToModify" with id of bar/column chart:

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Container",
                            "items": [
                                {
                                    "type": "Input.Text",
                                    "id": "data.benchmark",
                                    "title": "New Input",
                                    "placeholder": "Benchmark Value"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "plotlineInChart",
            "title": "Plot Line",
            "data": {
                "widgetToModify": [
                    "85694c8aa77683002ear6sdfc"
                ],
                "benchmark": 300
            }
        }
    ]
}

Then create an action in blox using below script and name it as  "plotlineInChart":

const benchmark = payload.data.benchmark;
var widgetId = payload.data.widgetToModify;

payload.widget.dashboard.widgets.$$widgets
    .filter(i => widgetId == i.oid)
    .forEach(function (widget) {
         widget.on('processresult', function(se, ev){
            ev.result.yAxis[0].plotLines = [{
                color: '#2ec7b5',
                dashStyle: 'LongDash',
                width: 4,
                value: benchmark,
                zIndex: 5,
                label: {
                    text: 'Target'
                }
            }]
        })
        widget.changesMade()
        widget.refresh()
    })

-Hari

[shahamel]

Dear Hari,

I used your script, but the button is not reacting. I have a similar setup as result (Base.png).

The widget-id = 652e440467a7020033f19c53 as seen in widgetid.png.

the blox widget uses this script:

{

"style": "",

"script": "",

"title": "",

"showCarousel": true,

"carouselAnimation": {

"delay": 0,

"showButtons": false

},

"body": [

{

"type": "Container",

"items": [

{

"type": "ColumnSet",

"columns": [

{

"type": "Container",

"items": [

{

"type": "Input.Text",

"id": "data.benchmark",

"title": "New Input",

"placeholder": "Benchmark Value"

}

]

}

]

}

]

}

],

"actions": [

{

"type": "plotlineInChart",

"title": "Plot Line",

"style": {

"color": "#00a7d6",

"font-weight": "bold",

"font-size": "35px",

"margin": "10px 10px 10px 10px"

},

"data": {

"widgetToModify": [

"652e440467a7020033f19c53"

],

"benchmark": 300

}

}

]

}

Using your action widget (plotlineInChart)

const benchmark = payload.data.benchmark;

var widgetId = payload.data.widgetToModify;

payload.widget.dashboard.widgets.$$widgets

.filter(i => widgetId == i.oid)

.forEach(function (widget) {

widget.on('processresult', function (se, ev) {

ev.result.yAxis[0].plotLines = [{

color: '#2ec7b5',

dashStyle: 'LongDash',

width: 4,

value: benchmark,

zIndex: 5,

label: {

text: 'Target'

}

}]

})

widget.changesMade()

widget.refresh()

})

[shahamel]

This has been fixed by collegeas of mine.

[hkkwon89]

This is so amazing. Thanks @harikm007 !!

[hkkwon89]

@harikm007 Hi Hari,

Quick follow up question. Is it possible to have that blox kind of merge into the bar chart so the button and input space is within the chart? i.e. top left of the bar chart.

[harikm007]

It is possible to embed a widget within blox (refer this)

Here is the updated blox script and action script. Action script will replace the existing script in column/line chart with new script that plot line. So please be careful if there is an existing script in column/line chart:

Blox script:

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Container",
                            "items": [
                                {
                                    "type": "Input.Text",
                                    "id": "data.benchmark",
                                    "title": "New Input",
                                    "placeholder": "Benchmark Value"
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "plotlineInChart",
                            "title": "Plot Line",
                            "data": {
                                "widgetToModify": [
                                    "78954c8aa77683002ea4r4325"
                                ],
                                "benchmark": 300
                            }
                        }
                    ]
                },
                {
                    "type": "TextBlock",
                    "id": "",
                    "class": "",
                    "text": "<iframe src='https://charts-dev.brightbytes.net/app/main#/dashboards/5e56a4ac5270a82e8840ffc9/widgets/62735c8aa77683002ea7d679?embed=true' width='100%' height='300' style='border:none;overflow:hidden'></iframe>"
                }
            ]
        }
    ]
}

Action script:

const benchmark = payload.data.benchmark;
var widgetId = payload.data.widgetToModify;

payload.widget.dashboard.widgets.$$widgets
    .filter(i => widgetId == i.oid)
    .forEach(function (widget) {
        widget.script = `widget.on('processresult', function(se, ev){
            ev.result.yAxis[0].plotLines = [{
                color: '#2ec7b5',
                dashStyle: 'LongDash',
                width: 4,
                value: ${benchmark},
                zIndex: 5,
                label: {
                    text: 'Target'
                }
            }]
        })`

        widget.changesMade()
        widget.refresh()
        payload.widget.changesMade()
        payload.widget.refresh()
    })

-Hari

[ItsMeAlec]

Hi Hari! I tried your method to embed the button within the widget but I'm running into an error. If I get this to work it would be a tremendous breakthrough. I'm relatively new to Sisense so here is I did so far. Hopefully you can help

1) I created a new blox widget and added your code. I used this URL to get the widget ID and took that number and inserted it where you had that long number starting with "78954c...:

https://support.sisense.com/kb/en/article/retrieve-all-widget-ids-titles-and-types-in-a-dashboard

2) I created a new action and added your code. I made sure that everything was exactly the way you had it.

3) I click on "Plot Line" but there is no result

I think I'm not doing something right or connecting this code to my bar chart. Do you have any advice? I'm soooooo excited to see this work! Thanks Hari!

[harikm007]

Hi @ItsMeAlec ,

1. Can you confirm if both Blox and bar chart are in same dashboard?

2. Does the bar chart refreshing when you click "Plot Line"?

3. In this URL, Widget ID is 'oid' (highlighted in screenshot). Hope you copied 'oid' (not '_id')

https://support.sisense.com/kb/en/article/retrieve-all-widget-ids-titles-and-types-in-a-dashboard

-Hari

[ItsMeAlec]

Thanks for the quick reply Harry!

1) Yes both widgets are in the same dashboard (screenshot)

2) The bar chart does not refresh when I click "plot line". BUT, for a quick half-second the blox widget refreshes (which it was not doing before. You were right about that oid #).

Does this help give you any clues? Thanks a million! 

-Alec

[harikm007]

Can you confirm the 'oid' you added in blox script is bar chart's oid.

If possible, can you post the blox script and URL of both widgets, I can try to replicate it from my side?

-Hari

[ItsMeAlec]

I got it to work last night! You're the best! Let me know if you have any ideas about visualizing the difference between the column values and the goal line :). Thanks again Hari!