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