A column chart splits the data by one or more dimensions and we have to manually sum up or create a separate widget to find total value of each dimensions. The script below displays total value of each dimensions/items along with legend Steps: Create a bar/column/line/area chart Add below script to widget Save the script and refresh widget widget.on('processresult', function(se, ev){ ev.result.legend.labelFormatter = function(){ legendSeries = ev.result.series.find(el=>el.name == this.name) totalValue = 0 $.each(legendSeries.data, function(index, value){ totalValue = totalValue + value.y }) myItem = se.metadata.panels[1].items[0] myMask = $$get(myItem, "format.mask", {}) var numberFormatter = prism.$injector.get('$filter')('numeric'); formattesValue = numberFormatter(totalValue, myMask); return this.name + ' (' + formattesValue + ')' } })

Below script to allow us convert a bar chart to progress bars. Steps: Create a bar chart Bar chart should contains only one field under 'Categories' and no field under 'Break by' Calculation of first value panel should be 1 and convert to percentage (100%). This is the grey color background bar in the screenshot. Second value panel contains actual calculation for bar chart. 2. Add below script to widget 3. Save the script and refresh widget widget.on('processresult', function(se, ev){ ev.result.plotOptions.bar.grouping = false ev.result.yAxis[0].visible = false ev.result.xAxis.gridLineWidth = 0 ev.result.xAxis.lineColor = 'transparent' ev.result.series[0].dataLabels = {enabled : false} ev.result.series[0].states = { hover: { enabled: false } } $.each(ev.result.series, function(index, value){ value.borderRadius = 12 }) }) widget.on("beforedatapointtooltip", function (se, ev){ if(ev.context.points[0].seriesName == ev.widget.metadata.panels[1].items[0].jaql.title) ev.cancel=true; });

