tests/missing-data.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/dygraph.css">
   5     <title>missing data</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     <table>
  15     <tr><td valign=top>
  16     <div id="graph"></div>
  17     <div id="graph2"></div>
  18     </td><td valign=top>
  19     <div id="graph3"></div>
  20     <div id="graph4"></div>
  21     </td><td valign=top>
  22     <div id="graph5"></div>
  23     <div id="graph6"></div>
  24     </td></tr>
  25     </table>
  26
  27     <script type="text/javascript">
  28     g = new Dygraph(
  29       document.getElementById("graph"),
  30       "Date,GapSeries1,GapSeries2\n" +
  31       "2009/12/01,10,10\n" +
  32       "2009/12/02,15,11\n" +
  33       "2009/12/03,,12\n" +
  34       "2009/12/04,20,13\n" +
  35       "2009/12/05,15,\n" +
  36       "2009/12/06,18,15\n" +
  37       "2009/12/07,12,16\n"
  38     );
  39
  40     g2 = new Dygraph(
  41       document.getElementById("graph2"),
  42       [
  43         [ new Date("2009/12/01"), 10, 10],
  44         [ new Date("2009/12/02"), 15, 11],
  45         [ new Date("2009/12/03"), null, 12],
  46         [ new Date("2009/12/04"), 20, 13],
  47         [ new Date("2009/12/05"), 15, null],
  48         [ new Date("2009/12/06"), 18, 15],
  49         [ new Date("2009/12/07"), 12, 16]
  50       ],
  51       {
  52         labels: ["Date","GapSeries1","GapSeries2"],
  53         showRoller: true
  54       }
  55     );
  56
  57     g3 = new Dygraph(
  58       document.getElementById("graph3"),
  59       [
  60         [1, [10, 2], [20, 3]],
  61         [2, [12, 2], [20, 3]],
  62         [3, [ 8, 2], [20, 3]],
  63         [4, [null, 2], [20, 3]],
  64         [5, [null, 2], null],
  65         [6, [ 9, 2], [20, 3]],
  66         [7, [10, 2], [20, 3]]
  67       ],
  68       {
  69         errorBars: true,
  70         labels: [ "X", "Series1", "Series2" ]
  71       }
  72     );
  73
  74     g4 = new Dygraph(
  75       document.getElementById("graph4"),
  76       [
  77         [1, [10, 2], [20, 3]],
  78         [2, [12, 2], [20, 3]],
  79         [3, [ 8, 2], [20, 3]],
  80         [4, null, [20, 3]],
  81         [5, null, [null, 3]],
  82         [6, [ 9, 2], [20, 3]],
  83         [7, [10, 2], [20, 3]]
  84       ],
  85       {
  86         errorBars: true,
  87         rollPeriod: 2,
  88         labels: [ "X", "Series1", "Series2" ]
  89       }
  90     );
  91
  92     g5 = new Dygraph(
  93         document.getElementById("graph5"),
  94         [
  95           [1, [10, 2], [20, 3]],
  96           [2, [12, 2], [20, 3]],
  97           [3, [ 8, 2], [20, 3]],
  98           [4, [2, null], null],
  99           [5, null, [null, 3]],
 100           [6, [ 9, 2], [20, 3]],
 101           [7, [10, 2], [20, 3]]
 102         ],
 103         {
 104           errorBars: true,
 105           connectSeparatedPoints: false,
 106           labels: [ "X", "Series1", "Series2" ]
 107         }
 108     );
 109
 110     g6 = new Dygraph(
 111         document.getElementById("graph6"),
 112         [
 113           [1, [8, 10,12],null],
 114           [2, [3, 5,7],[4,6,7]],
 115           [3, null,[1,2,4]],
 116           [4, [ 9,null, 2],[3,4,8]],
 117           [5, [null,2, null],[6,8,9]],
 118           [6, [2,3, 6],[2,3,5]]
 119         ],
 120         {
 121           customBars: true,
 122           connectSeparatedPoints: false,
 123           labels: [ "X", "Series1", "Series2"]
 124         }
 125     );
 126     </script>
 127   </body>
 128 </html>