charts/canvas/examples/18-range-bar-chart/basic-range-bar-chart.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 <head>\r
   4 <script type="text/javascript">\r
   5 window.onload = function () {\r
   6         var chart = new CanvasJS.Chart("chartContainer",\r
   7         {\r
   8                 title: {\r
   9                         text: "Delhi Temperature (1 Apr - 7 Apr) 2014"\r
  10                 },\r
  11                 axisY: {\r
  12                         includeZero: false,\r
  13                         interval: 2,\r
  14                         valueFormatString: "#0.## °C"\r
  15                 },\r
  16                 axisX: {\r
  17                         interval: 1,\r
  18                         valueFormatString: "DD-MMM"\r
  19                 },\r
  20                 data: [\r
  21                 {\r
  22                         type: "rangeBar",\r
  23                         yValueFormatString: "#0.## °C",\r
  24                         dataPoints: [\r
  25                                 {x: new Date(2014,03,1), y: [ 17,33]},  \r
  26                                 {x: new Date(2014,03,2), y: [ 18,35]},\r
  27                                 {x: new Date(2014,03,3), y: [ 18,32]},\r
  28                                 {x: new Date(2014,03,4), y: [ 18,32]},\r
  29                                 {x: new Date(2014,03,5), y: [ 20,35]},\r
  30                                 {x: new Date(2014,03,6), y: [ 20,38]},\r
  31                                 {x: new Date(2014,03,7), y: [ 21,32]}\r
  32                         ]\r
  33                 }\r
  34                 ]\r
  35         });\r
  36         chart.render();\r
  37 }\r
  38 </script>\r
  39         <script src="../../canvasjs.min.js"></script>\r
  40         <title>CanvasJS Example</title>\r
  41 </head>\r
  42 <body>\r
  43 <div id="chartContainer" style="height: 400px; width: 100%;">\r
  44 </div>\r
  45 </body>\r
  46 </html>