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)
To make Bar width constant in Chart
jain
Hi is it possible to keep the bar width constant? I have mapped the xaxis and yaxis of the bar chart to the dataset column.In my application,i dont know the number of items that will be shown in the bar chart ,after i run the chart.Number of items to be shown in the bar chart are random ,coming from my database.So if the item is 1,then the width of bar in the bar chart increases ,if the items are 10,then the width of bar in the bar chart decreases. I want to keep the bar width constant. So how can I do it?
Find more posts tagged with
Comments
kclark
You can set the width of the bars in the chart from script. <a class='bbc_url' href='
http://www.birt-exchange.org/org/forum/index.php/topic/10428-change-width-of-bars-in-chart/page__s__85e70f48cff7d90d4f7e07abbe40ea7f'>Take
a look at this post</a> You'd use something like<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>function beforeGeneration( chart, context )
{
chart.setUnitSpacing(20);
}
var oldSpacing;
function beforeDrawSeries( series, seriesRenderer, context )
{
oldSpacing = context.getChartInstance().getUnitSpacing();
if( series.getSeriesIdentifier() == "series one" ){
context.getChartInstance().setUnitSpacing(70);
}
}
function afterDrawSeries( series, seriesRenderer, context )
{
context.getChartInstance().setUnitSpacing(oldSpacing);
}</pre>
actuser9
Hi kclark,
How can the below code be applied to a HTML5 chart? I belive that has to be done via client script.
Thanks
UY
actuser9
Hi All,
Any suggestions?
Thanks
UY
Clement Wong
<blockquote class='ipsBlockquote' data-author="'actuser9'" data-cid="113327" data-time="1358372985" data-date="16 January 2013 - 02:49 PM"><p>
Hi kclark,<br />
<br />
How can the below code be applied to a HTML5 chart? I belive that has to be done via client script. <br />
<br />
Thanks<br />
UY<br /></p></blockquote>
<br />
Hi UY,<br />
<br />
Since you are using HTML5 charts, you can change the option in the <strong class='bbc'>beforeGeneration </strong>function. This function was added into Actuate 11 SP4, and is called before Actuate BIRT does any additional internal processing on the chart. You can find this under the Chart dialog's 4th tab <em class='bbc'>Script > Client Script</em>.<br />
<br />
In this sample code below, the bar width is changed to 100 pixels:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>beforeGeneration: function(options)
{
//You can change options here.
options.plotOptions = {
series: {
pointWidth: 100
}
};
},</pre>
actuser9
Hi Clement,
Thanks for replying, I tried to apply the code on the HTML5 chart. The bars are overlapping. As in the attached sample report, I am tring to set the consistent bar width for series 1 & series 2 across various groups(Classic Cars,Motorcycles etc) and take out the gap between series 1 and series 2 as in the 2D Bar Chart.
Clement Wong
You can control the spacing with the <em class='bbc'>pointPadding </em>and <em class='bbc'>groupPadding </em>options.<br />
<ul class='bbc'><li>groupPadding - Padding between each value groups, in x axis units. Defaults to 0.2.</li><li>pointPadding - Padding between each column or bar, in x axis units. Defaults to 0.1.</li></ul>
For example:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>beforeGeneration: function(options)
{
//You can change options here.
options.plotOptions = {
series: {
pointWidth: 45,
pointPadding: 0.25,
groupPadding: 0
}
};
},</pre>
actuser9
Hi Clement,
Thank you for providing this information. Where can we find a document that has the HTML5 scripting concepts?
Regards
UY
Clement Wong
<blockquote class='ipsBlockquote' data-author="'actuser9'" data-cid="113777" data-time="1359651392" data-date="31 January 2013 - 09:56 AM"><p>
Hi Clement,<br />
<br />
Thank you for providing this information. Where can we find a document that has the HTML5 scripting concepts?<br />
<br />
Regards<br />
UY<br /></p></blockquote>
Actuate BIRT Designer uses Highcharts, a third-party charting library, to render HTML5 charts.<br />
<br />
For a complete reference of the options and their descriptions, see the Highcharts documentation
@<
;br />
<a class='bbc_url' href='
http://api.highcharts.com/highcharts'>http://api.highcharts.com/highcharts</a><br
/>
<br />
In your case, for bar charts, please navigate to the plotOptions:Bar section
@<
;br />
<a class='bbc_url' href='
http://api.highcharts.com/highcharts#plotOptions.bar'>http://api.highcharts.com/highcharts#plotOptions.bar</a>
;
actuser9
Hi Clement,
Thank you for providing these references. That was exactly what I was looking for.
Regards,
UY