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         <p>9: Mixed mode - step and line:</p>
 158     <div id="graphdiv9"></div>
 159     <script type="text/javascript">
 160       g8 = new Dygraph(document.getElementById("graphdiv9"),
 161                       "Date,Idle,Used\n" +
 162                       "2008-05-07,70,30\n" +
 163                       "2008-05-08,12,88\n" +
 164                       "2008-05-09,88,12\n" +
 165                       "2008-05-10,63,37\n" +
 166                       "2008-05-11,35,65\n",
 167                       {
 168                                 series: {
 169                                                   Idle: {stepPlot: true},
 170                                                   Used: {stepPlot: false}
 171                                                 },
 172
 173                         fillGraph: false,
 174                         stackedGraph: false,
 175                         includeZero: true
 176                       });
 177     </script>
 178
 179
 180         <p>10: Mixed mode - step and line (filled):</p>
 181     <div id="graphdiv10"></div>
 182     <script type="text/javascript">
 183       g8 = new Dygraph(document.getElementById("graphdiv10"),
 184                       "Date,Idle,Used\n" +
 185                       "2008-05-07,70,30\n" +
 186                       "2008-05-08,12,88\n" +
 187                       "2008-05-09,88,12\n" +
 188                       "2008-05-10,63,37\n" +
 189                       "2008-05-11,35,65\n",
 190                       {
 191                                 series: {
 192                                                   Idle: {stepPlot: false},
 193                                                   Used: {stepPlot: true}
 194                                                 },
 195
 196                         fillGraph: true,
 197                         stackedGraph: false,
 198                         includeZero: true
 199                       });
 200     </script>
 201
 202         <p>11: Mixed mode - step and line (stacked and filled):</p>
 203     <div id="graphdiv11"></div>
 204     <script type="text/javascript">
 205       g8 = new Dygraph(document.getElementById("graphdiv11"),
 206                       "Date,Idle,Used,NotUsed,Active\n" +
 207                       "2008-05-07,60,30,5,5\n" +
 208                       "2008-05-08,12,73,5,10\n" +
 209                       "2008-05-09,38,12,30,20\n" +
 210                       "2008-05-10,50,17,23,10\n" +
 211                       "2008-05-11,35,25,35,5\n",
 212                       {
 213                                 series: {
 214                                                   Idle: {stepPlot: false},
 215                                                   Used: {stepPlot: true},
 216                                                   NotUsed: {stepPlot: false},
 217                                                   Active: {stepPlot: true}
 218                         },
 219                         fillGraph: true,
 220                         stackedGraph: true,
 221                         includeZero: true
 222                       });
 223     </script>
 224
 225         <p>12: Mixed mode - step and line (errorbars):</p>
 226     <div id="graphdiv12"></div>
 227     <script type="text/javascript">
 228       g8 = new Dygraph(document.getElementById("graphdiv12"),
 229         [
 230           [1, [75, 2], [50, 3]],
 231           [2, [70, 5], [90, 4]],
 232           [3, [80, 7], [112, 5]],
 233           [4, [55, 3], [100, 2]],
 234           [5, [69, 4], [85, 6]]
 235         ],
 236         {
 237           errorBars: true,
 238           labels: ["X", "Data1", "Data2"],
 239                   series: {
 240                     Data1: {stepPlot: true},
 241                     Data2: {stepPlot: false}
 242                   }
 243         }
 244           );
 245     </script>
 246
 247         <p>13: Mixed mode - step and line (custombars):</p>
 248     <div id="graphdiv13"></div>
 249     <script type="text/javascript">
 250       g8 = new Dygraph(document.getElementById("graphdiv13"),
 251         [
 252           [1, [73, 75, 78], [50, 55, 70]],
 253           [2, [65, 70, 75], [83, 91, 99]],
 254           [3, [75, 85, 90], [98, 107, 117]],
 255           [4, [55, 58, 61], [93, 102, 105]],
 256           [5, [69, 73, 85], [80, 85, 87]]
 257         ],
 258         {
 259           customBars: true,
 260           labels: ["X", "Data1", "Data2"],
 261                   series: {
 262                     Data1: {stepPlot: true},
 263                     Data2: {stepPlot: false}
 264                   }
 265         }
 266           );
 267     </script>
 268
 269   </body>
 270 </html>