charts/canvas/examples/14-ohlc(stock)-chart/ohlc-chart-with-tooltip-customization.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: "Stock Prices for June & July 2014"\r
   9                                 },\r
  10                                 axisY: {\r
  11                                         includeZero: false,\r
  12                                         prefix: "$ ",\r
  13                                         title: "Prices"\r
  14                                 },\r
  15                                 axisX: {\r
  16                                         interval: 1,\r
  17                                         valueFormatString: "MMM-DD"\r
  18                                 },\r
  19                                 toolTip: {\r
  20                                         content: "Date: {x} </br> <strong>Prices: </strong> </br> Open: {y[0]}, Close: {y[3]} </br>  High: {y[1]}, Low: {y[2]} "\r
  21                                 },\r
  22                                 data: [\r
  23                                 {\r
  24                                         type: "ohlc",\r
  25                                         color: "brown",\r
  26                                         dataPoints: [   // Y: [Open, High ,Low, Close]\r
  27                                                 { x: new Date(2014, 05, 2), y: [184.76, 186.28, 184.67, 185.69] },\r
  28                                                 { x: new Date(2014, 05, 3), y: [185.55, 185.76, 184.12, 184.37] },\r
  29                                                 { x: new Date(2014, 05, 4), y: [184.71, 185.45, 184.20, 184.51] },\r
  30                                                 { x: new Date(2014, 05, 5), y: [184.66, 186.09, 183.92, 185.98] },\r
  31                                                 { x: new Date(2014, 05, 6), y: [186.47, 187.65, 185.90, 186.37] },\r
  32                                                 { x: new Date(2014, 05, 9), y: [186.22, 187.64, 185.96, 186.22] },\r
  33                                                 { x: new Date(2014, 05, 10), y: [186.20, 186.22, 183.82, 184.29] },\r
  34                                                 { x: new Date(2014, 05, 11), y: [183.64, 184.20, 182.01, 182.25] },\r
  35                                                 { x: new Date(2014, 05, 12), y: [182.48, 182.55, 180.91, 181.22] },\r
  36                                                 { x: new Date(2014, 05, 13), y: [182.00, 183.00, 181.52, 182.56] },\r
  37                                                 { x: new Date(2014, 05, 16), y: [182.40, 182.71, 181.24, 182.35] },\r
  38                                                 { x: new Date(2014, 05, 17), y: [181.90, 182.81, 181.56, 182.26] },\r
  39                                                 { x: new Date(2014, 05, 18), y: [182.04, 183.61, 181.79, 183.60] },\r
  40                                                 { x: new Date(2014, 05, 19), y: [184.12, 184.47, 182.36, 182.82] },\r
  41                                                 { x: new Date(2014, 05, 20), y: [182.59, 182.67, 181.40, 181.55] },\r
  42                                                 { x: new Date(2014, 05, 23), y: [181.92, 182.25, 181.00, 182.14] },\r
  43                                                 { x: new Date(2014, 05, 24), y: [181.50, 183.00, 180.65, 180.88] },\r
  44                                                 { x: new Date(2014, 05, 25), y: [180.25, 180.97, 180.06, 180.72] },\r
  45                                                 { x: new Date(2014, 05, 26), y: [180.87, 181.37, 179.27, 180.37] },\r
  46                                                 { x: new Date(2014, 05, 27), y: [179.77, 182.46, 179.66, 181.71] },\r
  47                                                 { x: new Date(2014, 05, 30), y: [181.33, 181.93, 180.26, 181.27] },\r
  48                                                 { x: new Date(2014, 06, 1), y: [181.70, 187.27, 181.70, 186.35] },\r
  49                                                 { x: new Date(2014, 06, 2), y: [186.35, 188.99, 186.17, 188.39] },\r
  50                                                 { x: new Date(2014, 06, 3), y: [188.39, 188.81, 187.35, 188.53] },\r
  51                                                 { x: new Date(2014, 06, 7), y: [187.61, 188.27, 187.44, 188.04] },\r
  52                                                 { x: new Date(2014, 06, 8), y: [187.65, 188.08, 186.37, 187.22] },\r
  53                                                 { x: new Date(2014, 06, 9), y: [187.68, 188.90, 186.89, 188.42] },\r
  54                                                 { x: new Date(2014, 06, 10), y: [186.44, 188.05, 186.21, 187.70] },\r
  55                                                 { x: new Date(2014, 06, 11), y: [187.73, 188.35, 186.70, 188.00] },\r
  56                                                 { x: new Date(2014, 06, 14), y: [188.53, 190.44, 188.53, 189.86] },\r
  57                                                 { x: new Date(2014, 06, 15), y: [189.38, 190.08, 188.21, 188.49] },\r
  58                                                 { x: new Date(2014, 06, 16), y: [192.20, 193.36, 190.76, 192.36] },\r
  59                                                 { x: new Date(2014, 06, 17), y: [192.36, 195.95, 192.00, 192.49] },\r
  60                                                 { x: new Date(2014, 06, 18), y: [191.96, 193.44, 190.00, 192.50] },\r
  61                                                 { x: new Date(2014, 06, 21), y: [191.30, 191.70, 189.25, 190.85] },\r
  62                                                 { x: new Date(2014, 06, 22), y: [191.56, 194.72, 191.56, 194.09] },\r
  63                                                 { x: new Date(2014, 06, 23), y: [194.11, 194.90, 193.57, 193.63] },\r
  64                                                 { x: new Date(2014, 06, 24), y: [193.95, 195.62, 193.75, 195.24] },\r
  65                                                 { x: new Date(2014, 06, 25), y: [195.30, 195.90, 193.79, 194.40] },\r
  66                                                 { x: new Date(2014, 06, 28), y: [194.30, 196.40, 193.65, 195.78] },\r
  67                                                 { x: new Date(2014, 06, 29), y: [195.30, 195.89, 194.54, 194.57] },\r
  68                                                 { x: new Date(2014, 06, 30), y: [195.20, 195.99, 192.90, 194.00] }\r
  69                                         ]\r
  70                                 }\r
  71                                 ]\r
  72                         });\r
  73                         chart.render();\r
  74                 }\r
  75         </script>\r
  76         <script src="../../canvasjs.min.js"></script>\r
  77         <title>CanvasJS Example</title>\r
  78 </head>\r
  79 <body>\r
  80         <div id="chartContainer" style="height: 400px; width: 100%;">\r
  81         </div>\r
  82 </body>\r
  83 </html>