Setting X-axis category name (ex: month number to name)
Introduction
In this post we will show you how to set x-axis categories in a chart in order to create a Year over Year trend chart with month-names instead of month numbers.
This is beneficial when we have a text field which we'd like to sort in a certain manner. The following scripts will enable us to do so for both the main X axis and the secondary (top category) X axis.
Example
Steps
Step 1 - Create Month Number in the ElastiCube
The default month format contains year stamp. Therefore, you'll need to create a custom field with getmonth(Date) function:
Step 2 - Create the Trend Chart
Create the Trend chart in the web application, open the Widget's editor and make the following modifications:
- locate the month number field under "X-AXIS"
- locate the Year component of the date under "BREAK BY"
- locate the required measure/s under "VALUES".
Step 3 - Update the Script
- Go to the widget customize script
- The following script will set the names of the months dynamically, so that when only a certain set of months is selected, the name of the month will be set accordingly
- Copy and paste the following script into the widget's script and press save:
widget.on('processresult',function (se, ev) {
var month = ev.result.xAxis.categories
for(i=0;i<12;i++){
if(month[i]==1){month[i]="JAN";i++;
}
if(month[i]==2){month[i]="FEB";i++;
}
if(month[i]==3){month[i]="MAR";i++;
}
if(month[i]==4){month[i]="APR";i++;
}
if(month[i]==5){month[i]="MAY";i++;
}
if(month[i]==6){month[i]="JUN";i++;
}
if(month[i]==7){month[i]="JUL";i++;
}
if(month[i]==8){month[i]="AUG";i++;
}
if(month[i]==9){month[i]="SEP";i++;
}
if(month[i]==10){month[i]="OCT";i++;
}
if(month[i]==11){month[i]="NOV";i++;
}
if(month[i]==12){month[i]="DEC";i++;
}
}});
One can also manipulate the secondary X Axis, the top categpry, by use of the following script:
widget.on('processresult',function (se, ev) {
var month = ev.result.xAxis
for(i=0;i<3;i++){
if(month.plotBands[i].label.text==1){month.plotBands[i].label.text="JAN";i++;
}
if(month.plotBands[i].label.text==2){month.plotBands[i].label.text="FEB";i++;
}
if(month.plotBands[i].label.text==3){month.plotBands[i].label.text="MAR";i++;
}
if(month.plotBands[i].label.text==4){month.plotBands[i].label.text="APR";i++;
}
if(month.plotBands[i].label.text==5){month.plotBands[i].label.text="MAY";i++;
}
if(month.plotBands[i].label.text==6){month.plotBands[i].label.text="JUN";i++;
}
if(month.plotBands[i].label.text==7){month.plotBands[i].label.text="JUL";i++;
}
if(month.plotBands[i].label.text==8){month.plotBands[i].label.text="AUG";i++;
}
if(month.plotBands[i].label.text==9){month.plotBands[i].label.text="SEP";i++;
}
if(month.plotBands[i].label.text==10){month.plotBands[i].label.text="OCT";i++;
}
if(month.plotBands[i].label.text==11){month.plotBands[i].label.text="NOV";i++;
}
if(month.plotBands[i].label.text==12){month.plotBands[i].label.text="DEC";i++;
}
}});
i.e.
-
Official comment
Here's a more recent and tested Sisense Community post that achieves this: https://support.sisense.com/hc/en-us/community/posts/360023171814-Create-Widgets-with-Month-or-Day-names-by-the-correct-order
Comment actions -
Thanks for posting this! I did make a minor change that IMHO is a little cleaner:
var abbreviations = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
widget.on('processresult', function(se, ev) {
var months = ev.result.xAxis.categories
for (i = 0; i < months.length; i++) {
months[i] = abbreviations[months[i] - 1];
}
}); -
Hi Ido,
In the line chart, i have a field of integer type and values are like- 201601,201602....201612.
And to manipulate this field, I have written the below code:-
widget.on('processresult',function (se, ev) {
var month1 = ev.result.xAxis.categories;
var month = month1%100;
for(i=0;i<12;i++){
if(month[i]==1){month[i]="JAN";i++;
}
if(month[i]==2){month[i]="FEB";i++;
}
if(month[i]==3){month[i]="MAR";i++;
}
if(month[i]==4){month[i]="APR";i++;
}
if(month[i]==5){month[i]="MAY";i++;
}
if(month[i]==6){month[i]="JUN";i++;
}
if(month[i]==7){month[i]="JUL";i++;
}
if(month[i]==8){month[i]="AUG";i++;
}
if(month[i]==9){month[i]="SEP";i++;
}
if(month[i]==10){month[i]="OCT";i++;
}
if(month[i]==11){month[i]="NOV";i++;
}
if(month[i]==12){month[i]="DEC";i++;
}}});
But, still there is no impact on the X axis values!!.
-
Yes, I resolved it.
Below code is working fine.
Below query is also working fine.
widget.on('processresult',function (se, ev) {
var month = ev.result.xAxis.categories
for(i=0;i<12;i++){
var test=month[i].substr(0, 4);
if(month[i]%100==7){month[i]="Jul "+test;i++;
}
if(month[i]%100==8){month[i]="Aug "+test;i++;
}
if(month[i]%100==9){month[i]="Sep "+test;i++;
}
if(month[i]%100==10){month[i]="Oct "+test;i++;
}
if(month[i]%100==11){month[i]="Nov "+test;i++;
}
if(month[i]%100==12){month[i]="Dec "+test;i++;
}
if(month[i]%100==1){month[i]="Jan "+test;i++;
}
if(month[i]%100==1){month[i]="Feb "+test;i++;
}
if(month[i]%100==3){month[i]="Mar "+test;i++;
}
if(month[i]%100==4){month[i]="Apr "+test;i++;
}
if(month[i]%100==5){month[i]="May "+test;i++;
}
if(month[i]%100==6){month[i]="Jun "+test;i++;
}}})
;
Regards,
Ganesh
Please sign in to leave a comment.
Comments
4 comments