CODEWITHSUNDEEP
dimple.js
user3506975
user3506975

Reputation: 11

dimple.js multi-series **line** charts

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

Answers (1)

John Kiernander
John Kiernander

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();

http://jsfiddle.net/NVV9r/1/

Upvotes: 1

Related Questions