tests/steps.html

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