charts/canvas/examples/13-candlestick-chart/basic-candle-stick-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                                 title: {\r
   8                                         text: "Basic Candle Stick Chart"\r
   9                                 },\r
  10                                 zoomEnabled: true,\r
  11                                 axisY: {\r
  12                                         includeZero: false,\r
  13                                         title: "Prices",\r
  14                                         prefix: "$ "\r
  15                                 },\r
  16                                 axisX: {\r
  17                                         interval: 2,\r
  18                                         intervalType: "month",\r
  19                                         valueFormatString: "MMM-YY",\r
  20                                 },\r
  21                                 data: [\r
  22                                 {\r
  23                                         type: "candlestick",\r
  24                                         dataPoints: [\r
  25                                                 { x: new Date(2012, 01, 01), y: [5198, 5629, 5159, 5385] },\r
  26                                                 { x: new Date(2012, 02, 01), y: [5366, 5499, 5135, 5295] },\r
  27                                                 { x: new Date(2012, 03, 01), y: [5296, 5378, 5154, 5248] },\r
  28                                                 { x: new Date(2012, 04, 01), y: [5254, 5279, 4788, 4924] },\r
  29                                                 { x: new Date(2012, 05, 01), y: [4910, 5286, 4770, 5278] },\r
  30                                                 { x: new Date(2012, 06, 01), y: [5283, 5348, 5032, 5229] },\r
  31                                                 { x: new Date(2012, 07, 01), y: [5220, 5448, 5164, 5258] },\r
  32                                                 { x: new Date(2012, 08, 01), y: [5276, 5735, 5215, 5703] },\r
  33                                                 { x: new Date(2012, 09, 01), y: [5704, 5815, 4888, 5619] },\r
  34                                                 { x: new Date(2012, 10, 01), y: [5609, 5885, 5548, 5879] },\r
  35                                                 { x: new Date(2012, 11, 01), y: [5878, 5965, 5823, 5905] },\r
  36                                                 { x: new Date(2013, 00, 01), y: [5937, 6111, 5935, 6034] },\r
  37                                                 { x: new Date(2013, 01, 01), y: [6040, 6052, 5671, 5693] },\r
  38                                                 { x: new Date(2013, 02, 01), y: [5702, 5971, 5604, 5682] },\r
  39                                                 { x: new Date(2013, 03, 01), y: [5697, 5962, 5477, 5930] },\r
  40                                                 { x: new Date(2013, 04, 01), y: [5911, 6229, 5910, 5985] },\r
  41                                                 { x: new Date(2013, 05, 01), y: [5997, 6011, 5566, 5842] },\r
  42                                                 { x: new Date(2013, 06, 01), y: [5834, 6093, 5675, 5742] },\r
  43                                                 { x: new Date(2013, 07, 01), y: [5776, 5808, 5118, 5471] },\r
  44                                                 { x: new Date(2013, 08, 01), y: [5480, 6142, 5318, 5735] },\r
  45                                                 { x: new Date(2013, 09, 01), y: [5756, 6309, 5700, 6299] },\r
  46                                                 { x: new Date(2013, 10, 01), y: [6289, 6342, 5972, 6176] },\r
  47                                                 { x: new Date(2013, 11, 01), y: [6171, 6415, 6129, 6304] }\r
  48                                         ]\r
  49                                 }\r
  50                                 ]\r
  51                         });\r
  52                         chart.render();\r
  53                 }\r
  54         </script>\r
  55         <script src="../../canvasjs.min.js"></script>\r
  56         <title>CanvasJS Example</title>\r
  57 </head>\r
  58 <body>\r
  59         <div id="chartContainer" style="height: 400px; width: 100%;">\r
  60         </div>\r
  61 </body>\r
  62 </html>