Conditional Coloring with Scripting in Sisense Polar Bar Charts

[JeremyFriedel]

Polar Chart Widget Conditional Coloring

When working with polar chart-type widgets in Sisense dashboards, it can be helpful to set coloring conditional on the data returned from the data sources. This can improve the utility of the widget. However, natively supported conditional coloring is not included for all widget types, such as Polar Chart charts. This article explains how to achieve conditional coloring for polar bar charts using a custom widget script or plugin.

Menu Does not Include Conditional Coloring Tab

Example Use Case

The dashboard has a polar-type widget that displays dimensions. You want to highlight bars based on their value:

• Bars representing high values should be red.
• Medium values should be yellow.
• Low values should be green.

This conditional coloring helps users quickly identify areas above or below the expected value range.

Script Breakdown

The script is designed to apply conditional coloring to a Sisense polar bar chart. Below is a detailed explanation of each part of the code:

// Widget Script to change color of Polar Charts based on value
// Designed for Polar Chart with only values and no category panel
widget.on('processresult', function (w, args) {

    var dataSeries = args.result.series;

    // Loop through all values
    for (let series_index = 0; series_index < dataSeries.length; series_index++) {

        // Last data point is where non-zero bar is present when no Category panel is used in Polar charts
        var lastDataIndex = dataSeries[series_index].data.length - 1;

        var lastDataPoint = dataSeries[series_index].data[lastDataIndex];

        // Change numerical cutoffs and color code names as needed
        if (lastDataPoint.y && lastDataPoint.y > 75) {
            // Change to CSS Color Name or CSS color code as needed
            lastDataPoint.color = "red";
        }

        else if (lastDataPoint.y && lastDataPoint.y > 25) {
            // Change to CSS Color Name or CSS color code as needed
            lastDataPoint.color = "#ffd54d";
        }

        else {
            // Change to CSS Color Name or CSS color code as needed
            lastDataPoint.color = "green";
        }

    }

});

Event Listener Registration

widget.on('processresult', function (w, args) {

widget.on('processresult', function (w, args)

The script uses the widget event process result. This event occurs when the data JAQL has returned raw results and the data can be structured into the final processed results for the widget render event.

Accessing Data Series

var dataSeries = args.result.series;

The args.result.series object contains the data series that the polar chart will display. Each series represents a set of data points, ultimately bars in the widget.

Looping Through Data Points

for (let series_index = 0; series_index < dataSeries.length; series_index++)

The script loops through each data series to access individual data points. If the categories panel is used a second nested loop can used to loop through all values.

Identifying the Last Data Point

// Last data point is where non-zero bar is present when no Category panel is used in Polar charts
var lastDataIndex = dataSeries[series_index].data.length - 1;
var lastDataPoint = dataSeries[series_index].data[lastDataIndex];

For polar widgets with only value metadata panels, the last data point in each series determines the visual bar coloring. The lastDataIndex variable holds the index in the series of the last data point, and lastDataPoint is the actual data point object.

Conditional Coloring

        // Change numerical cutoffs and color code names as needed
        if (lastDataPoint.y && lastDataPoint.y > 75) {
            // Change to CSS Color Name or CSS color code as needed
            lastDataPoint.color = "red";
        }

        else if (lastDataPoint.y && lastDataPoint.y > 25) {
            // Change to CSS Color Name or CSS color code as needed
            lastDataPoint.color = "#ffd54d";
        }

        else {
            // Change to CSS Color Name or CSS color code as needed
            lastDataPoint.color = "green";
        }

The script applies color based on the value (y) of the last data point. The exact conditional and ranges are specific to the exact desired coloring and data being represented, and any Javascript conditional can used, not just simple numerical cutoffs, more complex math or logic can be used as needed.

Conclusion

This script provides a straightforward way to add conditional coloring to polar-type widgets in Sisense dashboards, enhancing the visual impact and data visualization capability. By customizing the conditions and colors, you can adapt the script to fit various requirements and use cases. This code template can also used within plugins largely as is, if this functionality is desired as universal functionality throughout the Sisense server.

Scatter Widget With Conditional Coloring

Check out this related content: 

Academy Course

Sisense Documentation