Reverse Y-Axis Of A Chart
Paste the following code into the widget script to reverse the Y-Axis. Instead of the lower number at the bottom of the chart, it will be at the top. widget.on('processresult', function(se,ev){ ev.result.yAxis[0].reversed = true; }) If you have a secondary Y-Axis you can leave it as is or inverse it as well by adding the following line after line 2 of the code above. ev.result.yAxis[1].reversed = true;Sort Both Axes In Scatter Chart
In order to sort both axes in the Scatter chart you might need to use the following script under the "Widget Script" level var xOrder = 'asc' //also, this value can be desc var yOrder = 'asc' widget.on('beforeviewloaded', function(scope, args) { var shouldBeExecuted = (order === 'desc' || order === 'asc' ) if (args.widget.type !== 'chart/scatter' || !shouldBeExecuted) { return } var daysOrder = args.options.xAxis.categories.sort(); if (xOrder === 'desc') { daysOrder.reverse() } if (daysOrder.length === args.options.xAxis.categories.length) { args.options.xAxis.categories = daysOrder for (i=0; i<daysOrder.length; i++) { for (k=0; k<args.options.series.length; k++) { for (j=0; j<args.options.series[k].data.length; j++) { if (args.options.series[k].data[j].selectionData[0] === daysOrder[i]) { args.options.series[k].data[j].x = i; } } } } } }) widget.on('beforequery', function(se, ev) { ev.query.metadata.forEach(function(m) { if (m.wpanel && m.wpanel === 'y-axis') { m.jaql.sort = yOrder } }) })Card View Customization
Before: After: Dashboard script for creating card view: dashboard.on('widgetready',function(d) { $('.dashboard-layout-column').css('background-color', '#f0f0f0'); $('.dashboard-layout').css('background-color', '#f0f0f0'); $('.dashboard-layout-cell-horizontal-divider').remove(); //For Edit Mode //$('.ui-resizable-handle.ui-resizable-e').css('width','0.5px'); //to make the vertical dividers invisible but still accessible - same row between widgets //$('.ui-resizable-handle.ui-resizable-s').css('height','0.5px'); //to make the vertical dividers invisible but still accessible- between rows $('.dashboard-layout-subcell-vertical').css('background-color', 'white').css('box-shadow', '4px 5px 12px #00000078') $('.dashboard-layout-subcell-host').css('padding', '10'); $('.dashboard-layout').css('padding-right', '20px'); $('.dashboard-layout').css('padding-left', '20px'); }); Widget script for rounding corners: widget.on('ready', ()=> { $(element).parent().css('border-radius', '20px'); $(element).parent().parent().css('border-radius', '20px'); })How to Use "OR" Filter Condition on a Widget Level | JavaScript
This article provides an example JavaScript code snippet to have the ability to use the "OR" filter condition on a widget level. Currently, the Filter Relations Editor in Sisense allows users to set up dashboard filters with "OR" relations. If there is a need to configure the "OR" filter relation between two filters at the widget level, this JavaScript code snippet might help to achieve your goal.Change Grand Total Row To Display Difference In Pivot Widgets
In cases where we want to display the difference between two columns instead of using the default Grand Totals in Pivot widgets: Include the following widget script: function removeCommas(num){ numClean = num.replace(/,/g,""); return numClean; }; widget.on("domready", function(){ /* Set text to be shown grand total row*/ var diff = "Difference"; /* set variables and clean local for reading */ var num1 = removeCommas($("#prism-mainview > div > div.errvil-warpper > div > div > div > pivot > div > div.p-fixed-cols > div > table > tbody > tr:nth-child(1) > td.p-value.p-first-data-col > div").text()); var num2 = removeCommas($("#prism-mainview > div > div.errvil-warpper > div > div > div > pivot > div > div.p-fixed-cols > div > table > tbody > tr:nth-child(2) > td.p-value.p-first-data-col > div").text()); /* Change label text*/ $("#prism-mainview > div > div.errvil-warpper > div > div > div > pivot > div > div.p-fixed-cols > div > table > tbody > tr:nth-child(3) > td.p-grand-total-row-head.p-first-data-col > div > div > span").text(diff) /* Change difference value and add locale format*/ $("#pivot_ > tbody > tr:nth-child(3) > td.p-value.p-first-data-col.p-total-row-val > div").text((num1 - num2).toLocaleString()); }); console.log("background script run"); Result: Disclaimer: * Tested on version 7.0 * Only works with 2 row Pivot widgetsCenter / Zoom Scatter Map
Introduction The following article will explain how to center and zoom scatter map. Purpose/Benefits This script allows you to center and zoom a map according to a given latitude and longitude. Example In the Example below we want to center the map to China and set the zoom to 8. Steps STEP 1 - FIND LATITUDE AND LONGITUDE You can find the latitude and longitude using google maps Search for and get coordinates STEP 2 - ADD WIDGET SCRIPT /********************************************************/ /********Set and Center a Map**********/ /********************************************************/ __first_load__ = true; widget.on("beforeviewloaded", function (widget, args){ var map = args.options.map; window.map = map; }); widget.on("domready", function (widget, args){ if (__first_load__){ setTimeout(function () { window.map.setView([39, 116], 8);}, 500); } __first_load__ = false; }); For multi-map support, please use the following syntax instead: widget['__first_load__'] = true; widget.on("beforeviewloaded", function (w, args){ var map = args.options.map; window['map_'+w.oid] = map; }); widget.on("domready", function (w, args){ if (widget['__first_load__'] ){ setTimeout(function () { window['map_'+w.oid].setView([39, 116], 8);}, 1000); } widget['__first_load__'] = false; } );Gradient Conditional Formatting In Pivot Tables
Conditional formatting of background colors in pivot tables is one of the best ways to draw attention to numbers, but still provide a clean visual. The use of data bars creates a lot of visual noise, whereas background colors are subtle and act more like a heatmap. The code below can be added to any pivot widget to conditionally format cells based on their values from a solid color for the max value down to white for the min value. In order for this code to work, the pivot table must have the "data bars" feature enabled. This conditional formatting simply swaps the data bars for background colors. Here is the code: var colors = ['77, 197, 255', '226, 112, 255']; var startColIdx = 2; widget.on('ready',function(e,ev) { for (var i in colors){ var color = colors[i]; $(element).find(".databar[fidx=" + (parseInt(i,10)+startColIdx) + "] .bar-container .bar").each(function(x,e){ $(e).css('background-color', 'rgba(0,0,0,0)'); $(e).closest('.databar').css('background-color','rgba(' + color + ',' + ($(e).width()/$(e).parent().width()) + ')'); }); } }); The code has 2 variables The colors array, these are the RGB colors for the max value for each of the value columns The startColIdx is the column number that the pivot values start at. If you have 1 "Rows" item, the startColIdx is 2. If you have 2 rows, the startColIdx is 3 and so on. Below is an image showing the result of applying this code to a pivot widget.Dashboard Script for Automatic Filter Cascading
Dashboard Script for Automatic Filter Cascading This dashboard script below can be used to synchronize the selections of a set of filters. For example, if the first filter is set to ABC, all subsequent filters listed will automatically be updated to ABC as well. The script also replicates the disabled state from the first filter to the other filters. Look below for an example of Elasticube and dashboard. Please note: Our community website does not currently support .dash (dashboard) and .smodel (Elasticube) files. Please change the extensions of the files before importing them into your environment. Note that once imported, the cube still needs to be built. Example Use Case: When dealing with multiple date fields in a fact table, this article provides two options, both of which require duplicating all rows in the fact table as many times as the number of date fields. For example, if you have three date fields that you need to analyze your KPIs by, you'll have to have three copies of the fact table. While these approaches are easy to implement, oftentimes they are not feasible and scalable solutions due to the size of the data. A more scalable alternative is to duplicate the date dimension table, which is substantially smaller than a fact table (e.g. a date dimension table containing 10 years of data only has either 3,652 or 3,653 rows), then connect each date field from the fact to the corresponding date dimension table. See the picture below for an example. The next step is to add each date field as a filter to the dashboard. Keep only the first filter editable and lock the other filters. The subsequent filters will be updated automatically as users set the first filter. Ensure that the filters are correctly toggled on/off in each widget's setting. In the example above, the first widget shows the number of hospital admissions by the admission date. Therefore, only the first (Admission Date) filter should be turned on. The last step is to add the dashboard script that automatically cascades the selection of the first filter to the subsequent filters. In the filterNames variable, specify the names of the filters, starting from the first filter, from which the selections will be replicated to other filters. This is the only part of the code that requires your input. /*************************** This script is used to synchronize the selections of a set of filters ***********************/ /** E.g. if the first filter is set to ABC, all subsequent filters listed will automatically be updated to ABC as well ***/ /***************** The script also replicates the disabled state from the first filter to the other filters **************/ //Specify the names of the filters, starting from the first filter, from which the selections will be replicated to other filters //This is the only part of the code that requires your input var filterNames = ['Admission Date', 'Discharge Date', 'Last Visit Date'] //Every time a filter is changed, this code is executed dashboard.on('filterschanged',function(d) { //Find the first filter by name var filter1FilterObject = dashboard.filters.$$items.find((item) => { if (item.jaql && item.jaql.title.indexOf(filterNames[0]) !== -1) { return true; } }); //Get the JAQL filter selection of the first filter var filter1FilterObjectJAQL = filter1FilterObject.jaql; //Get the JAQL filter disabled state of the first filter var filter1FilterObjectDisabled = filter1FilterObject.disabled; //Define an array for the subsequent filters' objects var filterObjects = new Array(); //Find each of the subsequent filters by name for(i=1 ; i<filterNames.length ; i++) { filterObjects[i-1] = dashboard.filters.$$items.find((item) => { if (item.jaql && item.jaql.title.indexOf(filterNames[i]) !== -1) { return true; } }); } //Update the properties of the subsequent filters to match the first filter for(i=0 ; i<filterObjects.length ; i++) { if(typeof filterObjects[i] != 'undefined') { filterObjects[i].jaql.filter = filter1FilterObjectJAQL.filter; filterObjects[i].disabled = filter1FilterObjectDisabled; } if(filter1FilterObjectJAQL.datatype == 'datetime') { filterObjects[i].jaql.level = filter1FilterObjectJAQL.level; } } //Refresh the dashboard dashboard.refresh(); });Threshold-Based Conditional Plot Bands Colors For Cartesian and Polar Charts
Threshold-Based Conditional Plot Bands Colors For Cartesian and Polar Charts Plot bands in charts are visual elements that highlight specific ranges along the x-axis or y-axis, usually to emphasize certain areas of interest. These bands are typically shaded or colored differently from the rest of the chart, making them easy to distinguish. They often mark thresholds, target ranges, or critical areas. Here are some examples of where plot bands can be useful: In a performance chart, they can indicate acceptable and unacceptable performance ranges. In a control chart, they can highlight control limits and help identify deviation zones. In a financial chart, they can represent budget limits or profit margins, showing where financial performance is on target or off track. In a temperature chart, they can illustrate safe operating ranges for machinery or environmental conditions. In a sales chart, they can mark seasonal trends or sales targets to indicate where performance is expected to peak. The widget script below can be used to set conditional plot band (background) colors on Cartesian charts (Line, Column, Bar, Area, Scatter, and Box & Whisker) and Polar charts based on defined thresholds. /*** This script is used to create colored plot bands based on defined thresholds. This works for all Cartesian charts (Line, Column, Bar, Area, Scatter, Box & Whisker) as well as Polar chart. ***/ widget.on("processresult", function (widget, args){ args.result.yAxis[0].plotBands = [ //Define the color and the thresholds of each plot band in an object literal like shown in the examples below { color: '#ACACAC', from: Number.MIN_SAFE_INTEGER, //this represents the smallest integer value that can be safely represented in JavaScript -9007199254740991 to: -3 }, { color: '#25AD84', from: -3, to: -2 }, { color: '#FFB74B', from: -2, to: -1 }, { color: '#F5435C', from: -1, to: 0 }, { color: '#F5435C', from: 0, to: 1 }, { color: '#FFB74B', from: 1, to: 2 }, { color: '#25AD84', from: 2, to: 3 }, { color: '#ACACAC', from: 3, to: Number.MAX_SAFE_INTEGER //this represents the largest integer value that can be safely represented in JavaScript, i.e. 9007199254740991 } ]; }); For more information about customizing Sisense dashboards and widgets using JavaScript, please refer to these articles: Customizing Sisense using JavaScript Extend The Functionality Of An Existing Widget Highcharts API Documentation (for Highcharts-powered widget types: Column, Bar, Area, Pie, Polar, Scatter, and Box & Whisker)
