dyrgraphs series options not working

Question

I'm trying to set graph options per series, but I'm having no luck. In the example, I expect to see series 'Not kept' and 'Hosts' as points, and series 'Not kept trend' and 'Hosts trend' as lines. Actual results are points only. What have I done wrong?

http://jsfiddle.net/Bc58h/

   drawPoints: "true",
   colors: [ "orange", "blue", "black", "violet" ],
   strokeWidth: 0,
   series: {
      'Hosts trend': {
         strokeWitdh: 1,
         pointSize: 0
      },
      'Not kept trend': {
         strokeWitdh: 1,
         pointSize: 0
      }
   }

Answer 1

You have 3 problems in the fiddle causing your issues:

1. You misspelled strokeWidth in the per series settings.
2. To make the lines with nulls in between you need to add the connectSeparatedPoints: true parameter .
3. 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