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)
script chart value series data using jsapi / html buttons
Cheesus Crust
<p>I have a line chart which might show sales $ over time or inventory $ over time (or perhaps eventually other metrics). The query to fill the dataset pulls both inventory and sales columns at once with a corresponding date for the x-axis. The y-series will either be the sales $ or inventory $ value.</p>
<p> </p>
<p>I've seen several examples of applying filters to charts using the JSAPI from an html button after the chart has been generated in the web viewer, then reloading the chart via the JSAPI submit function . I'd like to mirror that functionality to instead simply change the data row column of the y-series using JSAPI, then reload the chart. I know something similar can be accomplished via parameters and jscript in the chart series, but my requirement is that all data be queried once and the chart be regenerated after a button click such that it appears to the user that the chart series is swapping from sales to inventory or back seamlessly.</p>
<p> </p>
<p>See attached html button filter example. So here, instead of applying filters to the classic models data, I'd need two html buttons to substitute row["ORDERQTY"] for row["ORDERCOUNT"] in Series 1 and then back, while redrawing the chart in the window.</p>
<p> </p>
<p>Is this possible? I'm struggling to find code examples. BDPro 4.4, iHub 3.1</p>
Find more posts tagged with
Comments
Clement Wong
<p>With HTML5 Charts, you have ability to draw multiple Y series and hide/show them. For example, like in this JSFiddle (<a data-ipb='nomediaparse' href='
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-hide/'>http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-hide/</a>).</p>
;
<p> </p>
<p>Attached is a sample based on your sample data. The design contains one BIRT HTML5 Chart with two Y axes. The only script modifications changed from a default BIRT HTML5 Chart was to add the following to the afterRendering event and adding two HTML buttons to show and hide the different series.</p>
<p> </p>
<p>afterRendering code:</p>
<pre class="_prettyXprint">
afterRendering: function(chart)
{
chart.getCore().series[1].hide();
},</pre>
<p>The button's click uses jQuery to locate the HighCharts and then calls the show() and hide() on the two series.</p>
<p> </p>
<p> </p>
<p> </p>
Cheesus Crust
<p>Thanks Clement, this worked really well for my needs.</p>