tests/missing-data.html

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