Dimple.js multi series bar not stacked

Question

Here is sample code...

var svg = dimple.newSvg("#chartContainer", 600, 400),
chart = null,
s1 = null,
s2 = null,
x = null,
y1 = null,
y2 = null,
data = [
    { "ID" : "1", "Value 1" : 100000,  "Value 2" : 110000 },
    { "ID" : "2", "Value 1" : 90000,  "Value 2" : 145000 },
    { "ID" : "3", "Value 1" : 140000,  "Value 2" : 60000 }
];

chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", "ID");
y1 = chart.addMeasureAxis("y", "Value 1");
y2 = chart.addMeasureAxis("y", "Value 2");
s1 = chart.addSeries(null, dimple.plot.bar, [x, y1]);
s2 = chart.addSeries(null, dimple.plot.bar, [x, y2]);
chart.draw();

When I run, the series are stacked up and basically I need to show the series one beside other for easy comparison....

I am very new to this and appreciate any help...

Reg Vikram

Answer 1

That data format is not ideal for dimple. The current chart is not stacked, the bars are actually overlapping each other. To work simply in Dimple you need your data in the following format:

data = [
    { "ID" : "1", "Measure" : "Value 1", "Value" : 100000 },
    { "ID" : "2", "Measure" : "Value 1", "Value" : 90000 },
    { "ID" : "3", "Measure" : "Value 1", "Value" : 140000 }
    { "ID" : "1", "Measure" : "Value 2", "Value" : 110000 },
    { "ID" : "2", "Measure" : "Value 2", "Value" : 145000 },
    { "ID" : "3", "Measure" : "Value 2", "Value" : 60000 }
];

Then to do a properly stacked bar you can do the following:

chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "ID");
chart.addMeasureAxis("y", "Value");
chart.addSeries("Measure", dimple.plot.bar);
chart.draw();

To do this as a grouped bar you could do it like this:

chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", ["Measure", "ID"]);
chart.addMeasureAxis("y", "Value");
chart.addSeries("Measure", dimple.plot.bar);
chart.draw();

In your case you are actually drawing the measures on different y axes. I'm afraid that doing grouped bars on separate axes is tricky, however there is a slightly hacky way to do it shown here: http://jsbin.com/jawig/1/edit?js,output

Answer 2

The simplest way is to just use another function to "explode" the data returned from the server, assuming this is performant for you. Since the chart data are just raw Javascript objects, this is rather easy and painless.

For instance:

  var explodeData = function (oldData) {
    var newData = [];
    foreach(row in oldData) {
      newData.push({ID: row["ID"], MeasureType: "Value 1", Value: row["Value 1"]});
      newData.push({ID: row["ID"], MeasureType: "Value 2", Value: row["Value 2"]});
    }
    return newData;
  };

  d3.csv("/data", function (rawData) {
    var data = explodeData(rawData);
    var myChart = new dimple.chart(svg, data);
    ...
  });

Hope that helps! That's what I did, anyway