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

RRK · 2016-04-06T12:17:11+00:00

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…

RRK

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!!!

Find more posts tagged with

Comments

shamo

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

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

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

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

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

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

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

pricher

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

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

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

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

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

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

pricher

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

RRK

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

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

Ok thanks Pierre..

RRK

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

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....