nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

html5 charts dynamic y series

PrinceBabel

Hello Team,
 
I have 2 Y- bar series in html5 chart.
I need to create dynamic Y series(Y-series 3) which will be percentage of other 2 y-series value (y-series1 and yseries2).
 
something like that:-
 
y-series3 value = (y-series1 value / y-series2 value)*100
 
I tried to get value of Y series in client scripts (beforeDrawSeries function) but not able to get hold of it.
 
my question is:-
1. how to create dynamic series in html5 charts
2. how to get hold of 2 y-series values in beforeDrawSeries function
3. how to set that series as line series in chart.
 
Thank you so much in advance.

Find more posts tagged with

Comments

jfranken

Hello,
 
How about creating a computed column in your data set to generate the percentage. Then add that column as a series. You'll probably want to create a second y-axis unless the range of values in the other two series is 0 to 100. 
 
You can create the new series in code as well. You can reference the series data as options.series[].data[] where series[] is an array containing the different series (0 to x), each series having an array of data point values. That's more difficult than using a computed field.
 
Regards,
Jeff

PrinceBabel

Hello Jeff. Thanks for reply!
 
Computed column I can do anytime. But here requirement is something different. I will explain you the scenario.
 
Y1 - series --- Sum(column1) with group as x-series (say team id)
Y2 - series ---Sum (column2) with group as x-series (team id)
 
now I need to create Y3 - series dynamically which should be [Sum(column1) as Y1-series] divided by [sum(column2) as Y2 series] with again group as X - series (which is again our team id).
 
I hope it will be more clear now.Y1 series and Y2 series are not simple column values they are summation values of some columns.
 
options.series[].data[] works properly in beforeRender function. But since I have to get 2 Y series values and do some computations and create new series I have to do all this in beforeDrawSeries function.
 
In beforeDrawSeries function options.series[].data[] wont work.

Clement Wong

It should be possible to do this in HTML5 script. To confirm what you want to accomplish, can you please provide us with sample data and a mock-up of the output?

PrinceBabel

<div>Hi Wong,</div>
<div> </div>
<div>PFA data object and design file.</div>
<div>In chart we have 2 series 1. Actuals(sum of Jan , feb , march) & 2. Goals (sum of Jan , Feb, March)</div>
<div>now I need to create new series (% of goals) which should be Y1series/Y2series.</div>
<div>I have tried few scripts in client script section.</div>
<div> </div>
<div>Thanks in advance.</div>

Clement Wong

It's Clement, BTW.
 
A general chart presentation suggestion: When displaying actuals vs. goals, it best not use two different axis for each. You will skew the data when an end user glances at the chart because it won't be 1:1. Actuals might have taller bars for smaller amounts, and if for some reason the Goal bars were smaller, then you would think that Actuals were greater than Goals. The perspective is off.
 
In the afterRendering event, you can walk through the data and add a new series.
<pre class="_prettyXprint">
var myData = [];
var totalDataPoints = chart.getCore().xAxis[0].categories.length;

for (var i=0; i<totalDataPoints; i++) {
 var ddd = {};
 ddd.y = (chart.getCore().series[0].data[i].y / chart.getCore().series[1].data[i].y) * 100;
 myData.push (ddd);
}</pre>
<pre class="_prettyXprint">
chart.getCore().addAxis({
 id: 'percent-axis',
 lineWidth: 1,
 title: null,
 min: 0,
 max: 100,
 gridLineColor: 'transparent',
 gridLineWidth: 0,
 minorGridLineWidth: 0,
 minorTickLength: 0,
 tickLength: 0,
 opposite: true
 } );

chart.getCore().addSeries({
 type: 'line',
 name: 'Percentage of Goal',
 data: myData,
 pointPadding: 0.1,
 groupPadding: 0.1,
 yAxis: 1,
 index: 30,
 zIndex: 30,
 color: '#DDDDDD'
 } );
</pre>
The attached design (iHub 3.1) contains 3 suggested views.
1. Actuals vs. Goals in one axis, with Actuals on top of the Goals.
2. Actuals vs. Goals in one axis, with Actuals on top of the Goals, with a slightly larger Goal width.
3. Actuals vs. Goals in one axis, side by side.
 
 
Please note there is a related topic with a slightly modified design @ <a data-ipb='nomediaparse' href='http://developer.actuate.com/community/forum/index.php?/topic/39112-bar-chart-series-label-from-another-series'>http://developer.actuate.com/community/forum/index.php?/topic/39112-bar-chart-series-label-from-another-series</a>

PrinceBabel

woh! woh! woh! superb. Working like charm!
Thank you so much Clement!
 
<ul><li>Can you please let me know any document where we can learn and understand all those attributes/syntax which you have used in afterRendering function?</li>
</ul> 
<ul><li>for "percentage of goals" series I need to add Marker and remove line width (remove connection) so that it will show only dots on actuals and goals.</li>
</ul>I tries this option but its not working:-
 
beforeDraSeries: function(series,seriesOptions,chart,seriesIndex)
{
if (series.name == "Percentage of Goal")
{
seriesOptions.lineWidth = 0;
seriesOptions.marker.enabled=true;
seriesOptions.marker.radius = 10;
}
}
 
<ul><li>I have added crosstab below that chart. Is there any way where we can filter crosstab if user click on any of x or y series.</li>
<li>like 1013A ---Team1</li>
<li>1013B ---Team2</li>
<li>1013C ---Team3</li>
<li>1013D--Team4</li>
</ul>and any option when user click on that then he will be able to see all data in crosstab (like initial view)
 
 
I have tried few option on Y1-series script (view1) but not able to handle it properly.
 
I have attached latest design file and data object for reference.
 
Thank you so much in advance!

Clement Wong

1. Commercial BIRT's HTML5 charts are based on Highcharts and Highstock. Their well documented APIs is very descriptive and has loads of examples.
 
<a data-ipb='nomediaparse' href='http://api.highcharts.com/highcharts'>http://api.highcharts.com/highcharts</a>
<a data-ipb='nomediaparse' href='http://api.highcharts.com/highstock'>http://api.highcharts.com/highstock</a>
 
 
2. To remove the line, you can change the char type from "line" to "scatter" in the addSeries method.
 
 
3. You can filter a table with an interactive chart. I will double check that if it's it possible with a crosstab.

PrinceBabel

Thanks Clement for your help..
 
I will look into documents for better understandings.
 
Please let me know if you can see cross tab filter option from chart interactivity.
 
Thanks!