4 <script type="text/javascript">
\r
5 window.onload = function () {
\r
6 var chart = new CanvasJS.Chart("chartContainer", {
\r
8 text: "Stock Prices for June & July 2014"
\r
17 valueFormatString: "MMM-DD"
\r
20 content: "Date: {x} </br> <strong>Prices: </strong> </br> Open: {y[0]}, Close: {y[3]} </br> High: {y[1]}, Low: {y[2]} "
\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
76 <script src="../../canvasjs.min.js"></script>
\r
77 <title>CanvasJS Example</title>
\r
80 <div id="chartContainer" style="height: 400px; width: 100%;">
\r