Text Wrapping for long x-axis labels & Legend sorting in stacked charts
Introduction
When our chart x-axis have long labels, by default the SISense Web application will not render the entire label. For this, we can use the following script which wraps the text and breaks the text line for every other white space. In addition, the legend will sort revers in horizontal stacked bar charts, for this, the second part of the script will reverse the original sorting of the legend values, so as to adequately show the legend according to the stacked values.
One note, in order to sort the legend, you'll need to replace the seriesName variable with the name of the dimension which you're breaking by, currently it's set as 'Percent'
Before:
After:
Script:
Place the following script in the widget's script box
//the following element wraps the label text
widget.on('beforeviewloaded', function (widget, ev) {
var newMaxCharactersPerLabel = 100;
ev.options.xAxis.labels.maxCharactersPerLabel = newMaxCharactersPerLabel;
ev.options.xAxis.labels.useHTML = true;
ev.options.xAxis.labels.formatter = function () {
var text = this.value;
var newText = "";
var array = text.split(" ");
for (i = 0; i < array.length; i++) {
if (i % 2 == 1 && array.length > 1) {
newText += array[i - 1] + ' ' + array[i] + '';
}
else if(array.length == 1){
newText = array[i];
}
}
return newText;
}
});
//the following element sorts the legend accordingly, make sure to replace the
//seriesName variable with the name of the dimension which you're breaking by, currently it's set as 'Percent'
widget.on('processresult',function(se,ev){
var seriesName = 'Percent';
ev.result.series.sort(function(b,a){return a.name.localeCompare(b.name); });
var series = ev.result.series;
var numberOfSeries = ev.result.series.length;
for(var i=0;i < numberOfSeries;i++){
series[i].legendIndex = numberOfSeries - i;
}
var data = _.find(ev.result.series, function (ser) {return ser.name == seriesName}).data
_.each(data, function(value){
//enable dataLabels, change its font, make it bold and rotate by 270
value.dataLabels = {enabled:true, style:{'fontSize':'50px', 'fontWeight':'bold'}, rotation: 0}
})
})-
This does not seem to work on non-stacked charts which is our current need. See attached screen shot.
ChartLabelNOwrap.png -
One other point is that we have multiple scripts applied:
/*
Welcome to your Widget's Script.- You can access your Widget via the 'widget' variable name.
- You can access your Widget's DOM via the 'element' variable name (undefined until DOM creation).
- You can access your Dashboard by accessing the 'dashboard' variable name.- For a complete API reference for Widgets and Dashboards go here: https://docs.google.com/document/d/1nQBZtWAdNFAd9nBhPWGVT3qOMS4Qm0PzBZVIzz5DfE8/
/* This script sets the limit on the number of series displayed */
widget.on('processresult', function(se,ev){
se.style.dataLimits.seriesCapacity = 500;
})
/*
THIS SCRIPT SETS THE FONTS ON THE WIDGETS */
var events = [
"beforequery",
"beforewidgetindashboardmenu",
"beforewidgetmenu",
"buildquery",
"destroyed",
"initialized",
"processresult",
"queryend",
"querystart",
"readjust",
"ready",
"refreshed",
"render",
"resizeend",
"resizestart",
"resizing",
"widgetchanged"
];
events.forEach(function(event) {
widget.on(event, function(widget) {
prism.sps.globals.widgetEventHandler(widget, element, event);
});
});
/*
THIS SCRIPT SETS THE CHART LABEL SPACING
widget.on('render', function (widget) {
widget.queryResult.xAxis.labels.maxCharactersPerLabel = 50;
})*/
/*
THIS SCRIPT SETS THE CHART AXIS TITLES */
events.forEach(function(event) {
widget.on(event, function(widget) {
prism.sps.globals.widgetEventHandler(widget, element, event, '', '# or Count', 'Hours');
});
});
// THE NEXT TWO SCRIPTS WRAP LABEL TEXT
//this part of the script will break the white spaces into breaks, for every other white space.
widget.on('beforeviewloaded', function(widget, ev){
var newmaxCharactersPerLabel = 100;
ev.options.xAxis.labels.maxCharactersPerLabel = newmaxCharactersPerLabel;
ev.options.xAxis.labels.useHTML = true;
ev.options.xAxis.labels.formatter = function(){
var text = this.value;
var newText = "";
var array = text.split(" ");
for (i=0; i<array.length; i++) {
if (i%2 == 1) {
newText += array[i-1] + ' ' + array[i] + '';
} -
For truncating labels for Pie charts you can use the following script:
widget.on("beforeviewloaded",function(widget,args){
var maxCharNum = 5,
originFormatter = args.options.plotOptions.pie.dataLabels.formatter;args.options.plotOptions.pie.dataLabels.formatter = function (){
var value = originFormatter.call(this);if(value.length > maxCharNum){
value = value.substring(0,4)+'...';
}return value;
}
});
Please sign in to leave a comment.
Comments
11 comments