4 <script type="text/javascript">
\r
5 window.onload = function () {
\r
6 var chart = new CanvasJS.Chart("chartContainer1", {
\r
9 text: "Earthquakes - per month"
\r
11 animationEnabled: true,
\r
13 valueFormatString: "MMM",
\r
15 intervalType: "month"
\r
26 { x: new Date(2012, 00, 1), y: 450 },
\r
27 { x: new Date(2012, 01, 1), y: 414 },
\r
28 { x: new Date(2012, 02, 1), y: 520, indexLabel: "highest", markerColor: "red", markerType: "triangle" },
\r
29 { x: new Date(2012, 03, 1), y: 460 },
\r
30 { x: new Date(2012, 04, 1), y: 450 },
\r
31 { x: new Date(2012, 05, 1), y: 500 },
\r
32 { x: new Date(2012, 06, 1), y: 480 },
\r
33 { x: new Date(2012, 07, 1), y: 480 },
\r
34 { x: new Date(2012, 08, 1), y: 410, indexLabel: "lowest", markerColor: "DarkSlateGrey", markerType: "cross" },
\r
35 { x: new Date(2012, 09, 1), y: 500 },
\r
36 { x: new Date(2012, 10, 1), y: 480 },
\r
37 { x: new Date(2012, 11, 1), y: 510 }
\r
45 var chart = new CanvasJS.Chart("chartContainer2", {
\r
47 text: "Share Value over a Year"
\r
50 animationEnabled: true,
\r
52 valueFormatString: "MMM"
\r
55 valueFormatString: "#0$"
\r
60 { x: new Date(2012, 01, 1), y: 71, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
\r
61 { x: new Date(2012, 02, 1), y: 55, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
\r
62 { x: new Date(2012, 03, 1), y: 50, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
\r
63 { x: new Date(2012, 04, 1), y: 65, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
\r
64 { x: new Date(2012, 05, 1), y: 85, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
\r
65 { x: new Date(2012, 06, 1), y: 68, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
\r
66 { x: new Date(2012, 07, 1), y: 28, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 },
\r
67 { x: new Date(2012, 08, 1), y: 34, indexLabel: "gain", markerType: "triangle", markerColor: "#6B8E23", markerSize: 12 },
\r
68 { x: new Date(2012, 09, 1), y: 24, indexLabel: "loss", markerType: "cross", markerColor: "tomato", markerSize: 12 }
\r
76 var chart = new CanvasJS.Chart("chartContainer3", {
\r
78 text: "Site Traffic",
\r
81 animationEnabled: true,
\r
84 gridColor: "Silver",
\r
85 tickColor: "silver",
\r
86 valueFormatString: "DD/MMM"
\r
94 gridColor: "Silver",
\r
98 verticalAlign: "bottom",
\r
99 horizontalAlign: "center"
\r
103 showInLegend: true,
\r
106 markerType: "square",
\r
109 { x: new Date(2010, 0, 3), y: 650 },
\r
110 { x: new Date(2010, 0, 5), y: 700 },
\r
111 { x: new Date(2010, 0, 7), y: 710 },
\r
112 { x: new Date(2010, 0, 9), y: 658 },
\r
113 { x: new Date(2010, 0, 11), y: 734 },
\r
114 { x: new Date(2010, 0, 13), y: 963 },
\r
115 { x: new Date(2010, 0, 15), y: 847 },
\r
116 { x: new Date(2010, 0, 17), y: 853 },
\r
117 { x: new Date(2010, 0, 19), y: 869 },
\r
118 { x: new Date(2010, 0, 21), y: 943 },
\r
119 { x: new Date(2010, 0, 23), y: 970 }
\r
124 showInLegend: true,
\r
125 name: "Unique Visits",
\r
130 { x: new Date(2010, 0, 3), y: 510 },
\r
131 { x: new Date(2010, 0, 5), y: 560 },
\r
132 { x: new Date(2010, 0, 7), y: 540 },
\r
133 { x: new Date(2010, 0, 9), y: 558 },
\r
134 { x: new Date(2010, 0, 11), y: 544 },
\r
135 { x: new Date(2010, 0, 13), y: 693 },
\r
136 { x: new Date(2010, 0, 15), y: 657 },
\r
137 { x: new Date(2010, 0, 17), y: 663 },
\r
138 { x: new Date(2010, 0, 19), y: 639 },
\r
139 { x: new Date(2010, 0, 21), y: 673 },
\r
140 { x: new Date(2010, 0, 23), y: 660 }
\r
148 var chart = new CanvasJS.Chart("chartContainer4", {
\r
149 zoomEnabled: false,
\r
150 animationEnabled: true,
\r
152 text: "Mobile Phone Subscriptions"
\r
155 valueFormatString: "0.0 bn",
\r
159 interlacedColor: "#F5F5F5",
\r
160 gridColor: "#D7D7D7",
\r
161 tickColor: "#D7D7D7"
\r
168 verticalAlign: "bottom",
\r
169 horizontalAlign: "center",
\r
171 fontFamily: "Lucida Sans Unicode"
\r
176 axisYType: "secondary",
\r
177 showInLegend: true,
\r
180 { x: new Date(2001, 0), y: 0 },
\r
181 { x: new Date(2002, 0), y: 0.001 },
\r
182 { x: new Date(2003, 0), y: 0.01 },
\r
183 { x: new Date(2004, 0), y: 0.05 },
\r
184 { x: new Date(2005, 0), y: 0.1 },
\r
185 { x: new Date(2006, 0), y: 0.15 },
\r
186 { x: new Date(2007, 0), y: 0.22 },
\r
187 { x: new Date(2008, 0), y: 0.38 },
\r
188 { x: new Date(2009, 0), y: 0.56 },
\r
189 { x: new Date(2010, 0), y: 0.77 },
\r
190 { x: new Date(2011, 0), y: 0.91 },
\r
191 { x: new Date(2012, 0), y: 0.94 }
\r
197 showInLegend: true,
\r
199 axisYType: "secondary",
\r
201 { x: new Date(2001, 00), y: 0.18 },
\r
202 { x: new Date(2002, 00), y: 0.2 },
\r
203 { x: new Date(2003, 0), y: 0.25 },
\r
204 { x: new Date(2004, 0), y: 0.35 },
\r
205 { x: new Date(2005, 0), y: 0.42 },
\r
206 { x: new Date(2006, 0), y: 0.5 },
\r
207 { x: new Date(2007, 0), y: 0.58 },
\r
208 { x: new Date(2008, 0), y: 0.67 },
\r
209 { x: new Date(2009, 0), y: 0.78 },
\r
210 { x: new Date(2010, 0), y: 0.88 },
\r
211 { x: new Date(2011, 0), y: 0.98 },
\r
212 { x: new Date(2012, 0), y: 1.04 }
\r
218 showInLegend: true,
\r
220 axisYType: "secondary",
\r
222 { x: new Date(2001, 00), y: 0.16 },
\r
223 { x: new Date(2002, 0), y: 0.17 },
\r
224 { x: new Date(2003, 0), y: 0.18 },
\r
225 { x: new Date(2004, 0), y: 0.19 },
\r
226 { x: new Date(2005, 0), y: 0.20 },
\r
227 { x: new Date(2006, 0), y: 0.23 },
\r
228 { x: new Date(2007, 0), y: 0.261 },
\r
229 { x: new Date(2008, 0), y: 0.289 },
\r
230 { x: new Date(2009, 0), y: 0.3 },
\r
231 { x: new Date(2010, 0), y: 0.31 },
\r
232 { x: new Date(2011, 0), y: 0.32 },
\r
233 { x: new Date(2012, 0), y: 0.33 }
\r
239 itemclick: function (e) {
\r
240 if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
\r
241 e.dataSeries.visible = false;
\r
244 e.dataSeries.visible = true;
\r
254 <script src="../../canvasjs.min.js"></script>
\r
255 <title>CanvasJS Example</title>
\r
259 <div id="chartContainer1" style="width: 45%; height: 300px;display: inline-block;"></div>
\r
260 <div id="chartContainer2" style="width: 45%; height: 300px;display: inline-block;"></div>
\r
262 <div id="chartContainer3" style="width: 45%; height: 300px;display: inline-block;"></div>
\r
263 <div id="chartContainer4" style="width: 45%; height: 300px;display: inline-block;"></div>
\r