charts/canvas/examples/19-range-column-chart/basic-range-column-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: "Basic Range Column Chart"\r
  10                 },\r
  11                 axisY: {\r
  12                         includeZero: false,\r
  13                         interval: 10,\r
  14                         title: "Temperature (C)"\r
  15                 },\r
  16                 axisX: {\r
  17                         interval: 1,\r
  18                         intervalType: "month",\r
  19                         valueFormatString: "MMM"\r
  20                         },\r
  21                 data: [\r
  22                 {\r
  23                         type: "rangeColumn",\r
  24                         color: "#369EAD",\r
  25                         dataPoints: [\r
  26                                 { x: new Date(2012,00,01), y: [-9.7, 10.4] },  // y: [Low ,High]\r
  27                                 { x: new Date(2012,01,01), y: [-8.7, 16.5] },\r
  28                                 { x: new Date(2012,02,01), y: [-3.5, 19.4] },\r
  29                                 { x: new Date(2012,03,01), y: [5.0, 22.6] },\r
  30                                 { x: new Date(2012,04,01), y: [7.9, 29.5] },\r
  31                                 { x: new Date(2012,05,01), y: [9.2, 34.7] },\r
  32                                 { x: new Date(2012,06,01), y: [7.3, 30.5] },\r
  33                                 { x: new Date(2012,07,01), y: [4.4, 25.5] },\r
  34                                 { x: new Date(2012,08,01), y: [-3.1, 20.4] },\r
  35                                 { x: new Date(2012,09,01), y: [-5.2, 15.4] },\r
  36                                 { x: new Date(2012,10,01), y: [-13.5, 9.8] },\r
  37                                 { x: new Date(2012,11,01), y: [-15.5, 5.8] }\r
  38                         ]\r
  39                 }\r
  40                 ]\r
  41         });\r
  42         chart.render();\r
  43 }\r
  44 </script>\r
  45         <script src="../../canvasjs.min.js"></script>\r
  46         <title>CanvasJS Example</title>\r
  47 </head>\r
  48 <body>\r
  49 <div id="chartContainer" style="height: 400px; width: 100%;">\r
  50 </div>\r
  51 </body>\r
  52 </html>