HTML5 chart scripting functions

I've noticed some chart scripting event functions (beforeDrawSeriesTitle & beforeDrawLegendItem that I've tried) don't appear to work when chart output is set to HTML5, but work fine when output is set to svg or png.
 
Is this a bug?

Find more posts tagged with

Comments

JFreeman

I believe the chart event functions for HTML5 are different that those with an SVG chart. In particular, I do not believe that HTML5 charts have the beforeDrawSeriesTitle or beforeDrawLegendItem functions available.
 
What is it you are trying to set within those functions? There is most likely just a different place it needs to go in an HTML5 chart.

Cheesus Crust

I'm attempting to set series names and/or legend labels through script based on a persistent global variable in HTML5 charts. I have it working fine with png and svg output (thanks to a great example found at <a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/files/file/649-chart-script-example-of-modifying-series-entries-in-the-legend/).'>http://developer.actuate.com/community/forum/index.php?/files/file/649-chart-script-example-of-modifying-series-entries-in-the-legend/).</a>

JFreeman

For the series names, this can be set in the beforeGeneration in the Client Script section of the HTML5 chart builder:
<pre class="_prettyXprint _lang-js">
beforeGeneration: function(options)
{
for(var x=0; x<options.series.length; x++){
options.series[x].name = ("series_name_" + x);
}
},
</pre>
As for the legend labels, what specifically are you wanting to change/set?

Cheesus Crust

Nothing that changing the series names wouldn't also accomplish. This is specifically for a multi-year HTML5 line chart where I need to assign the year from a persistent variable then script the legend entries for each series accordingly, e.g. 2010, 2011, 2012, etc.

JFreeman

Alright, let me know if you have any additional questions about setting the series name.

Cheesus Crust

Thanks for your help, one more question; What's the syntax for passing persistent global variables into the client script of a chart? Id normally use reportContext.getPersistentGlobalVariable("varName") or icsc.getExternalContext().getScriptable().getPersistentGlobalVariable("varName"), but neither seem to work there?

JFreeman

That is a little bit tricky as the reportContext is only available server side and to my knowledge cannot be accessed client side. Taking a closer look you may need to actually use beforeRendering in the charts client scripts instead of beforeGeneration to use the below method. The same code for setting the series name will work.
 
In order to bring the persistent global variable across is a little bit interesting. The way i've accomplished this is by passing it into a report variable and then passing that report variable to a client side javascript global variable in the load of the chart area interactivity.
 
For Example:
 
I made a report variable called PassToClient.
 
Then somewhere within the report where you have access to both reportContext and the report variable (I used the Category X Series scripting where you set the value to use for the x-axis) pass the persistent global variable into the report variable:
<pre class="_prettyXprint _lang-js">
vars["PassToClient"] = reportContext.getPersistentGlobalVariable("serverGlobalVar");
</pre>
Then in the Load event of the Chart Area Interactivity in the Format Chart tab, create a client side javascript global variable and pass it the report variable:
<pre class="_prettyXprint _lang-js">
window.clientVar = vars["PassToClient"];
</pre>
Then in the beforeRendering of the Client Script on the chart you can access the window.clientVar to obtain your global variable:
<pre class="_prettyXprint _lang-js">
beforeRendering: function(options, chart)
{
for(var x=0; x<options.series.length; x++){
options.series[x].name = (window.clientVar + x);
}
},
</pre>
Let me know if this isn't clear, it's a little bit tricky to explain. I could also put together a quick sample if necessary.

jyothsna.tummala

Hi JFreeman,
 
I was also facing the same problem .Can you please provide the Sample for the above explanation.
 
Thank you.

JFreeman

Attached is the sample report.
I've used this one for a few other things as well but it still contains the code for the process described above.