tests/steps.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>dygraph</title>
   5     <!--
   6     For production (minified) code, use:
   7     <script type="text/javascript" src="dygraph-combined.js"></script>
   8     -->
   9     <script type="text/javascript" src="../dist/dygraph.js"></script>
  10
  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         series: {
 131           GapSeries2: {
 132             axis: 'y2'
 133           }
 134         }
 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>