Column and Line Chart Formatting
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);
})
-
Hi Everyone,
I'm pleased to inform you that the new Sisense version V5.8 has Axis labels as a built in feature. V5.8 is now available for download.
Please make sure to back up everything prior to upgrading, for this, please see:
https://support.sisense.com/entries/62020374-Back-up-your-work-
Here is a link to V5.8 announcement with the upgrade file:
https://support.sisense.com/entries/69736944-Sisense-V5-8-is-here-Best,
Inbal -
@Nick, This is a late reply but you can have a different metric for 2014 and one for 2015. This can be fixed or dynamic. Fixed would be your measure with a filter of Year=2014 or Year=2015. Dynamic can be accomplished by either a Range filter or by using one of the date functions to manage date offsets. Attached is a screenshot of a config where I did this with 2015 and 2016 invoice amounts.
Screen Shot 2016-08-23 at 2.46.28 PM.png -
This post also has scripts to change x-axis text- working in Sisense 6.7
This post shows how to change some things in the secondary x-axis, it works in Sisense 6.7
Please sign in to leave a comment.
Comments
10 comments