charts/canvas/examples/20-range-area-chart/range-area-with-null-data.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 \r
   4 <head>\r
   5 <script type="text/javascript">\r
   6 window.onload = function () {\r
   7         var chart = new CanvasJS.Chart("chartContainer",\r
   8         {\r
   9                 title:{\r
  10                         text: "Monthly Temperature variation in New Delhi",\r
  11                 },              \r
  12                 exportEnabled: true,\r
  13                 animationEnabled: true,\r
  14                 axisY: {\r
  15                         title: "Temperature (°C)",\r
  16                 },     \r
  17                 axisX: {\r
  18                         valueFormatString: "MMM",\r
  19                 },\r
  20                 toolTip: {\r
  21                         content: "Date: {x} </br> <strong>Temperature: </strong> </br> Min: {y[0]}°C, Max: {y[1]}°C",\r
  22                 },\r
  23                 data: [\r
  24                 {\r
  25                         type: "rangeSplineArea",\r
  26                         indexLabel: "{y[#index]}",\r
  27                         dataPoints: [  \r
  28                                 {x: new Date(2013,00,01), y: [08, 20]}, \r
  29                                 {x: new Date(2013,01,01), y: [10, 24]}, \r
  30                                 {x: new Date(2013,02,01), y: [16, 29]}, \r
  31                                 {x: new Date(2013,03,01), y: [21, 36]}, \r
  32                                 {x: new Date(2013,04,01), y: [26, 39]}, \r
  33                                 {x: new Date(2013,05,01), y: [22, 39]}, \r
  34                                 {x: new Date(2013,06,01), y: null},             \r
  35                                 {x: new Date(2013,07,01), y: [20, 34]},         \r
  36                                 {x: new Date(2013,08,01), y: [20, 34]}, \r
  37                                 {x: new Date(2013,09,01), y: [19, 33]}, \r
  38                                 {x: new Date(2013,10,01), y: [13, 28]}, \r
  39                                 {x: new Date(2013,11,01), y: [09, 23]}\r
  40                         ]\r
  41                 }\r
  42                 ]\r
  43         });\r
  44         chart.render();\r
  45 }\r
  46 </script>\r
  47         <script src="../../canvasjs.min.js"></script>\r
  48         <title>CanvasJS Example</title>\r
  49 </head>\r
  50 <body>\r
  51 <div id="chartContainer" style="height: 400px; width: 100%;"></div>\r
  52 </body>\r
  53  \r
  54 \r
  55 </html>\r