Number formatting of y axis labels in a chart according to the column value
<p>Hi,</p>
<p> </p>
<p>I am looking to format the label on y axis in chart dynamically in this case depending on country parameter value.</p>
<p> </p>
<p>So if the parameter comes as Austrialia the number format on y axis should get displayed as [5:00,4:00,3:00 etc]</p>
<p> </p>
<p>If the parameter values comes as France then the Y axis should display the number format as [75.00%,50.00%,25.00% etc]</p>
<p>And</p>
<p> </p>
<p>If the parameter values comes as USA then the Y axis should display the number format as [+30,+50,+25 etc]</p>
<p> </p>
<p>So how to format y axis labels depending on parameter value.</p>
<p> </p>
<p>Please find attached report design and screen shots.</p>
<p> </p>
<p>Many thanks in advance!!!</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
<p> </p>
<p>I am looking to format the label on y axis in chart dynamically in this case depending on country parameter value.</p>
<p> </p>
<p>So if the parameter comes as Austrialia the number format on y axis should get displayed as [5:00,4:00,3:00 etc]</p>
<p> </p>
<p>If the parameter values comes as France then the Y axis should display the number format as [75.00%,50.00%,25.00% etc]</p>
<p>And</p>
<p> </p>
<p>If the parameter values comes as USA then the Y axis should display the number format as [+30,+50,+25 etc]</p>
<p> </p>
<p>So how to format y axis labels depending on parameter value.</p>
<p> </p>
<p>Please find attached report design and screen shots.</p>
<p> </p>
<p>Many thanks in advance!!!</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>
0
Comments
-
<p>Hi,</p>
<p> </p>
<p>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:</p>
<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>
<p>You may have to play with the return value in each function to accommodate your data.</p>
<p> </p>
<p>Attached example.</p>
<p> </p>
<p>P.</p>
Warning No formatter is installed for the format ipb0 -
<p>Hi Pierre,</p>
<p> </p>
<p>Thanks this will help to add perfix suffix to the current value.</p>
<p> </p>
<p>But could you please let me know how we can change the number format of that label : </p>
<p>eg : if the y axis value is 10345 then the value should be shown as "10.34" as #.## format.</p>
<p> </p>
<p>Is it possible ?</p>
0 -
<p>Hi Pierre,</p>
<p> </p>
<p>Sorry but i am not sure how will we format the "this.value" to specific format.</p>
<p> </p>
<p>As we can achieve this in table/grid component : </p>
<p> </p>
<p>this.getStyle().numberFormat=#.##;</p>
<p>So in this case if the number is 10345 it will display the value as 10.34</p>
<p> </p>
<p>Need to achieve this in chart y axis label</p>
0 -
<p>Hi,</p>
<p> </p>
<p>I have modified the code I have already sent you to take into account the formatting for 'Australia':</p>
<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>
<p>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.</p>
<p> </p>
<p>I have attached a sample report.</p>
<p> </p>
<p>Hope this helps,</p>
<p> </p>
<p>P.</p>
Warning No formatter is installed for the format ipb0 -
<p>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>
<p> </p>
<p>P.</p>Warning No formatter is installed for the format ipb0 -
<p>Hi Pierre,</p>
<p> </p>
<p>options.yAxis[0].labels.formatter = function () { return '+' + Formatter.format(this.value*100) ;}</p>
<p> </p>
<p>How can we use this in chart ?</p>
<p> </p>
<p>So suppose I get a number on Y axis as 4.4093 and the number get displayed only "4" on yaxis.<br>
</p>
0 -
<p>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>
<p> </p>
<p>P.</p>
Warning No formatter is installed for the format ipb0 -
<p>Hi,</p>
<p> </p>
<p>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>
<p> </p>
<p>P.</p>
Warning No formatter is installed for the format ipb0 -
<p>Hi Pierre,</p>
<p> </p>
<p>Can we compare the this.value and this.y value as below :</p>
<p> </p>
<p>options.yAxis[0].labels.formatter = function () { return if(this.value>0){'+' +this.value.toString().substr(0,2)} else {this.value} ;}</p>
<p> </p>
<p>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.</p>
0
Categories
- All Categories
- 123 Developer Announcements
- 54 Articles
- 156 General Questions
- 149 Thrust Services
- 57 Developer Hackathon
- 37 Thrust Studio
- 20.6K Analytics
- 4.2K AppWorks
- 9K Extended ECM
- 918 Core Messaging
- 84 Digital Asset Management
- 9.4K Documentum
- 33 eDOCS
- 190 Exstream
- 39.8K TeamSite
- 1.7K Web Experience Management
- 10 XM Fax
- Follow Categories