Column And Line Chart Formatting

[intapiuser]

Introduction

SiSense widgets can be customized using simple JavaScript.  Using this JavaScript our users can easily manipulate the look and feel of the widgets to suite their needs, and match the themes of their companies'.  

Purpose/Benefit

Sometimes the standard look and feel of SiSense may not be exactly what the user is looking for.  One may want to match the color scheme of the company, or change the labels of a widget to further explain the data involved.  Using the JavaScript example below lets the user fully customize Column, Bar and Line widgets.  

Example

Steps

To implement these changes simply copy and paste the JavaScript below into the widget script editor (Widget Editor page must be refreshed before clicking 'Apply').

Notes:

 Any section that you do not want to apply, can be easily commented out using /* in the beginning of the section and */ at the end of the section.  

The color is in CSS format.  A useful website to research the color coding is here: http://www.colorpicker.com/

/******************************************************************/
/********Change the Axis Titles, Color, Font Size, and Font********/
/******************************************************************/
widget.on('processresult', function(se,ev){
 
 ev.result.xAxis.title = {text:'X AXIS TITLE', style:{color:'#ffcb05', fontSize:'50px',fontFamily: 'Verdana'}}
 ev.result.yAxis[0].title = {text:'Y Axis Title', style:{color:'#ffcb05', fontSize:'32px',fontFamily: "Arial"}}
 ev.result.yAxis[1].title = {text:'Secondary Y Axis Title', style:{color:'#ffcb05', fontSize:'24px',fontFamily: "Comic Sans MS"}}
 }) 




/*******************************************/
/********Format floating Data Labels********/
/*******************************************/ 

     /*Change the Series Name below*/

 var seriesName = "Total Quantity"; 

widget.on('processresult', function(sender, ev){ 
var data = _.find(ev.result.series, function (ser) {return ser.name == seriesName}).data 
_.each(data, function(value){ 
  

      /*Enable Data Labels, Font Size, Font Weight, Color, Rotation (-360 to 360), and the Y offset*/

value.dataLabels = {enabled:true, style:{'fontSize':'25px', 'fontWeight':'bold', 'color': '#000000'}, rotation: 350, y : 40} 
})
}) 




/*************************************************/
/********Change the Axis Labels Formatting********/
/*************************************************/ 

widget.on('render', function(se,ev){
 
      /*Change the X Axis Labels' Rotation, Distance from Axis, Color, Font Size, Font Weight, and Style*/
 
 se.queryResult.xAxis.labels.rotation = -45;
 se.queryResult.xAxis.labels.y = 30;
 se.queryResult.xAxis.labels.style.color = "#ffcb05";
 se.queryResult.xAxis.labels.style.fontSize = 12;
 se.queryResult.xAxis.labels.style.fontWeight = "bold";
 se.queryResult.xAxis.labels.style.fontFamily = "Verdana";
 
 
      /*Change the Primary Y Axis Labels' Rotation, Distance from Axis, Color, Font Size, Font Weight, and Style*/
 
 se.queryResult.yAxis[0].labels.rotation = 45;
 se.queryResult.yAxis[0].labels.x = 15;
 se.queryResult.yAxis[0].labels.style.color = "#ffcb05";
 se.queryResult.yAxis[0].labels.style.fontSize = 12;
 se.queryResult.yAxis[0].labels.style.fontWeight = "bold";
 se.queryResult.yAxis[0].labels.style.fontFamily = "Arial";
 
 
 
      /*Change the Secondary Y Axis Labels' Rotation, Distance from Axis, Color, Font Size, Font Weight, and Style*/
 
 se.queryResult.yAxis[1].labels.rotation = -45;
 se.queryResult.yAxis[1].labels.x = 10;
 se.queryResult.yAxis[1].labels.style.color = "#ffcb05";
 se.queryResult.yAxis[1].labels.style.fontSize = 15;
 se.queryResult.yAxis[1].labels.style.fontWeight = "bold";
 se.queryResult.yAxis[1].labels.style.fontFamily = "Calibri";
}) 




/****************************************************/
/********Change the Widget's Background Color********/
/****************************************************/

widget.on('ready', function(se, ev){
 
 $(element).css('background-color','#000000'); //changes the widget's background
 $('widget-header' ,element.parent()).css('background-color','#000000'); //changes the widget's title background
}) 





/***************************************************/
/********Change the Axis Scale and Intervals********/
/***************************************************/
 
     /*Note: The number of tick marks on each axis need to be equal*/ 

widget.on('ready', function(se, ev){ 
 var e = element;
 var chart = e.data('hc');
 

     /*Change the Y Axis Scale and Interval*/
 
 chart.yAxis[0].alignTicks =false;
 chart.yAxis[0].update({tickInterval:1000, max:12000, min: 0}, true);
 
 
     /*Change the Secondary Y Axis Scale and Interval*/
 
 chart.yAxis[1].alignTicks =false;
 chart.yAxis[1].update({tickInterval:0.005, max:0.08, min: 0.02}, true); 
})

[paola_ig]

Thanks for sharing this script. Is there a way to turn this into a dashboard script that can be applied to every column and bar chart widget on a dashboard ?