CODEWITHSUNDEEP
stackeddimple.jsgrouped-bar-chart
OuzoPower
OuzoPower

Reputation: 278

Stack records per serie in a dimple vertical grouped bar chart

Having a dimple grouped bar chart, with sometimes two records per serie, I would like to stack the values for the same "Channel" like in a stacked grouped bar chart, whilst keeping the colors and legend like in the grouped bar chart (i.e. legend based on the "Channel").

Example

bar charts in dimple

The red bars on the right of each graph show the data for hypermarkets. Data are like:

{"Price Tier":"Regular","Channel":"Hypermarkets","Unit Sales":"5489","Status":"Actual"},
{"Price Tier":"Regular","Channel":"Hypermarkets","Unit Sales":"1651","Status":"Future"},

(a) standard. We get this kind of display with var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);

(b) overlaid. We get this kind of display with var x = myChart.addCategoryAxis("x", ["Price Tier", "Channel", "Status"]);

(c) stacked. This is what I want to achieve: stacking bars instead of overlaying them, whilst keeping the same color for the bars. Bars for the dimension Unit Sales 5489 and 1651 should when stacked reach the total height of 7140, like in standard chart.

(d) optimal is the ideal case for my needs: stacked bars with some additional transparency for future (expected) values.

How can I make my graph evolve from (b) overlaid bars to (c) stacked ones? Better edit dimple's source code, or should one use series.afterDraw?

Then, for the optimal display, should one use series.afterDraw to only to reach the last element and alter its transparency?

SOLUTION - I found a solution to my question, that allows graphs (c) and (d) by using a stacked grouped bar chart, and using a workaround. See my answer to my own question below. For developers, I think my question can still bring idea for code optimization in dimple.js for standard grouped bar charts, that would allow to implement the idea in a more elegant way, without the workaround found.

Upvotes: 0

Views: 13

Answers (1)

OuzoPower
OuzoPower

Reputation: 278

A solution to have dimple stacked bars with control over the columns color is possible with this trick:

  1. Make stacked grouped bar chart instead of a grouped bar chart. In the example, instead of myChart.addSeries("Channel", dimple.plot.bar); we set them according one of the values of the dimension to plot: myChart.addSeries("Status", dimple.plot.bar);

  2. Then, we set for the series to plot ("Status") instead of returning the value "Actual", we return column name (the value for "Channel") where the serie will be to be plotted.

Instead of

{"Price Tier":"Regular","Channel":"Hypermarkets","Unit Sales":"5489","Status":"Actual"},
{"Price Tier":"Regular","Channel":"Hypermarkets","Unit Sales":"1651","Status":"Future"},

we feed the graph with

{"Price Tier":"Regular","Channel":"Hypermarkets","Unit Sales":"5489","Status":"Hypermarkets"},
{"Price Tier":"Regular","Channel":"Hypermarkets","Unit Sales":"1651","Status":"Hypermarkets (forecast)"},

So, we bound the "Channel" and "Status" columns in kind of 1-to-1 relationship, and have one additional serie "Hypermarkets (forecast)" (that also appears in the legend), that we will then can style independantly.

Upvotes: 0

Related Questions