Embedding custom visualizations within a widget

Introduction

This document outlines the process for overriding an existing chart with a Highcharts Donut Pie chart. For a more robust solution, it is recommended to create a custom plugin as that would allow non-technical users to create charts without editing scripts. However, if this is a one-off solution, an existing widget’s script can be overridden to allow for integration with 3^rd party charting solutions.

Steps

Here we will explain how to do it in detailed steps.

Step 1 - Create the SiSense widget

Try to be consistent with the image size along the post.

Step 2 - Copy in the custom JavaScript

Click on the Edit Script button for the widget to pull up the script editor.

Open the attached JS file, then copy and paste the code into the script editor. The only thing that might need to be changes is to change the Highcharts div container ID. If you want more than 1 of these charts on the same dashboard, they need to have unique IDs. So just change the value of the JavaScript variable ChartDivName from “MyHighcharts” to “MyHighcharts2” or any other unique ID. Click the save button, and reload the dashboard. This code requires there to be a dimension specified as a Category, a second dimension specified under Break By, and a metric specified as a value. The screenshot below shows the setup used for the example.

Overview of custom JavaScript code

The code attached consists of the following 4 tasks:

1. Retrieve data from the widget

The results of the ElastiCube query are stored in the widget object, which is accessible through the sender variable. The dimensions/value names and data points are contained within the sender.rawQueryResult property. This data set will need to be transformed to fit the Highcharts data format.

2. Format the data

The data comes back from the query as an array consisting of data points in the following format: [CategoryName, DataPointName, DataPointValue]. This will need to be modified to match the format required by the desired 3rd party visualization tool.

3. Replace SiSense chart w/ new visualization

The stacked column chart specified in this example gets rendered by the SiSense engine as a SVG element. This block of code finds the newly rendered stacked bar chart and replaces the svg tag with a div container for the Highcharts..

4. Create the new visualization

At this point, the data is formatted appropriately and the SiSense chart has been replaced with an empty container for the 3rd party visualization. This code block uses the Highcharts API to create a new donut pie chart within the specified div container.

Customizing the code

Following steps one and two will create a donut pie chart based on the given data set, but what if the required 3rd party chart was slightly different? The JavaScript would need to be customized to meet the requirements of the 3rd party chart. When pulling data from SiSense, the key object to look at is the sender.rawQueryResult variable. This object contains an array headers, which contains information about the dimensions and metrics specified by the widget. It also includes a variable values, which contains an array of all data points. These two objects can be looped through to build a data set compatible with the desired 3rd party visualization tool.

See also

Here we will put links to

Highcharts Pie Donut Chart - http://www.highcharts.com/demo/pie-donut
SiSense Widget API - https://docs.google.com/document/d/1nQBZtWAdNFAd9nBhPWGVT3qOMS4Qm0PzBZVIzz5DfE8/

Highcharts-DonutPie-Figure1.png
Highcharts-DonutPie-Figure2.png
Highcharts-DonutPie.zip
Highcharts-DonutPie-Figure3.png

Cassandra July 09, 2015 19:36

Thanks for this. It is very helpful. Is there a way to keep Sisense's default properties (i.e being able to click on a section to filter the entire dashboard, be able to drill into information)

Konstantinos August 31, 2015 07:44

This is an amazing widget!!! It will be decent if we can filter the dashboard from it since it gives the ability to follow the KISS procedure. I am begging you to implement this functionality :)

Ehounoud Eby October 25, 2019 12:32

I'm new in sisense. I use the code and it it working fine. But when I click apply the widget become empty. Could you help me: I want to use more higcharts template to showcase data for my organization. All the best. Eby

Ido Darnell October 27, 2019 11:26

Hi @Ehounoud,

I'm not exactly sure what may be the problem with this specific widget, though we provide a few custom visualization plugins such as the Chord Dependancy Diagram, or Double Stacked Bar Chart

We have a few more on the Sisense Partner Market Place

Feel free to reach out if you need any additional assistance with creating any other new plugin you may find beneficial for your users,

Thanks

Ido

ido.darnell@qbeeq.pl

qbeeq.pl

Sisense Partner of the Year 2019!