BloX: Chart type switcher [Linux-Windows]
Summary: In the discussion, TriAnthony provides a detailed step-by-step guide on implementing a chart type switcher using BloX in a dashboard. The guide explains how to import a BloX template, create custom actions, and modify properties to allow seamless switching between different chart types like bar, column, line, and area charts. It also highlights limitations, such as the non-retention of stacking options when switching from line charts and properties that can be customized. Tom Suddaby, Tom Suddaby, responds by expressing interest in the solution but faces issues with missing attachments, requesting assistance to obtain them.
Step-by-Step Guide
Supported chart types: Bar, Column, Line, Area.
Limitations
While column, bar, line, and area charts are generally compatible with each other and no fields will be lost when switching, some design options are not preserved:
- Stacking applies only to bar, column, and area charts. When switching between these chart types, the stacking option is retained. However, if you switch to a line chart and then back, the previous stacking selection won’t be remembered.
You can define the same stack type across the board when switching from a line chart by using the stackTypeAfterLineChart variable, but it won’t automatically restore previous selections for individual widgets. - Line types, line width, and markers apply only to line and area charts. If you switch from a bar or column chart to a line or area chart and then back, the previous settings won’t be retained.
Instructions
- Create a new BloX widget in your dashboard, then import the BloX template (ChartTypeSwitch-BloXTemplate.json) attached below.
Alternatively, you can download and import the attached dashboard example (BloX-ChartTypeSwitcher.dash.txt — remove the .txt extension before importing), which already includes the BloX chart switcher widget and a couple of demo widgets. - Download and open the BloX action ChartTypeSwitcher.js file, then copy the content.
- Create a new BloX custom action, then paste the code from the ChartTypeSwitcher.js file. Name the action ChartTypeSwitcher.
- Go back to the BloX Editor tab and make the necessary and optional changes. Each button in this BloX widget is represented by a block of code under the actions property, as shown below.
{
"type": "ChartTypeSwitcher",
"title": "Column",
"style": {
"backgroundColor": "#2D4671"
},
"data": {
"widgetToModify": [
"68be419f56bf797473134f9e",
"68d2d32e3ec41d31d95e3fa5"
],
"stackTypeAfterLineChart": "stack",
"selectVal": "column"
}
}Customizable Properties
Below are the properties you can update as needed.
Do not change the values of other properties.
- title (optional): The text displayed on the button.
- backgroundColor (optional): The color of the button.
- widgetToModify (mandatory): A comma-separated list of widget IDs that will be changed to the chart type selected by the button.
You can restrict widgets to switch to only a subset of the supported chart types by configuring different widget ID lists for each button.
Example: You might want widget1 to switch between all four chart types, but widget2 only between Bar and Column. In that case, include widget2’s ID in the widgetToModify list for the Bar and Column buttons, and leave it out of the Line and Area buttons’ lists. - stackTypeAfterLineChart (mandatory): The stacking type ("stack", "stack100", or "none") to apply when switching from a line chart to a bar, column, or area chart.
The stacking option is retained when switching between bar, column, and area charts, but since line charts don’t have stacking, this property determines which stack type to apply when switching from a line chart.
Save the widget, then check that each button is working correctly.
Conclusion
The BloX chart type switcher offers a flexible way to control visualization formats directly from your dashboard, giving users a seamless way to explore data across different chart types without creating separate widgets.
References / Related Content
- Creating BloX Custom Actions
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.
Tom Suddaby
·5 months agoHi - this sounds great and just what I am looking for, however I am unable to see any attachments as with the most recent update in the Sisense community.
Could someone assist with this?
Thanks,
Tom
Amanda Hammar
·5 months agoHi Tom! We are manually reconnecting them and should have these reattached soon! Please email me at amanda.hammar@sisense.com and I can send you this one directly as a short term solution so you are not held back!