Bar chart- Bar sections should be displayed in same bar without aggregate

bcmp

<div>In the bar chart, the bar sections should be displayed in same bar without aggregate.</div>
<div> </div>
<div> </div>
<div>For the below values, the category x should display bar till 30 for a, from 31 to 62 for b and again from 63 to 80 for a again</div>
<div> </div>
<div>x | a | 30</div>
<div>x | b | 62</div>
<div>x | a | 80</div>
<div> </div>
<div> </div>
<div>How to achieve this. Any samples would be great.</div>

Clement Wong

<p>If you are using commercial BIRT, here is a solution.  The assumption here is that your data set is sorted by the first column (let's call it "Major Category") and then by the third column (let's call it "Value").</p>
<p> </p>
<p>First in the data set, we are going to calculate the segment size in a Computed Column.  In your example, there is a fourth column (let's call it "Total in Segment") via the newly created computed column.</p>
<pre class="_prettyXprint _lang-">
x | a | 30 | 30
x | b | 62 | 32
x | a | 80 | 18
</pre>
<p>In the <em>beforeOpen </em>event of the Data Set, we initialize two variables:</p>
<pre class="_prettyXprint">
previousValue = 0;
previousCategory = '';</pre>
<p>We define Computed Column expression as follows:</p>
<pre class="_prettyXprint _lang-">
if (previousCategory == row["Main Category"]) {
totalInSegment = row["Value"] - previousValue;
previousValue = row["Value"];
totalInSegment;
}
else {
previousValue = 0;
previousCategory = row["Main Category"];
previousValue = row["Value"];
row["Value"];
}
</pre>
<p>Now, in the HTML5 chart, in the Select Data tab, we define the following:</p>
<pre class="_prettyXprint">
Value (Y) Series:               row["Total in Segment"]
Category (X) Series:         row["Main Category"]
Optional Y Series Grouping:   row["Sub Category"] + '|' + row["Value"];
</pre>
<p>In the Optional Y Series Grouping, we are taking the concatenation of the Sub Category (the second column of the data) with the Value.  We are saving the Sub Category and adding unique value so that we can color the segments later via scripting.</p>
<p> </p>
<p>Click on the Grouping and Sorting option of the Optional Y Series Grouping, and here we will sort <strong>Ascending </strong>on <strong>row["Value"]</strong>.</p>
<p> </p>
<p>Finally, we will add in the Script, code that will change the colors of the bar segment based on the second color of the data (we called in "Sub Category" in the example).  We use a JavaScript string split to get the Sub Category.  Otherwise, we will have a rainbow of colors for the individual segments.</p>
<pre class="_prettyXprint _lang-">
beforeDrawDataPoint: function(point, pointOptions, chart, seriesIndex, pointIndex)
{
pointOptions.color = window.myAccess[ point.series.name.split("|")[0] ];
},


beforeGeneration: function(options)
{
window.myAccess = [];
options.colors = ['#345066','#A3B09F','#C6CDAE','#44664E','#655E2A','#345066','#A3B09F','#C6CDAE'];
colorCounter = 0;

for (i=0; i<options.series.length; i++) {

subCat = options.series[i].name.split("|")[0];
if (window.myAccess[subCat] == null) {
window.myAccess[subCat] = options.colors[colorCounter];
colorCounter++;
}

}
},
</pre>
<p>The attached example was tested in iHub versions 3.1 and 16.2.</p>