Multiple series in dimple.js with user selecting data for y1 and y2 axis

Question

I'm trying to create a chart that has x axis showing dates, and y1 and y2 axis showing measurements that the user selected on a checkbox form.

I'm programming in ClojureScript but I will try to translate the code below into JavaScript.

My data looks like this:

(def mock-data {"01"
                [{"device_id" "01" "device_name" "External temperature" "month" "01/01/2011" "reading" 0.8}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/02/2011" "reading" 0.9}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/03/2011" "reading" 0.8}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/04/2011" "reading" 0.75}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/05/2011" "reading" 0.65}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/06/2011" "reading" 0.50}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/07/2011" "reading" 0.55}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/08/2011" "reading" 0.6}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/09/2011" "reading" 0.66}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/10/2011" "reading" 0.68}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/11/2011" "reading" 0.71}
                 {"device_id" "01" "device_name" "External temperature" "month" "01/12/2011" "reading" 0.9}]
                "02"
                [{"device_id" "02" "device_name" "External humidity" "month" "01/01/2011" "reading" 6}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/02/2011" "reading" 10}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/03/2011" "reading" 12}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/04/2011" "reading" 15}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/05/2011" "reading" 18}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/06/2011" "reading" 20}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/07/2011" "reading" 25}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/08/2011" "reading" 31}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/09/2011" "reading" 20}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/10/2011" "reading" 17}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/11/2011" "reading" 12}
                 {"device_id" "02" "device_name" "External humidity" "month" "01/12/2011" "reading" 9}]})

I have a form with two columns. Left column allows to select devices to be shown on y1 axis, right column on y2 axis. Both columns contain exactly the same list of devices. Once a device is selected on left axis it cannot be again selected on the right axis. For testing purposes there are only two devices.

The filtering of data is done by ClojureScript, not by dimple.

var svg = dimple.newSvg("#chart", 500,500);
var measurements = fetchData(); // Filters data by devices selected on the form
var chart = new dimple.chart(svg, measurements);
var x = chart.addCategoryAxis("x","month");
var y1 = chart.addMeasureAxis("y", "reading");
var y2 =chart.addMeasureAxis("y", "reading");
chart.setBounds(60,30,350,350);
chart.addSeries("device_id", dimple.plot.line, [x, y1]));
chart.addSeries("device_id", dimple.plot.line, [x, y2]));
chart.addLegend(60, 10, 300, 20, "right");
chart.draw();

When the user selects device 01 and 02 on left axis, both lines are plotted correctly. When they select just one of the devices on left axis, it works ok too. But when they select anything on the right axis and nothing on the left, nothing gets plotted. When device 01 is selected on left, and 02 on right, only left axis has a line.

Is what I'm trying to achieve possible in dimple.js? Any help will be appreciated.

Answer 1

Ok, you can now do this with dimple v1.1.4.

In the latest release you are able to assign data to a series instead of the chart if you wish. Therefore you filter the dataset into 2 parts and assign one to each series.

Here's an example of using 2 data sets on different axes. Hopefully it will allow you to achieve what you want:

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

Here's a working fiddle: http://jsfiddle.net/NCW89/