Number formatting of y axis labels in a chart according to the column value

RRK · April 6, 2016

Hi,
 
I am looking to format the label on y axis in chart dynamically in this case depending on country parameter value.
 
So if the parameter comes as Austrialia the number format on y axis should get displayed as [5:00,4:00,3:00 etc]
 
If the parameter values comes as France then the Y axis should display the number format as [75.00%,50.00%,25.00% etc]
And
 
If the parameter values comes as USA then the Y axis should display the number format as [+30,+50,+25 etc]
 
So how to format y axis labels depending on parameter value.
 
Please find attached report design and screen shots.
 
Many thanks in advance!!!

shamo · April 6, 2016

if the countries are only these 3, I will create 3 different charts and use parameter to hide and show which on is selected.

RRK · April 6, 2016

Hi Shamo, 
It's about formatting the yaxis label and not to hide unused charts. 
I am looking to format the number on yaxis. 
Eg: numberformat = #.## 
In this manner...

pricher · April 6, 2016

Hi,
 
You can use the Highcharts API to reformat the labels. Here's some code you can add to the beforeGeneration event of the Highcharts scripting:
<pre class="_prettyXprint _lang-js">
beforeGeneration: function(options)
{
var param = this.getReportParameter("Country");
if (param == "France") {
options.yAxis[0].labels.formatter = function () {return this.value + '%';}
}
else if (param == "USA") {
options.yAxis[0].labels.formatter = function () {return '+' + this.value;}
}
else {
options.yAxis[0].labels.formatter = function () {return this.value + ':00';}
}
},
</pre>
You may have to play with the return value in each function to accommodate your data.
 
Attached example.
 
P.

RRK · April 6, 2016

Hi Pierre,
 
Thanks this will help to add perfix suffix to the current value.
 
But could you please let me know how we can change the number format of that label : 
eg : if the y axis value is 10345 then the value should be shown as "10.34" as #.## format.
 
Is it possible ?

pricher · April 6, 2016

In the code snippet I sent you, you have access to this.value. From there, you should be able to format the data the way you want.
 
P.

RRK · April 6, 2016

Hi Pierre,
 
Sorry but i am not sure how will we format the "this.value" to specific format.
 
As we can achieve this in table/grid component : 
 
this.getStyle().numberFormat=#.##;
So in this case if the number is 10345 it will display the value as 10.34
 
Need to achieve this in chart y axis label

pricher · April 6, 2016

Hi,
 
Let me get back to you tomorrow on this one... I need to test a few things.
 
P.

pricher · April 7, 2016

Hi,
 
I have modified the code I have already sent you to take into account the formatting for 'Australia':
<pre class="_prettyXprint _lang-js">
beforeGeneration: function(options)
{
var param = this.getReportParameter("Country");
if (param == "France") {
options.yAxis[0].labels.formatter = function () { return this.value + '.00%';}
}
else if (param == "USA") {
options.yAxis[0].labels.formatter = function () { return '+' + this.value;}
}
else {
options.yAxis[0].labels.formatter = function () { return this.value.toString().substr(0,2) + ':' + this.value.toString().substr(2,2) ;}
}
},
</pre>
The basic idea here is that this.value will return the raw value of each yAxis label and you can re-format it the way you want with some simple JavaScript. As far as I know, there is no equivalent to number or date formatting like "#.##" in Highcharts. The Formatter method is your best option.
 
I have attached a sample report.
 
Hope this helps,
 
P.

RRK · April 7, 2016

Thanks Pierre...
 
It will be difficult to changes formats then on Y-axis.
 
Can we use BirtMath.round(this.value,2) functions in the script.
 
I tried this but its failing.

pricher · April 7, 2016

No, you cannot use a BIRT function in Highcharts scripting. The scripting added to an HTML5 chart interacts directly with the Highcharts API and is executed client-side (i.e. in the browser). If you need to round a value, you can use the Javascript Math.round function.
 
P.

RRK · April 14, 2016

Hi Pierre,
 
options.yAxis[0].labels.formatter = function () { return '+' + Formatter.format(this.value*100) ;}
 
How can we use this in chart ?
 
So suppose I get a number on Y axis as 4.4093 and the number get displayed only "4" on yaxis.

pricher · April 14, 2016

Sorry, I am not sure I understand your requirement. Is "4.4093" the data coming from your query and "4" what you want to display on the Y axis? Which in this case you can simply format using the chart wizard.
 
P.

RRK · April 14, 2016

Yes the value coming is 4.4093 and to display is only 4 so how can we use chart wizard?

pricher · April 14, 2016

In Format Chart --> Y Axis you can click on the Format button to bring up the Edit Format dialog, as shown here:

RRK · April 14, 2016

Hi Pierre, 
 
can this be set by a script as the formatting will depend on param condition...
So as we set the value in wizard can we do the same in script ?

pricher · April 14, 2016

Hi,
 
The only solution I can see to your requirement is what I have already sent you, i.e. scripting in the beforeGeneration method of the chart scripting and add a formatter to the label. The formatter is a function in which you can take the raw data (this.value for the axis label, this.y for the data point label) and manipulate it the way you want using JavaScript.
 
P.

RRK · April 14, 2016

Ok thanks Pierre..

RRK · April 15, 2016

Hi Pierre,
 
Can we compare the this.value and this.y value as below :
 
options.yAxis[0].labels.formatter = function () { return if(this.value>0){'+' +this.value.toString().substr(0,2)} else {this.value} ;}
 
This is giving me error actually I want to check if this.value is greater then 0 the I want to add + symbol infront of it else it should show as it is.

RRK · April 15, 2016

Hi Pierre,
 
Got the error, actually it has to be :
 
options.yAxis[0].labels.formatter = function () { 
if(this.value>0){return '+' +this.value.toString().substr(0,2)} else {return this.value} 
;}
 
thanks....

Number formatting of y axis labels in a chart according to the column value

Comments

Categories