Search code examples
dygraphs

Dygraph using unix times displays nothing


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

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