tests/steps.html

   1 <html>
   2   <head>
   3     <title>dygraph</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="../excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11   </head>
  12   <body>
  13     <p>1: Simple line chart:</p>
  14     <div id="graphdiv1"></div>
  15     <script type="text/javascript">
  16       g1 = new Dygraph(document.getElementById("graphdiv1"),
  17                       "Date,Temperature\n" +
  18                       "2008-05-07,75\n" +
  19                       "2008-05-08,70\n" +
  20                       "2008-05-09,80\n" +
  21                       "2008-05-10,55\n" +
  22                       "2008-05-11,69\n");
  23     </script>
  24
  25     <p>2: Simple step chart:</p>
  26     <div id="graphdiv2"></div>
  27     <script type="text/javascript">
  28       g2 = new Dygraph(document.getElementById("graphdiv2"),
  29                       "Date,Temperature\n" +
  30                       "2008-05-07,75\n" +
  31                       "2008-05-08,70\n" +
  32                       "2008-05-09,80\n" +
  33                       "2008-05-10,55\n" +
  34                       "2008-05-11,69\n",
  35                        {
  36                           stepPlot: true
  37                        });
  38     </script>
  39
  40     <p>3: Filled step chart:</p>
  41     <div id="graphdiv3"></div>
  42     <script type="text/javascript">
  43       g3 = new Dygraph(document.getElementById("graphdiv3"),
  44                       "Date,Temperature\n" +
  45                       "2008-05-07,75\n" +
  46                       "2008-05-08,70\n" +
  47                       "2008-05-09,80\n" +
  48                       "2008-05-10,55\n" +
  49                       "2008-05-11,69\n",
  50                        {
  51                           stepPlot: true,
  52                           fillGraph: true
  53                        });
  54     </script>
  55
  56     <p>4: Line chart with error bars:</p>
  57     <div id="graphdiv4"></div>
  58     <script type="text/javascript">
  59       g4 = new Dygraph(document.getElementById("graphdiv4"),
  60         [
  61           [1, [75, 2]],
  62           [2, [70, 5]],
  63           [3, [80, 7]],
  64           [4, [55, 3]],
  65           [5, [69, 4]]
  66         ],
  67         {
  68            errorBars: true,
  69            labels: ["X", "Data"]
  70         }
  71       );
  72     </script>
  73
  74     <p>5: Step chart with error bars:</p>
  75     <div id="graphdiv5"></div>
  76     <script type="text/javascript">
  77       g5 = new Dygraph(document.getElementById("graphdiv5"),
  78         [
  79           [1, [75, 2]],
  80           [2, [70, 5]],
  81           [3, [80, 7]],
  82           [4, [55, 3]],
  83           [5, [69, 4]]
  84         ],
  85         {
  86            stepPlot: true,
  87            errorBars: true,
  88            labels: ["X", "Data"]
  89         }
  90       );
  91     </script>
  92
  93     <p>6: Stepped chart with gaps from CSV:</p>
  94     <div id="graphdiv6"></div>
  95     <script type="text/javascript">
  96     g6 = new Dygraph(
  97       document.getElementById("graphdiv6"),
  98       "Date,GapSeries1,GapSeries2\n" +
  99       "2009/12/01,10,10\n" +
 100       "2009/12/02,15,11\n" +
 101       "2009/12/03,,12\n" +
 102       "2009/12/04,,13\n" +
 103       "2009/12/05,15,\n" +
 104       "2009/12/06,18,15\n" +
 105       "2009/12/07,12,16\n",
 106       {
 107         stepPlot: true
 108       }
 109     );
 110     </script>
 111
 112     <p>7: Stepped chart with gaps from native data:</p>
 113     <div id="graphdiv7"></div>
 114     <script type="text/javascript">
 115     g7 = new Dygraph(
 116       document.getElementById("graphdiv7"),
 117       [
 118         [ new Date("2009/12/01"), 10, 10],
 119         [ new Date("2009/12/02"), 15, 11],
 120         [ new Date("2009/12/03"), null, 12],
 121         [ new Date("2009/12/04"), null, 13],
 122         [ new Date("2009/12/05"), 15, null],
 123         [ new Date("2009/12/06"), 18, 15],
 124         [ new Date("2009/12/07"), 12, 16]
 125       ],
 126       {
 127         labels: ["Date","GapSeries1","GapSeries2"],
 128         showRoller: true,
 129         stepPlot: true,
 130         GapSeries2: { axis: {} }
 131       }
 132     );
 133     </script>
 134
 135   </body>
 136 </html>