tests/steps.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/dygraph.css">
   5     <title>dygraph</title>
   6     <!--
   7     For production (minified) code, use:
   8     <script type="text/javascript" src="dygraph-combined.js"></script>
   9     -->
  10     <script type="text/javascript" src="../dist/dygraph.js"></script>
  11
  12   </head>
  13   <body>
  14     <p>1: Simple line chart:</p>
  15     <div id="graphdiv1"></div>
  16     <script type="text/javascript">
  17       g1 = new Dygraph(document.getElementById("graphdiv1"),
  18                       "Date,Temperature\n" +
  19                       "2008-05-07,75\n" +
  20                       "2008-05-08,70\n" +
  21                       "2008-05-09,80\n" +
  22                       "2008-05-10,55\n" +
  23                       "2008-05-11,69\n");
  24     </script>
  25
  26     <p>2: Simple step chart:</p>
  27     <div id="graphdiv2"></div>
  28     <script type="text/javascript">
  29       g2 = new Dygraph(document.getElementById("graphdiv2"),
  30                       "Date,Temperature\n" +
  31                       "2008-05-07,75\n" +
  32                       "2008-05-08,70\n" +
  33                       "2008-05-09,80\n" +
  34                       "2008-05-10,55\n" +
  35                       "2008-05-11,69\n",
  36                        {
  37                           stepPlot: true
  38                        });
  39     </script>
  40
  41     <p>3: Filled step chart:</p>
  42     <div id="graphdiv3"></div>
  43     <script type="text/javascript">
  44       g3 = new Dygraph(document.getElementById("graphdiv3"),
  45                       "Date,Temperature\n" +
  46                       "2008-05-07,75\n" +
  47                       "2008-05-08,70\n" +
  48                       "2008-05-09,80\n" +
  49                       "2008-05-10,55\n" +
  50                       "2008-05-11,69\n",
  51                        {
  52                           stepPlot: true,
  53                           fillGraph: true
  54                        });
  55     </script>
  56
  57     <p>4: Line chart with error bars:</p>
  58     <div id="graphdiv4"></div>
  59     <script type="text/javascript">
  60       g4 = new Dygraph(document.getElementById("graphdiv4"),
  61         [
  62           [1, [75, 2]],
  63           [2, [70, 5]],
  64           [3, [80, 7]],
  65           [4, [55, 3]],
  66           [5, [69, 4]]
  67         ],
  68         {
  69            errorBars: true,
  70            labels: ["X", "Data"]
  71         }
  72       );
  73     </script>
  74
  75     <p>5: Step chart with error bars:</p>
  76     <div id="graphdiv5"></div>
  77     <script type="text/javascript">
  78       g5 = new Dygraph(document.getElementById("graphdiv5"),
  79         [
  80           [1, [75, 2]],
  81           [2, [70, 5]],
  82           [3, [80, 7]],
  83           [4, [55, 3]],
  84           [5, [69, 4]]
  85         ],
  86         {
  87            stepPlot: true,
  88            errorBars: true,
  89            labels: ["X", "Data"]
  90         }
  91       );
  92     </script>
  93
  94     <p>6: Stepped chart with gaps from CSV:</p>
  95     <div id="graphdiv6"></div>
  96     <script type="text/javascript">
  97     g6 = new Dygraph(
  98       document.getElementById("graphdiv6"),
  99       "Date,GapSeries1,GapSeries2\n" +
 100       "2009/12/01,10,10\n" +
 101       "2009/12/02,15,11\n" +
 102       "2009/12/03,,12\n" +
 103       "2009/12/04,,13\n" +
 104       "2009/12/05,15,\n" +
 105       "2009/12/06,18,15\n" +
 106       "2009/12/07,12,16\n",
 107       {
 108         stepPlot: true
 109       }
 110     );
 111     </script>
 112
 113     <p>7: Stepped chart with gaps from native data:</p>
 114     <div id="graphdiv7"></div>
 115     <script type="text/javascript">
 116     g7 = new Dygraph(
 117       document.getElementById("graphdiv7"),
 118       [
 119         [ new Date("2009/12/01"), 10, 10],
 120         [ new Date("2009/12/02"), 15, 11],
 121         [ new Date("2009/12/03"), null, 12],
 122         [ new Date("2009/12/04"), null, 13],
 123         [ new Date("2009/12/05"), 15, null],
 124         [ new Date("2009/12/06"), 18, 15],
 125         [ new Date("2009/12/07"), 12, 16]
 126       ],
 127       {
 128         labels: ["Date","GapSeries1","GapSeries2"],
 129         showRoller: true,
 130         stepPlot: true,
 131         series: {
 132           GapSeries2: {
 133             axis: 'y2'
 134           }
 135         }
 136       }
 137     );
 138     </script>
 139
 140     <p>8: Stacked filled step chart:</p>
 141     <div id="graphdiv8"></div>
 142     <script type="text/javascript">
 143       g8 = new Dygraph(document.getElementById("graphdiv8"),
 144                       "Date,Idle,Used\n" +
 145                       "2008-05-07,70,30\n" +
 146                       "2008-05-08,12,88\n" +
 147                       "2008-05-09,88,12\n" +
 148                       "2008-05-10,63,37\n" +
 149                       "2008-05-11,35,65\n",
 150                        {
 151                           stepPlot: true,
 152                           fillGraph: true,
 153                           stackedGraph: true,
 154                           includeZero: true
 155                        });
 156     </script>
 157
 158         <p>9: Mixed mode - step and line:</p>
 159     <div id="graphdiv9"></div>
 160     <script type="text/javascript">
 161       g8 = new Dygraph(document.getElementById("graphdiv9"),
 162                       "Date,Idle,Used\n" +
 163                       "2008-05-07,70,30\n" +
 164                       "2008-05-08,12,88\n" +
 165                       "2008-05-09,88,12\n" +
 166                       "2008-05-10,63,37\n" +
 167                       "2008-05-11,35,65\n",
 168                       {
 169                                 series: {
 170                                                   Idle: {stepPlot: true},
 171                                                   Used: {stepPlot: false}
 172                                                 },
 173
 174                         fillGraph: false,
 175                         stackedGraph: false,
 176                         includeZero: true
 177                       });
 178     </script>
 179
 180
 181         <p>10: Mixed mode - step and line (filled):</p>
 182     <div id="graphdiv10"></div>
 183     <script type="text/javascript">
 184       g8 = new Dygraph(document.getElementById("graphdiv10"),
 185                       "Date,Idle,Used\n" +
 186                       "2008-05-07,70,30\n" +
 187                       "2008-05-08,12,88\n" +
 188                       "2008-05-09,88,12\n" +
 189                       "2008-05-10,63,37\n" +
 190                       "2008-05-11,35,65\n",
 191                       {
 192                                 series: {
 193                                                   Idle: {stepPlot: false},
 194                                                   Used: {stepPlot: true}
 195                                                 },
 196
 197                         fillGraph: true,
 198                         stackedGraph: false,
 199                         includeZero: true
 200                       });
 201     </script>
 202
 203         <p>11: Mixed mode - step and line (stacked and filled):</p>
 204     <div id="graphdiv11"></div>
 205     <script type="text/javascript">
 206       g8 = new Dygraph(document.getElementById("graphdiv11"),
 207                       "Date,Idle,Used,NotUsed,Active\n" +
 208                       "2008-05-07,60,30,5,5\n" +
 209                       "2008-05-08,12,73,5,10\n" +
 210                       "2008-05-09,38,12,30,20\n" +
 211                       "2008-05-10,50,17,23,10\n" +
 212                       "2008-05-11,35,25,35,5\n",
 213                       {
 214                                 series: {
 215                                                   Idle: {stepPlot: false},
 216                                                   Used: {stepPlot: true},
 217                                                   NotUsed: {stepPlot: false},
 218                                                   Active: {stepPlot: true}
 219                         },
 220                         fillGraph: true,
 221                         stackedGraph: true,
 222                         includeZero: true
 223                       });
 224     </script>
 225
 226         <p>12: Mixed mode - step and line (errorbars):</p>
 227     <div id="graphdiv12"></div>
 228     <script type="text/javascript">
 229       g8 = new Dygraph(document.getElementById("graphdiv12"),
 230         [
 231           [1, [75, 2], [50, 3]],
 232           [2, [70, 5], [90, 4]],
 233           [3, [80, 7], [112, 5]],
 234           [4, [55, 3], [100, 2]],
 235           [5, [69, 4], [85, 6]]
 236         ],
 237         {
 238           errorBars: true,
 239           labels: ["X", "Data1", "Data2"],
 240                   series: {
 241                     Data1: {stepPlot: true},
 242                     Data2: {stepPlot: false}
 243                   }
 244         }
 245           );
 246     </script>
 247
 248         <p>13: Mixed mode - step and line (custombars):</p>
 249     <div id="graphdiv13"></div>
 250     <script type="text/javascript">
 251       g8 = new Dygraph(document.getElementById("graphdiv13"),
 252         [
 253           [1, [73, 75, 78], [50, 55, 70]],
 254           [2, [65, 70, 75], [83, 91, 99]],
 255           [3, [75, 85, 90], [98, 107, 117]],
 256           [4, [55, 58, 61], [93, 102, 105]],
 257           [5, [69, 73, 85], [80, 85, 87]]
 258         ],
 259         {
 260           customBars: true,
 261           labels: ["X", "Data1", "Data2"],
 262                   series: {
 263                     Data1: {stepPlot: true},
 264                     Data2: {stepPlot: false}
 265                   }
 266         }
 267           );
 268     </script>
 269
 270   </body>
 271 </html>