Search code examples
javascriptgraphing

dygraph not showing points, no errors

I am trying to display a graph using Dygraph but am having a lot of difficulty. The graph frame displays but none of the points are displayed. No error messages appear. Please see my very simple graph below. 

<html>
<head>
<script type="text/javascript" src="dygraph-combined.js"></script>
</head>
<body>
<br>
<div id="graphdiv" style="width:960px; height:320px;"></div>
<div>
    <form>
        <h1>Should I Buy It?</h1>
        Amount: $<input type="text" name="amount"><br>
        Date: <input type="date" name="dateinput" id="dateinput">
        <input type="submit" name="submit" value="Should I Buy It?">
    </form>
</div>


<script type="text/javascript">
 function nameAnnotation(ann) {
        return "(" + ann.series + ", " + ann.x + ")";
      };

      var data = [];
      data.push([ "Date", "Series1", "Error" ]);
        data.push(["2007/01/01",10000,1]);
        data.push(["2007/01/02",9463.777815,16]);
        data.push(["2007/01/03",8748.659709,31]);
        data.push(["2007/01/04",7779.545394,46]);
        data.push(["2007/01/05",6846.280611,61]);
        data.push(["2007/01/06",6042.265704,76]);
        data.push(["2007/01/07",5052.064845,91]);
        data.push(["2007/01/08",4089.830899,106]);
        data.push(["2007/01/09",3195.631158,121]);
        data.push(["2007/01/10",2541.901849,136]);
        data.push(["2007/01/11",1805.774559,151]);
        data.push(["2007/01/12",1167.31813,166]);
        data.push(["2007/01/13",433.566787,181]);
        data.push(["2007/01/14",-475.4670651,196]);
        data.push(["2007/01/15",-1171.779711,211]);
        data.push(["2007/01/16",5000,226]);
        data.push(["2007/01/17",4091.462451,241]);
        data.push(["2007/01/18",3386.055666,256]);
        data.push(["2007/01/19",2728.37301,271]);
        data.push(["2007/01/20",2167.424525,286]);
        data.push(["2007/01/21",1483.230149,301]);
        data.push(["2007/01/22",917.4477079,316]);
        data.push(["2007/01/23",179.2235937,331]);
        data.push(["2007-01-24",-625.1312787,346]);
        data.push(["2007/01/25",-1209.343528,361]);
        data.push(["2007/01/26",-1832.497902,376]);
        data.push(["2007/01/27",-2426.93031,391]);
        data.push(["2007/01/28",-2940.290957,406]);
        data.push(["2007/01/29",-3745.675041,421]);
        data.push(["2007/01/30",-4412.335834,436]);
        data.push(["2007/01/31",-5303.819068,451]);
    g = new Dygraph(
    document.getElementById("graphdiv"),
    data
    ,
        {

            labels: [ "Date", "Series1", "Error" ],
            errorBars: true,
            axisLineColor: "red",
            sigma: 2.0

        }   
  );

</script>
<div id="list"></div>
</body>
</html>
Solution

  • I believe the reason is because you have set up your data wrong.

    By reading the documentation here: http://dygraphs.com/data.html#array

    The proper setup you need for your data is as follows:

    • Remove data.push([ "Date", "Series1", "Error" ]); This information will go in the third parameter of your new Dygraph the way you have it now.
    • Change your date formatting from "2007/01/01" to new Date("2007/01/01")

    Working fiddle - http://jsfiddle.net/eM2Mg/7134/

    Additional Resources That you should read up on

    http://dygraphs.com/data.html

    http://jsfiddle.net/eM2Mg/