Discussions
Categories
Groups
Community Home
Categories
INTERNAL ENABLEMENT
POPULAR
PUBLIC CLOUD
PRIVATE CLOUD
Quick Links
MY LINKS
HELPFUL TIPS
Back to website
Home
Intelligence (Analytics)
Bar Chart Series Label from another series
jstheriault
<p>is there a way to set a bar chart's series labels using values from another series?</p>
<p> </p>
<p>The actual problem is this. I have a side-by-side bar chart with 2 series. For series 2, I want to display the label as the percentage of its value with respect to the value of the first series.</p>
<p> </p>
<p>So if I have 2 bars with values:</p>
<p>Series 1: 300</p>
<p>Series 2: 150</p>
<p> </p>
<p>I want the label on bar 2 to show 50%</p>
<p> </p>
<p>This would be using and HTML5 chart, preferably.</p>
<p> </p>
<p> </p>
Find more posts tagged with
Comments
jstheriault
<p>an answer to my own question:</p>
<p> </p>
<p>Use client-side scripting:</p>
<p> </p>
<p>beforeGeneration: function(options)</p>
<div>{</div>
<div> options.series[1].dataLabels.formatter = function( ) {</div>
<div> var col1 = options.series[0].data[this.point.x].y;</div>
<div> return (100* this.point.y / col1).toFixed(1) + "%";</div>
<div> };</div>
<div>},</div>
Clement Wong
<p>There are a few ways of doing this.</p>
<p> </p>
<p>One way, which happens to be related to this recent post @ <a data-ipb='nomediaparse' href='
http://developer.actuate.com/community/forum/index.php?/topic/39085-html5-charts-dynamic-y-series'>http://developer.actuate.com/community/forum/index.php?/topic/39085-html5-charts-dynamic-y-series</a>
, is to create an additional series. </p>
<p> </p>
<p>We'll need to hide the new axis, marker lines, legend entry, move the labels up to a fixed position.</p>
<p> </p>
<p>Attached is a sample design (iHub 3.1). It was based on my other example in the other thread.</p>
<p> </p>
<p>Example output:</p>
<p>
jstheriault
<p>Excellent, thanks Clement! I'll put that in my toolkit...</p>
Clement Wong
<p>As mentioned in the other thread, commercial BIRT's HTML5 charts are based on Highcharts and Highstock. Their well documented APIs is very descriptive and has loads of examples.</p>
<p> </p>
<p><a class="bbc_url" href="
http://api.highcharts.com/highcharts"
; title="External link">
http://api.highcharts.com/highcharts</a></p>
;
<p><a class="bbc_url" href="
http://api.highcharts.com/highstock"
; title="External link">
http://api.highcharts.com/highstock</a></p>
;
<p> </p>
<p>You can add that to your toolkit too.</p>