Layout HTML5 Bar Chart based on report parameter value

Hey, im trying to set the color of my HTML5 bar chart based on the value of a report parameter.I can change the color but i dont find a solution the get i changed based on the value of the parameter. This is the Script i use in the Client Script:<pre class="_prettyXprint _lang-js">beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex){var **** = ???var val1 = ****.getParameterValue("HTLPI");var val2 = ****.getParameterValue("LTLPI");if( point.y < val1 ) pointOptions.color = 'red';else if(point.y >= val1 && point.y < val2) pointOptions.color = 'yellow';else if(point.y >= val2) pointOptions.color = 'green';else pointOptions.color = 'blue';}</pre>The Part with the **** and ??? is the one i dont know how to handle!
Does anybody have an idea for a solution? kind regardsFreddy

Find more posts tagged with

Comments

kclark

I think in the HTML5 charts you still have access to icsc in beforeDrawDataPoint() so you'd do something like this<pre class="_prettyXprint _lang-">var val1 = icsc.getExternalContext().getScriptable().getPersistentGlobalVariable("HTLPI");</pre>

FreddyF

Hey thank you for your fast answer! I change the code into this:<pre class="_prettyXprint _lang-js">beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex){var htlpi = icsc.getExternalContext().getScriptable().getParameterValue("HTLPI");var ltlpi = icsc.getExternalContext().getScriptable().getParameterValue("LTLPI");if( point.y < ltlpi ){ pointOptions.color = 'red';}else if(point.y >= ltlpi && point.y < htlpi){ pointOptions.color = 'yellow';}else if(point.y >= htlpi){ pointOptions.color = 'green';}}</pre>But their is noch change in the Color of the Bars. I think its because of this:<blockquote class="ipsBlockquote"> function(point, pointOptions, chart, seriesIndex, pointIndex)</blockquote>Is there any other way to get the value of the report Parameter and it is possible to debug client scripting? kind regardsFreddy

kclark

Whenever I need to debug I usually run eclipse in console mode with eclipsec.exe. I also use Firebug. Between those two you should get most of the debugging information you'd need. Can you try this script?<pre class="_prettyXprint _lang-">function beforeDrawDataPoint(dph, fill, icsc){ var color = icsc.getExternalContext().getScriptable().getParameterValue("color"); if(color == "BLUE"){ fill.set(0,0,255); }}</pre>

FreddyF

<blockquote class="ipsBlockquote" data-author="kclark" data-cid="120163" data-time="1378914156"><div>Can you try this script?<pre class="_prettyXprint _lang-">function beforeDrawDataPoint(dph, fill, icsc){ var color = icsc.getExternalContext().getScriptable().getParameterValue("color"); if(color == "BLUE"){ fill.set(0,0,255); }}</pre></div></blockquote>In HTML5 charts you cant use the beforeDrawDataPoint(dph,fill,icsc) in the normal scripting function (the Support told me). Thats why i use the Client Script of the Chart. And this has only this parameters:<pre class="_prettyXprint _lang-">beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex)</pre>Thats whats in the BIRT Help is written:<img src='http://www7.pic-upload.de/thumb/12.09.13/6zxzjea1wqt.png' alt='Posted Image' class='bbc_img' /> kind RegardsFreddy

kclark

In a text box above the chart you'll need to do something like this<pre class="_prettyXprint _lang-"><div id="mydiv" title="<VALUE-OF>params["color"]</VALUE-OF>" /></pre>And then use a script like this in your chart<pre class="_prettyXprint _lang-">beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex){ param = document.getElementById("mydiv").title; if(param == "Red") { pointOptions.color = "Red" }},</pre>

FreddyF

Ok i understand the chart scripting but what do you mean in case of this? <blockquote class="ipsBlockquote"> [color=#000000;font-family:helvetica, arial, sans-serif;]In a text box above the chart you'll need to do something like this[/color]<pre class="_prettyXprint"><div id="mydiv" title="<VALUE-OF>params["color"]</VALUE-OF>" /></pre></blockquote>

kclark

You'll want to drag a text item in your report and make sure it's above your chart so it gets ran before you're chart. From the drop down at the top of the text item you'll need to switch it from auto to html. That script will place the value of your parameter into a div so you can call it later in your chart.

FreddyF

Ok realy nice! It works! A little awkward but!

gustavomonarin

Is the HTML5 chart part of the kleper release?

FreddyF

@gustavomonarin: I dont know i got it with birt designer PRO V3.7.2 @kclark: Is it possible that HTML5 can not be executed from the JavaScript API? And is it possible to set the color with "pointOptions.color" in rgb or something else? Or are there only the preset colors?

kclark

<blockquote class="ipsBlockquote" data-author="gustavomonarin" data-cid="120301" data-time="1379326971"><div>Is the HTML5 chart part of the kleper release?</div></blockquote> No, HTML5 charts are in BRD Pro