Reputation: 11
I'm trying to create a simple chart with two axis and two data series.
When I define bubble series - all works as expected however when both series are defined as line, the dashed lines from the data points to the y axis get confused
Surprisingly, I can't Can't seem to find any examples which show 2* y axis with 2*line series.
My x axis is time based but I can illustrate the problem using a previous JSfiddle answer (jsfiddle.net/NCW89/):
var svg = dimple.newSvg("#chartContainer", 600, 400),
chart = null,
s1 = null,
s2 = null,
x = null,
y1 = null,
y2 = null;
chart = new dimple.chart(svg);
x = chart.addCategoryAxis("x", "Fruit");
y1 = chart.addMeasureAxis("y", "Value");
y2 = chart.addMeasureAxis("y", "Value");
s1 = chart.addSeries("Year", dimple.plot.bubble, [x, y1]);
s1.data = [
{ "Value" : 100000, "Fruit" : "Grapefruit", "Year" : 2012 },
{ "Value" : 400000, "Fruit" : "Apple", "Year" : 2012 },
{ "Value" : 120000, "Fruit" : "Banana", "Year" : 2012 }
];
s2 = chart.addSeries("Year", dimple.plot.bubble, [x, y2]);
s2.data = [
{ "Value" : 110000, "Fruit" : "Grapefruit", "Year" : 2013 },
{ "Value" : 300000, "Fruit" : "Apple", "Year" : 2013 },
{ "Value" : 140000, "Fruit" : "Banana", "Year" : 2013 }
];
chart.draw();
Changing the series from dimple.plot.bubble --> dimple.plot.line will demonstrate the behaviour.
Seems such a commonly required feature that I can't help feeling that I'm missing something obvious.
Thanks
Upvotes: 1
Views: 2051
Reputation: 4904
I'm afraid you aren't missing anything it's a bug introduced in a recent version. I'll fix it in version 1.2 coming out in the next week or two. Unfortunately the breaking version was also the one which added the ability to set series specific data. If you want to work around in the meantime you'll need to go back to version 1.1.3 and set your data the old fashioned way:
var svg = dimple.newSvg("#chartContainer", 600, 400),
chart = null,
s1 = null,
s2 = null,
x = null,
y1 = null,
y2 = null,
data = [
{ "Fruit" : "Grapefruit", "Value 1" : 100000, "Year 1" : 2012, "Value 2" : 110000, "Year 2" : 2013 },
{ "Fruit" : "Apple", "Value 1" : 400000, "Year 1" : 2012, "Value 2" : 300000, "Year 2" : 2013 },
{ "Fruit" : "Banana", "Value 1" : 120000, "Year 1" : 2012, "Value 2" : 140000, "Year 2" : 2013 }
];
chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", "Fruit");
y1 = chart.addMeasureAxis("y", "Value 1");
y2 = chart.addMeasureAxis("y", "Value 2");
s1 = chart.addSeries("Year 1", dimple.plot.line, [x, y1]);
s2 = chart.addSeries("Year 2", dimple.plot.line, [x, y2]);
chart.draw();
Upvotes: 1