Question

Please help me with my first attempt at dygraphs. I have the following code that does not produce a graph. What have I done wrong?

http://jsfiddle.net/52Qv4/1/

  g = new Dygraph(

  // containing div
  document.getElementById("graphdiv"), [
      [1396411199, 50, 10],
      [1396497599, 63, 11],
      [1396583999, 120, 12],
      [1396670399, 55, 20],
      [1396756799, 60, 22],
      [1396843199, 63, 25],
      [1396929599, 52, 25]
  ],
  // options
  {
      xRangePad: 10,
      yRangePad: 10,
      xValueFormatter: Dygraph.dateString_,
      xValueParser: function (x) {
          return parseInt(x, 10);
      },
      xTicker: Dygraph.dateTicker,
      labels: ["Dates", "Not Kept", "Hosts"],
      title: "Promises not kept",
      legend: "always",
      drawPoints: "true",
      pointSize: 2,
      colors: ["orange", "blue", "black"],
      strokeWidth: 0
  });
Was it helpful?

Solution

See the Dygraphs docs: http://dygraphs.com/data.html. It states:

xValueParser affects CSV only

Updating your code to use CSV works:

  g = new Dygraph(

  // containing div
  document.getElementById("graphdiv"), 
             "Date,Series1,Series2\n" +
              "1247382000,50,20\n" +
              "1247986800,50,10\n",
  // options
  {
      xRangePad: 10,
      yRangePad: 10,
      xValueFormatter: Dygraph.dateString_,
      xValueParser: function (x) {
          return 1000 * parseInt(x, 10);
      },
      xTicker: Dygraph.dateTicker,
      labels: ["Dates", "Not Kept", "Hosts"],
      title: "Promises not kept",
      legend: "always",
      drawPoints: "true",
      pointSize: 2,
      colors: ["orange", "blue", "black"],
      strokeWidth: 1
  });

Here is your updated FIDDLE

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top