4 <title>CanvasJS Example - jQuery Line Chart</title>
\r
5 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
\r
6 <script src="../../jquery.canvasjs.min.js"></script>
\r
7 <script type="text/javascript">
\r
9 //Better to construct options first and then pass it as a parameter
\r
12 animationEnabled: true,
\r
14 text: "Fertility Rate Vs Life Expectancy in different countries - 2009"
\r
17 title: "Life Expectancy",
\r
21 title: "Fertility Rate"
\r
26 verticalAlign: "bottom",
\r
27 horizontalAlign: "left"
\r
33 legendText: "Size of Bubble Represents Population",
\r
35 legendMarkerType: "circle",
\r
36 legendMarkerColor: "grey",
\r
37 toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong>Life Exp</strong> {x} yrs<br/> <strong>Fertility Rate</strong> {y}<br/> <strong>Population</strong> {z}mn",
\r
40 { x: 78.1, y: 2.00, z: 306.77, name: "US" },
\r
41 { x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },
\r
42 { x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },
\r
43 { x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },
\r
44 { x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },
\r
45 { x: 68.6, y: 1.54, z: 141.91, name: "Russia" },
\r
46 { x: 82.9, y: 1.37, z: 127.55, name: "Japan" },
\r
47 { x: 79.8, y: 1.36, z: 81.90, name: "Australia" },
\r
48 { x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },
\r
49 { x: 80.1, y: 1.94, z: 61.81, name: "UK" },
\r
50 { x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },
\r
51 { x: 81.5, y: 1.93, z: 21.95, name: "Australia" },
\r
52 { x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },
\r
53 { x: 47.9, y: 6.42, z: 33.42, name: "Afganistan" },
\r
54 { x: 50.3, y: 5.58, z: 18.55, name: "Angola" }
\r
61 $("#chartContainer1").CanvasJSChart(options);
\r
65 //Better to construct options first and then pass it as a parameter
\r
68 text: "Email Analysis"
\r
70 animationEnabled: true,
\r
75 title: "Number of Messages"
\r
78 verticalAlign: "bottom",
\r
79 horizontalAlign: "center"
\r
85 legendMarkerType: "square",
\r
87 color: "rgba(40,175,101,0.6)",
\r
91 { x: new Date(2013, 0, 1, 00, 00), label: "midnight", y: 7 },
\r
92 { x: new Date(2013, 0, 1, 01, 00), y: 8 },
\r
93 { x: new Date(2013, 0, 1, 02, 00), y: 5 },
\r
94 { x: new Date(2013, 0, 1, 03, 00), y: 7 },
\r
95 { x: new Date(2013, 0, 1, 04, 00), y: 6 },
\r
96 { x: new Date(2013, 0, 1, 05, 00), y: 8 },
\r
97 { x: new Date(2013, 0, 1, 06, 00), y: 12 },
\r
98 { x: new Date(2013, 0, 1, 07, 00), y: 24 },
\r
99 { x: new Date(2013, 0, 1, 08, 00), y: 36 },
\r
100 { x: new Date(2013, 0, 1, 09, 00), y: 35 },
\r
101 { x: new Date(2013, 0, 1, 10, 00), y: 37 },
\r
102 { x: new Date(2013, 0, 1, 11, 00), y: 29 },
\r
103 { x: new Date(2013, 0, 1, 12, 00), y: 34, label: "noon" },
\r
104 { x: new Date(2013, 0, 1, 13, 00), y: 38 },
\r
105 { x: new Date(2013, 0, 1, 14, 00), y: 23 },
\r
106 { x: new Date(2013, 0, 1, 15, 00), y: 31 },
\r
107 { x: new Date(2013, 0, 1, 16, 00), y: 34 },
\r
108 { x: new Date(2013, 0, 1, 17, 00), y: 29 },
\r
109 { x: new Date(2013, 0, 1, 18, 00), y: 14 },
\r
110 { x: new Date(2013, 0, 1, 19, 00), y: 12 },
\r
111 { x: new Date(2013, 0, 1, 20, 00), y: 10 },
\r
112 { x: new Date(2013, 0, 1, 21, 00), y: 8 },
\r
113 { x: new Date(2013, 0, 1, 22, 00), y: 13 },
\r
114 { x: new Date(2013, 0, 1, 23, 00), y: 11 }
\r
119 showInLegend: true,
\r
120 legendMarkerType: "square",
\r
122 color: "rgba(0,75,141,0.7)",
\r
127 { x: new Date(2013, 0, 1, 00, 00), label: "midnight", y: 12 },
\r
128 { x: new Date(2013, 0, 1, 01, 00), y: 10 },
\r
129 { x: new Date(2013, 0, 1, 02, 00), y: 3 },
\r
130 { x: new Date(2013, 0, 1, 03, 00), y: 5 },
\r
131 { x: new Date(2013, 0, 1, 04, 00), y: 2 },
\r
132 { x: new Date(2013, 0, 1, 05, 00), y: 1 },
\r
133 { x: new Date(2013, 0, 1, 06, 00), y: 3 },
\r
134 { x: new Date(2013, 0, 1, 07, 00), y: 6 },
\r
135 { x: new Date(2013, 0, 1, 08, 00), y: 14 },
\r
136 { x: new Date(2013, 0, 1, 09, 00), y: 15 },
\r
137 { x: new Date(2013, 0, 1, 10, 00), y: 21 },
\r
138 { x: new Date(2013, 0, 1, 11, 00), y: 24 },
\r
139 { x: new Date(2013, 0, 1, 12, 00), y: 28, label: "noon" },
\r
140 { x: new Date(2013, 0, 1, 13, 00), y: 26 },
\r
141 { x: new Date(2013, 0, 1, 14, 00), y: 17 },
\r
142 { x: new Date(2013, 0, 1, 15, 00), y: 23 },
\r
143 { x: new Date(2013, 0, 1, 16, 00), y: 28 },
\r
144 { x: new Date(2013, 0, 1, 17, 00), y: 22 },
\r
145 { x: new Date(2013, 0, 1, 18, 00), y: 10 },
\r
146 { x: new Date(2013, 0, 1, 19, 00), y: 9 },
\r
147 { x: new Date(2013, 0, 1, 20, 00), y: 6 },
\r
148 { x: new Date(2013, 0, 1, 21, 00), y: 4 },
\r
149 { x: new Date(2013, 0, 1, 22, 00), y: 12 },
\r
150 { x: new Date(2013, 0, 1, 23, 00), y: 14 }
\r
155 $("#chartContainer2").CanvasJSChart(options);
\r
159 //Better to construct options first and then pass it as a parameter
\r
162 text: "Cumulative App downloads on iTunes And Play Store"
\r
164 animationEnabled: true,
\r
166 includeZero: false,
\r
168 valueFormatString: "#0,.",
\r
172 title: "Months After Launch"
\r
176 content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span> {y}"
\r
181 type: "splineArea",
\r
182 showInLegend: true,
\r
187 { x: 3, y: 10000 },
\r
188 { x: 4, y: 14000 },
\r
189 { x: 5, y: 23000 },
\r
190 { x: 6, y: 31000 },
\r
191 { x: 7, y: 42000 },
\r
192 { x: 8, y: 56000 },
\r
193 { x: 9, y: 64000 },
\r
194 { x: 10, y: 81000 },
\r
195 { x: 11, y: 105000 }
\r
199 type: "splineArea",
\r
201 showInLegend: true,
\r
206 { x: 7, y: 14000 },
\r
207 { x: 8, y: 21000 },
\r
208 { x: 9, y: 31000 },
\r
209 { x: 10, y: 46000 },
\r
210 { x: 11, y: 61000 }
\r
216 $("#chartContainer3").CanvasJSChart(options);
\r
220 //Better to construct options first and then pass it as a parameter
\r
223 text: "Gaming Consoles Sold in 2012"
\r
225 animationEnabled: true,
\r
227 verticalAlign: "bottom",
\r
228 horizontalAlign: "center"
\r
233 showInLegend: true,
\r
234 toolTipContent: "{y} - <strong>#percent%</strong>",
\r
236 { y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },
\r
237 { y: 2175498, legendText: "Wii", indexLabel: "Wii" },
\r
238 { y: 3125844, legendText: "360", exploded: true, indexLabel: "Xbox 360" },
\r
239 { y: 1176121, legendText: "DS", indexLabel: "Nintendo DS" },
\r
240 { y: 1727161, legendText: "PSP", indexLabel: "PSP" },
\r
241 { y: 4303364, legendText: "3DS", indexLabel: "Nintendo 3DS" },
\r
242 { y: 1717786, legendText: "Vita", indexLabel: "PS Vita" }
\r
247 $("#chartContainer4").CanvasJSChart(options);
\r
252 <div id="chartContainer1" style="width: 45%; height: 400px;display: inline-block;"></div>
\r
253 <div id="chartContainer2" style="width: 45%; height: 400px;display: inline-block;"></div><br />
\r
254 <div id="chartContainer3" style="width: 45%; height: 400px;display: inline-block;"></div>
\r
255 <div id="chartContainer4" style="width: 45%; height: 400px;display: inline-block;"></div>
\r