tests/missing-data.html

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