Forum Discussion

hkkwon89's avatar
hkkwon89
Cloud Apps
07-21-2022
Solved

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

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

Blox
dashboards & reporting
  • harikm007's avatar
    harikm007
    07-21-2022

    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

     

11 Replies

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse
    07-21-2022

    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's avatar
      shahamel
      Cloud Apps
      10-17-2023

      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's avatar
        shahamel
        Cloud Apps
        10-19-2023

        This has been fixed by collegeas of mine.

  • hkkwon89's avatar
    hkkwon89
    Cloud Apps
    07-21-2022

    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's avatar
      harikm007
      Data Warehouse
      07-22-2022

      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's avatar
        ItsMeAlec
        Cloud Apps
        07-27-2022

        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!