Below script allow us to add background image to a widget. Steps: Create a widget. (supported widget types : bar, column, area, line, pie, scatter) Add below script to widget and update then variable 'imageURL' with URL of image Save the script and refresh widget widget.on('processresult', function(se, ev){ imageURL = 'paste your image url here' //set background image ev.result.chart.plotBackgroundImage = imageURL //set transparency to bars $.each(ev.result.series, function(index, value){ value.borderWidth = 2 value.borderColor = value.color value.borderRadius = 2 value.color = Highcharts.color(value.color).setOpacity(0.6).get('rgba') }) })

We can control the transparency of bar or column chart using below script Steps: Create bar/column chart Add below script to chart Save the script and refresh widget widget.on('processresult', function(se, ev){ $.each(ev.result.series, function(index, value){ value.borderWidth = 1 value.borderColor = value.color value.borderRadius = 2 value.color = Highcharts.color(value.color).setOpacity(0.4).get('rgba') }) })

Gradient colors can be applied to a scatter chart using below script Steps: Create a scatter chart Add below script to widget Save script and refresh widget widget.on('processresult', function(se, ev){ $.each(ev.result.series, function(index, value){ value.marker.fillColor = { radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 }, stops: [ [0, 'rgba(255,255,255,0.5)'], [1, value.color] ] } }) })

Here is a script to format data labels of widgets. Supported widget types : Line chart, Bar chart, Column chart, Area chart Steps: Create a widget Add below script to widget. Update the variable ` borderColor ` and ' backgroundColor ' if required. Save the script and refresh the widget widget.on('processresult', function(se, ev){ $.each(ev.result.series, function(seriesIndex, seriesValue){ if(seriesIndex == 0){ borderColor = '#94FF77' backgroundColor = 'rgba(148, 255, 119, 0.2)' }else if(seriesIndex == 1){ borderColor = '#FFB4B4' backgroundColor = 'rgba(255, 180, 180, 0.2)' } seriesValue.dataLabels = { borderColor: borderColor, backgroundColor: backgroundColor, borderWidth: 1, borderRadius:3, padding: 3, style: { fontWeight: 'bold' } } }) })

When we add 2 categories to a bar chart, one will display on left side and another will be on right side. We can use below script to display both categories on left side. Step: Create a bar with 2 categories. Add below script to widget. Update the variable leftMargin based on length of category labels Save the script and refresh widget widget.on('processresult',function(se,ev){ var leftMargin = 200 ev.result.chart.marginLeft= leftMargin ev.result.chart.marginRight= 50 ev.result.plotOptions.series.borderWidth = 1; $.each(ev.result.xAxis.plotBands, function(index, value){ value.label.align = 'left' value.label.x = -leftMargin + 10 }) });

By default, most of the Sisense widget are 2D. We can convert them to 3D using below script Steps: Create bar/column/pie chart Add below script to widget. (Change alpha, beta, depth based on you requirement - it will change different angles of 3d chart) Save script and refresh the widget Script for Column chart: widget.on('processresult', function(se, ev){ ev.result.chart.options3d = { enabled: true, alpha: 15, beta: 15, depth: 250, viewDistance: 25 } ev.result.plotOptions.column.depth = 35 ev.result.plotOptions.column.borderWidth = 0 }) Script for Bar chart: widget.on('processresult', function(se, ev){ ev.result.chart.options3d = { enabled: true, alpha: 15, beta: 15, depth: 250, viewDistance: 25 } ev.result.plotOptions.bar.depth = 35 ev.result.plotOptions.bar.borderWidth = 0 }) Script for Pie chart: widget.on('processresult', function(se, ev){ ev.result.chart.options3d = { enabled: true, alpha: 45, beta: 0 } ev.result.plotOptions.pie.depth = 50 })

Different marker symbols can be set to line chart based on its value (Y-axis) using this script. But in some cases we may need to set icons for each category (X-axis), Here is a script to achieve this Steps: Create line chart and enable marker in design panel Add below script to widget and update the variable 'categoryLogoMapping' with name of items in X-axis and its logo URL Save script and refresh widget categoryLogoMapping = {'Google': 'https://www.svgrepo.com/show/303108/google-icon-logo.svg', 'Apple': 'https://www.svgrepo.com/show/303110/apple-black-logo.svg', 'Twitter': 'https://www.svgrepo.com/show/303127/twitter-logo.svg', 'Facebook': 'https://www.svgrepo.com/show/303114/facebook-3-logo.svg', 'Whatsapp': 'https://www.svgrepo.com/show/303150/whatsapp-symbol-logo.svg'} widget.on('processresult', function(se, ev){ ev.result.series[0].lineWidth = 0 //To disable connected line between markers $.each(ev.result.series[0].data, function(index, value){ value.marker.symbol= `url(${categoryLogoMapping[value.selectionData[0]]})` value.marker.width= 25 value.marker.height= 25 }) })

When we export a widget as CSV, it just contains the widget's dimensions and measures. Additional measure columns that are not part of the widget can be added to CSV exported from it using a script. Consider we have a column chart depicting Total value by region, its exported CSV contains only 2 columns - Region and Total value. However, we may utilize a script to add more columns to CSV, such as maximum, minimum, and average values. Supported Widget types : Bar chart, Line chart, Column Chart, Pivot2, Pie chart, Area chart Note : Only measures can be added in additional column. Adding dimension in new column is not supported Contact us for the script - binextlevel@gmail.com

If predefined sort order is available, X-axis or chart legend can be sorted by using this script. But in some cases we may not know the sort order in advance and sorting has to be done based on a rank field in the table. Also maintenance will be easy if we sort the chart by rank field instead of widget script. This can be achieved using a script. In order to do it, we need a rank column. For example, If we need to sort Region based on a field, we need Region and rank column (say, Region Rank) Steps : Create line/bar/column chart Add the script to widget and update the variables: Save script and refresh the widget. Contact us for the script - binextlevel@gmail.com

Below script will display total value at the center of donut chart. Steps: Create a donut chart Add below script to the widget. Update the variable labelColor and labelFontSize with color and font size of data label Save the script and refresh widget var titleText = '' var labelColor = '#4287f5' var labelFontSize = '24px' widget.on('processresult', function(se, ev){ sum = 0 panelItem =ev.widget.metadata.panels[1].items[0] itemMask = $$get(panelItem, "format.mask", {}) var numberFormatter = prism.$injector.get('$filter')('numeric'); $.each(ev.result.series[0].data, function(index, value){ sum = sum + value.y }) titleText = 'Total ' + numberFormatter(sum, itemMask); ev.result.title.text = titleText ev.result.title.align = 'center' ev.result.title.verticalAlign = 'middle' ev.result.title.style = { color: labelColor, //Color of value label inside donut fontWeight: 'bold', fontSize: labelFontSize//Font size of value label inside donut } }) widget.on("ready", function(w, args){ chart = w.chart[0][Object.keys(w.chart[0])[0]].hc var textX = chart.plotLeft + (chart.series[0].center[0]); var textY = chart.plotTop + (chart.series[0].center[1]); title = $('svg .highcharts-title') title.attr('x', textX + (title.width() * -0.5)); title.attr('y', textY + (title.height() * -0.5)); });