Need help configuring chart

The data I have that I need to display consists of “sales amounts” for different “product groups” over “3 years” (2011, 2010, 2009).

What I want is to have a horizontal stacked bar chart, showing 3 stacked bars, 1 bar for each of the 3 years.
Each product group on the bar with a different color, like this:

  • 2011 -|aaaaaBBBBBccccDDDDDDeeeeFFFFFgggg
  • 2010 -|aaBBBBccccccccDDDeeeeFFFFggg
  • 2009 -|aaaaaaaaBBcccccDDDeeeFFFFgggg
          • |____________________________________________ 1.000.000,00

Here “aaaaaaa” means sales in product group 1, “BBBB” sales in product group 2 and so on.

Can anyone show me how I would define this behavior in the chart and how the data for the chart could be formated?

Nobody can give me a hand with this? :frowning:

Hello,

you may find the sample with horizontal stacked bars in the chart package:

dhtmlxChart/samples/06_bar_chart/08_horizonal_stacked_bars.html

That one looks very interesting, I will dig into that, thanks :slight_smile:

Ok, I have now created a site using the approach from the sample you described.
Everything seems to be working fine, except a few things that I cannot seem to pin point.
Some of the values just don’t appear in the chart and sometimes the chart has a max value lower than some of the values in the dataset, which it pretty odd.

Here is an example of the data i use for the chart.

var data = [{ "sales":"0.00","tooltip":"product group 1 0.00","color":"#ff9933", "sales1":"9520.00","tooltip1":"product group 2 9520.00","color1":"#ffff66", "sales2":"0.00","tooltip2":"product group 3 0.00","color2":"#66ffcc", "sales3":"0.00","tooltip3":"product group 4 0.00","color3":"#F76541", "sales4":"0.00","tooltip4":"product group 5 0.00","color4":"#82CAFF", "year":"2011" },{ "sales":"46018.36","tooltip":"product group 1 46018.36","color":"#ff9933", "sales1":"157472.00","tooltip1":"product group 2 157472.00","color1":"#ffff66", "sales2":"27310.00","tooltip2":"product group 3 27310.00","color2":"#66ffcc", "sales3":"0.00","tooltip3":"product group 4 0.00","color3":"#F76541", "sales4":"3800.00","tooltip4":"product group 5 3800.00","color4":"#82CAFF", "year":"2010" },{ "sales":"0.00","tooltip":"product group 1 0.00","color":"#ff9933", "sales1":"223252.50","tooltip1":"product group 2 223252.50","color1":"#ffff66", "sales2":"0.00","tooltip2":"product group 3n 0.00","color2":"#66ffcc", "sales3":"34800.00","tooltip3":"product group 4 34800.00","color3":"#F76541", "sales4":"0.00","tooltip4":"product group 5 0.00","color4":"#82CAFF", "year":"2009" }];
Here is chart defined:

barChart = new dhtmlXChart( { view: "stackedBarH", container: "chart", value: "#sales#", width: 36, gradient: "3d", color: "#color#", xAxis: { title: "Sales per year", lines: false }, yAxis: { title: "Year", template: "#year#" }, padding: { left: 75 }, tooltip: { template: "#tooltip#", dx: 10, dy: 5 } });
And here are the series added and the chart loaded:

[code]// salesAll is an array containing 3 arrays, each array holding 3 values per row which are
// salesN, colorN and tooltipN.

for (var i = 1; i < salesAll[0][1].length; i++)
{
barChart.addSeries({
value: “#sales” + i + “#”,
color: “#color”+ i +“#”,
tooltip: {
template: “#tooltip” + i + “#”,
dx: 10,
dy: 5
}
});
}

barChart.parse(data, “json”);[/code]
The orange, yellow and green colors shown are for the product groups 1, 2 and 3. But where are the sales for product group 4 in 2009?
It is just now shown in the chart at all and I cannot figure out why that is.

Any help would be much appreciated.


Please try to use the latest chart libraries. They are attached here:

viewtopic.php?f=8&t=17561

I downloaded the new libs and made sure all temporary internet files were deleted. The chart stays the same. The bar for 2009 still only shows all yellow and nothing else.

This issue still isn’t resolved and I’m starting to think that there is a bug in the product.

I have tried to add some extra value to each amount to make sure none of them are 0.00 just to check if they would fix the problem but it doesn’t.

It seems like the bar which “should” be the longest doesn’t show it’s last value. If you look at the year 2009 in the data it will add up to 258,052.50 making it the longest bar, but the last value (read not 0.00 value) of 34,800.00 is not added - if it was the scale would not end at 250,000.00 since the amount is larger than that.

It would be really great if someone could take a look at this issue or at least state that it will not be fixed in any near future so I don’t waste any more time trying to make this one work.

Of cause it can also be me doing something wrong but as nobody has pointed that out yet I assume that isn’t the case.

Ok I made an error in my description but for some reason I cannot edit my own posts anymore, so here it is again without the error.

This issue still isn’t resolved and I’m starting to think that there is a bug in the product.

I have tried to add some extra value to each amount to make sure none of them are 0.00 just to check if they would fix the problem but it doesn’t.

It seems like the bar which “should” be the longest doesn’t show it’s last value (read last not 0.00 value). If you look at the year 2009 in the data it will add up to 258,052.50 making it the longest bar, but the last value of 34,800.00 is not added - if it was the scale would not end at 250,000.00 since the amount is larger than that.

It would be really great if someone could take a look at this issue or at least state that it will not be fixed in any near future so I don’t waste any more time trying to make this one work.

Of cause it can also be me doing something wrong but as nobody has pointed that out yet I assume that isn’t the case.

Please see attached demo (libraries from viewtopic.php?f=8&t=17561)
chart.zip (32.4 KB)

Thanks! the sample along with my own description made me see the error. for (var i = 1; i < salesAll[0][1].length; i++)
Should have been for (var i = 1; i < salesAll[0].length; i++)
Seems to work now :slight_smile: