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