You have 3 problems in the fiddle causing your issues:
- You misspelled strokeWidth in the per series settings.
- To make the lines with nulls in between you need to add the
connectSeparatedPoints: true
parameter . - In the CSV column headings you need to remove the spaces after the commas so they do not become part of the series name:
"Date,Not kept,Hosts,Not kept trend,Hosts trend\n"+
So your full code should now look like this:
g = new Dygraph(
// containing div
document.getElementById("dr1"),
"Date,Not kept,Hosts,Not kept trend,Hosts trend\n"+
"2014-03-31, , , 73, 6\n"+
"2014-04-01, 50, 10, , \n"+
"2014-04-02, 63, 11, , \n"+
"2014-04-03, 120, 12, , \n"+
"2014-04-04, 55, 20, , \n"+
"2014-04-05, 60, 22, , \n"+
"2014-04-06, 63, 25, , \n"+
"2014-04-07, 52, 24, , \n"+
"2014-04-14, , , 46, 46\n",
// options
{
xRangePad: 10,
yRangePad: 10,
title: "Promises not kept",
// legend options
legend: "always",
labelsDiv: "dr1_labels",
labelsSeparateLines: "true",
connectSeparatedPoints: true,
drawPoints: "true",
colors: [ "orange", "blue", "black", "violet" ],
strokeWidth: 0,
series: {
'Hosts trend': {
strokeWidth: 1,
pointSize: 0
},
'Not kept trend': {
strokeWidth: 1,
pointSize: 0
}
}
}
);
Here is your updated FIDDLE