Dimple.js line chart with composite axis, no links between points on series

Question

I've been playing with the newly released version 2.0.0 and I'm trying to replicate the composite axis example with some simple opinion poll data - 3 series (Yes,No,Unsure) against a single Y-axis.

I'm clearly making a basic error somewhere... the basic principle is you define one y-axis then pass that as a reference each time you want to layer on another set of data, but it doesn't appear to be treating them as three distinct series (there are no lines between points except in cases linking a couple of identical, but non-adjacent values, e.g. "No" 30% in 2002 and 2004, despite there being a different value in between).

Also, as per the commented-out line, I'm getting a D3 error if I try and switch the x-axis to Time instead.

JSFiddle live example

pollData = [
    { Year : 2001, Yes: 50, No: 40, Unsure: 10 },
    { Year : 2002, Yes: 60, No: 30, Unsure: 10 },
    { Year : 2003, Yes: 65, No: 25, Unsure: 5 },
    { Year : 2004, Yes: 75, No: 30, Unsure: 4 },
    { Year : 2005, Yes: 80, No: 10, Unsure: 5 }
];

var svg = dimple.newSvg("#chartContainer", 590, 400);

var myChart = new dimple.chart(svg, pollData);

myChart.setBounds(75, 30, 490, 330)

// Why won't a time axis working...? ("undefined is not a function" in D3)
// var dateAxis = myChart.addTimeAxis("x", "Year", "%Y");

var dateAxis = myChart.addCategoryAxis("x", "Year");
dateAxis.addOrderRule("Year");

var yesAxis         = myChart.addMeasureAxis("y", "Yes");
var noAxis          = myChart.addMeasureAxis(yesAxis, "No");
var unsureAxis      = myChart.addMeasureAxis(yesAxis, "Unsure");

myChart.addSeries("Yes", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure", dimple.plot.line, [dateAxis, unsureAxis]);

yesAxis.title = '%';

myChart.draw();

Answer 1

The issue here isn't the composite axes, which you are using correctly. It's the series definition. The first parameter of the addSeries either takes dimensions to disaggregate by or a field which is not in the data, which it uses as a label. The only limitation of this approach is that you cannot label your series by a dimension name in the data. In this case the first series for example (it applies to all), is disaggregated by "Yes" which for the line series means it tries to draw a line for each value of "Yes", meaning 1 line per row, hence all the single unconnected points. The fix is to just name your lines something different. For example:

myChart.addSeries("Y", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("N", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("U", dimple.plot.line, [dateAxis, unsureAxis]);

Here's your updated fiddle: http://jsfiddle.net/RawyW/2/

If you want the names to look like they match you can just add a trailing space to the series names:

myChart.addSeries("Yes ", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No ", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure ", dimple.plot.line, [dateAxis, unsureAxis]);

This will also work