Below script will add gradient color to pie chart. Steps: Create pie chart Add below widget script and update the variable 'color1' with any color you need to add as gradient. Primary color is the color you selected in Sisense panel. Save the script and refresh widget widget.on('processresult', function(se,ev){ var color1 = 'rgba(230, 230, 230, 0.4)' $.each(ev.result.series[0].data, function(index, value){ value.color = { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, value.color], [1, color1] ] } }) })

Below script will add gradient color to widget. Supported widget types are bar chart, column chart, line chart and area chart Steps: Create bar/column/line/area chart Add below widget script and update the variable 'color1' with any color you need to add as gradient. Primary color is the color you selected in Sisense value/breakby panel. Save the script and refresh widget widget.on('processresult', function(se,ev){ var color1 = '#3399ff' $.each(ev.result.series, function(seriesIndex, seriesValue){ seriesValue.color = { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, seriesValue.color], [1, color1] ] } $.each(seriesValue.data, function(index, value){ value.color = seriesValue.color }) }) })

We sometimes need to rename X-Axis labels to make them more meaningful. For example, if we have month numbers in a database, we can utilize them in a widget and use script to replace them with their names. STEPS: Create widget with required fields Add below script to widget replace the variable 'panelName' with name of panel whose items needs to be replaced replace the variable 'newItemMapping' with mapping of existing and new labels 3. Save script and refresh widget newItemMapping = { '1':'Jan', '2':'Feb', '3':'Mar', '4':'Apr', '5':'May' } widget.on("queryend", function(se, ev){ var panelName = 'Day Number' //Items in this panel will be replaced with new items panelIndex = ev.rawResult.headers.indexOf(panelName) $.each(ev.rawResult.values, function(index, value){ if(newItemMapping[value[panelIndex].text] != undefined) { value[panelIndex].data = newItemMapping[value[panelIndex].data] value[panelIndex].text = newItemMapping[value[panelIndex].text] } }) })

Value labels may occasionally overlap with column/bar labels. Changing the max value of yAxis is a simple technique to display value labels outside of a column or bar. Here's a script to dynamically alter the max value. Steps: Create bar/column chart Enable Value Labels in Design panel of widget Open Script Editor window of widget and add below script. Save the script Refresh widget widget.on('ready', function(se, ev){ chart = se.chart[0][Object.keys(se.chart[0])[0]].hc chart.yAxis[0].setExtremes(chart.yAxis[0].min, chart.yAxis[0].dataMax * 1.3) }); This script supports Classic and Stacked bar/column charts

Most of the Sisense users are aware of and using Tabber plugin. By default, it comes with some basic styles like color, height etc. Sometimes we may need to apply more styles to the tabber. It can be achieved by using below script widget.on('ready',function(w, e) { basicstyle = { 'font-size':'15px', 'padding':'10px 20px', 'transition':'all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s'} //style for both active and inactive tabs activeTabSyle = {'background-color': '#a8325e', 'color':'#ffffff', 'border':'none','border-radius':'5px'} //style for active tab inactiveTabStyle = {'background-color': '#ffffff', 'color':'#858c87', 'border-bottom':'3px #d4d4d4 solid', 'border-radius':'0px'} //style for inactive tab $('.listDefaultCSS .listItemDefaultCSS', element).css(basicstyle) $('.vSeparatorCSS', element).css({'border': 'none'}) $(`.listDefaultCSS .listItemDefaultCSS[index=${w.style.activeTab}]`, element).css(activeTabSyle) $(`.listDefaultCSS .listItemDefaultCSS:not([index=${w.style.activeTab}])`, element).css(inactiveTabStyle) $('.listDefaultCSS .listItemDefaultCSS', element).on('click', function(s){ $(`.listDefaultCSS .listItemDefaultCSS:contains("${$(s)[0].currentTarget.innerHTML}")`, element).css(activeTabSyle) $(`.listDefaultCSS .listItemDefaultCSS:not(:contains("${$(s)[0].currentTarget.innerHTML}"))`, element).css(inactiveTabStyle) }) }) You can also set a default tab when page loads. In below code, update "Tab 3" with name of tab which needs to set as default. widget.style.activeTab = widget.tabs.findIndex(el=>el.title == "Tab 3") //To set default tabber

By default, in Area Map, tooltip shows limited information like name of country/state and one calculated value. Below script allow us to add more information to tooltip. widget.on("beforequery", function (se, ev) { var newJaql = { jaql : { //agg:'max', //enable this if you need to display aggreated value column: "Region", //Colum name datatype: "text", dim: "[Records.Region]", //table + column name table: "Records", //table name title: "Region" } } ev.query.metadata.push(newJaql) lastIndex = ev.query.metadata.length - 1 }) widget.on("render", function (se, args){ $.each(args.widget.queryResult.$$rows, function(index, value){ value[1].text = value[1].text + ', Region: ' + value[2].text //replace 'Region' with label you want }) })

If a widget contain large number of bars/columns, it may be difficult to analyze the chart. In such case one option is to enable Auto Zoom feature in widget which will enable a scroll bar in chart. Alternative option is to add pagination in chart. Here is a script to achieve this. Update the variable 'itemsPerPage' with number of items to be displayed per page. itemsPerPage = 10 // Number of items to be displayed in a page widget.on("processresult", function(se, ev){ ev.result.chart.marginBottom = 100 //Adjust the bottom margin here }) var normalState = { fill: 'none', stroke: 'none', r: 3, style: { color: '#697286', fontWeight : 'bold', borderWidth : 0 } }, hoverState = { fill: '#f0f6f7', stroke: 'none', r: 3, style: { color: '#697286', fontWeight : 'bold', borderWidth : 0 } } widget.on("domready", function(w, args){ chart = w.chart[0][Object.keys(w.chart[0])[0]].hc var dataLength = chart.series[0].data.length, buttonsNum = Math.ceil(dataLength / itemsPerPage), btnTop = chart.plotHeight + chart.plotTop + 40, options = { str: '<<', x: 0, y: btnTop, step: itemsPerPage - 1, width:15 }; chart.customBtns = []; chart.xAxis[0].setExtremes(0, itemsPerPage - 1); for (var i = 0; i < buttonsNum; i++) { if (!i) { renderBtn(options, chart); } options.str = i + 1; renderBtn(options, chart); if (i === buttonsNum - 1) { options.str = '>>'; renderBtn(options, chart); } } placeBtns(chart); }); function renderBtn(options, chart) { chart.customBtns.push(chart.renderer.button( options.str, options.x, options.y, function() { setRange.call(this, options, chart.xAxis[0]); },normalState, hoverState) .attr({ width:options.width, 'text-align':'center' }) .add()); options.x += options.width; } function setRange(options, axis) { var textStr = this.text.textStr, min, max; if (Highcharts.isNumber(textStr)) { min = (textStr - 1) * itemsPerPage; max = (textStr - 1) * itemsPerPage + options.step; } else { switch (textStr) { case '<<': min = 0; max = options.step; break; case '>>': dataLength = axis.dataMax+1 if (dataLength % itemsPerPage > 0) { min = dataLength - (dataLength % itemsPerPage) max = axis.dataMax + (itemsPerPage - (dataLength % itemsPerPage)) } else { min = axis.dataMax - dataLength max = axis.dataMax } break; } } axis.setExtremes(min, max); } function placeBtns(chart) { var btns = chart.customBtns, btnsWidth = 0, x; btns.forEach(function(btn) { btnsWidth += btn.getBBox().width }); x = (chart.chartWidth - btnsWidth) / 2; btns.forEach(function(btn) { btn.attr({ x: x }); x += btn.getBBox().width }); }

A pie chart can be converted to semi circle donut using below script. widget.on('processresult', function(se, ev){ ev.result.plotOptions.pie.startAngle= -90, ev.result.plotOptions.pie.endAngle= 90, ev.result.plotOptions.pie.center= ['50%', '75%'], ev.result.plotOptions.pie.size= '110%' ev.result.plotOptions.pie.innerSize= '50%' }) Steps: Create a pie chart Add above script to widget and save Refresh the widget

Its possible to set different shapes and icons as marker inline chart. Here is script to set different types of markers based on condition widget.on('processresult', function(se, ev){ $.each(ev.result.series[0].data, function(index, value){ if(value.y <= 5000){ value.marker.symbol= 'url(https://img.icons8.com/emoji/30/000000/flag-in-hole-emoji.png)' } else if(value.y <= 10000){ value.marker.symbol= 'url(https://img.icons8.com/emoji/30/000000/kite-.png)' } else if(value.y <= 15000){ value.marker.symbol= 'triangle' value.marker.radius= 10 value.marker.fillColor= '#e6b122' } else{ value.marker.symbol= 'square' value.marker.fillColor= '#1d5ecf' value.marker.radius= 10 } }) })

This script is to sort items in X-axis manually. Widget will display bar/columns in the order you specified in 'categories' list var categories= ['Jan','Feb','Mar','Apr','May','Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; widget.on('queryend',function(se,ev){ ev.rawResult.values.sort(function(a, b){ var aIndex = categories.indexOf(a[0].data); var bIndex = categories.indexOf(b[0].data); if (aIndex < bIndex) return -1; if (aIndex > bIndex) return 1; return 0; }) }) If you need to sort items in 'Break by', use below script breakby = ['West', 'Midwest', 'South', 'Northeast', 'Unknown'] widget.on('processresult',function(se,ev){ ev.result.series.sort(function(a,b){ if (breakby.indexOf(a.name) < breakby.indexOf(b.name)) { return -1 } else if (breakby.indexOf(a.name)>breakby.indexOf(b.name)) { return 1 } return 0; }); })

If a user click on a stacked chart, Sisense will add dashboard filter for the dimension in 'Categories' panel, but not for dimension in 'Breakby' panel. By adding below script to widget, filter for breakby dimension also get added to dashboard. widget.on('processresult', function(se, ev){ $.each(ev.result.series, function(index, value){ value.events = {click: function(event){ var filterOptions = { save: true, refresh: true, } breakbyFilter = { jaql: { collapsed: true, column: ev.widget.metadata.panels[2].items[0].jaql.column, datatype: ev.widget.metadata.panels[2].items[0].jaql.datatype, datasource:ev.widget.datasource, dim: ev.widget.metadata.panels[2].items[0].jaql.dim, filter: {members: [value.name]}, merged: true, table: ev.widget.metadata.panels[2].items[0].jaql.table, title: ev.widget.metadata.panels[2].items[0].jaql.title } } var isSameMemberFilterExist = _.some(prism.activeDashboard.filters.$$items, function (filter) { var isDatasourceSame = _.isMatch(filter.jaql.datasource, breakbyFilter.jaql.datasource); return (filter.jaql.dim == breakbyFilter.jaql.dim && filter.jaql.filter.members && filter.jaql.filter.members.toString() == breakbyFilter.jaql.filter.members.toString() && isDatasourceSame); }); if (isSameMemberFilterExist) { delete breakbyFilter.jaql.filter.members; breakbyFilter.jaql.filter.all = true; prism.activeDashboard.filters.update([breakbyFilter], filterOptions); }else{ prism.activeDashboard.filters.update(breakbyFilter, filterOptions); } } } }) }) Note: 'Clear Selection' button in widget title bar will not clear break-by filter

This script allow dashboard owner to control which export options should be visible to other users for that dashboard. Add this script to your dashboard. This script will hide all export options from dashboard and all widget in that dashboard. If you don't want to hide a specific export option, change its value to true. dashboard.on('initialized', function(se, ev){ if(se.instanceType != 'owner') { se.userAuth.dashboards.export_jpeg = false // Hide download jpeg option dashboard menu se.userAuth.dashboards.export_pdf = false // Hide download pdf option dashboard menu se.userAuth.widgets.export_csv = false //Hide download csv option from all widgets in dashboard se.userAuth.widgets.export_png = false //Hide download png option from all widgets in dashboard se.userAuth.widgets.export_pdf = false //Hide download pdf option from all widgets in dashboard } })