5 <script type="text/javascript">
\r
6 window.onload = function () {
\r
7 var chart = new CanvasJS.Chart("chartContainer", {
\r
9 text: "Annual Expenses"
\r
11 animationEnabled: true,
\r
18 content: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span> <span style='\"'color: dimgrey;'\"'>${y}</span> "
\r
28 color: "rgba(54,158,173,.6)",
\r
30 { x: new Date(2012, 2), y: 30000 },
\r
31 { x: new Date(2012, 3), y: 35000 },
\r
32 { x: new Date(2012, 4), y: 30000 },
\r
33 { x: new Date(2012, 5), y: 30400 },
\r
34 { x: new Date(2012, 6), y: 20900 },
\r
35 { x: new Date(2012, 7), y: 31000 },
\r
36 { x: new Date(2012, 8), y: 30200 },
\r
37 { x: new Date(2012, 9), y: 30000 },
\r
38 { x: new Date(2012, 10), y: 33000 },
\r
39 { x: new Date(2012, 11), y: 38000 },
\r
40 { x: new Date(2013, 0), y: 38900 },
\r
41 { x: new Date(2013, 1), y: 39000 }
\r
48 name: "Office Cost",
\r
49 color: "rgba(134,180,2,.7)",
\r
51 { x: new Date(2012, 2), y: 20100 },
\r
52 { x: new Date(2012, 3), y: 16000 },
\r
53 { x: new Date(2012, 4), y: 14000 },
\r
54 { x: new Date(2012, 5), y: 18000 },
\r
55 { x: new Date(2012, 6), y: 18000 },
\r
56 { x: new Date(2012, 7), y: 21000 },
\r
57 { x: new Date(2012, 8), y: 22000 },
\r
58 { x: new Date(2012, 9), y: 25000 },
\r
59 { x: new Date(2012, 10), y: 23000 },
\r
60 { x: new Date(2012, 11), y: 25000 },
\r
61 { x: new Date(2013, 0), y: 26000 },
\r
62 { x: new Date(2013, 1), y: 25000 }
\r
69 name: "Entertainment",
\r
70 color: "rgba(194,70,66,.6)",
\r
72 { x: new Date(2012, 2), y: 10100 },
\r
73 { x: new Date(2012, 3), y: 6000 },
\r
74 { x: new Date(2012, 4), y: 3400 },
\r
75 { x: new Date(2012, 5), y: 4000 },
\r
76 { x: new Date(2012, 6), y: 9000 },
\r
77 { x: new Date(2012, 7), y: 3900 },
\r
78 { x: new Date(2012, 8), y: 4200 },
\r
79 { x: new Date(2012, 9), y: 5000 },
\r
80 { x: new Date(2012, 10), y: 14300 },
\r
81 { x: new Date(2012, 11), y: 12300 },
\r
82 { x: new Date(2013, 0), y: 8300 },
\r
83 { x: new Date(2013, 1), y: 6300 }
\r
90 color: "rgba(127,96,132,.6)",
\r
91 name: "Maintenance",
\r
93 { x: new Date(2012, 2), y: 1700 },
\r
94 { x: new Date(2012, 3), y: 2600 },
\r
95 { x: new Date(2012, 4), y: 1000 },
\r
96 { x: new Date(2012, 5), y: 1400 },
\r
97 { x: new Date(2012, 6), y: 900 },
\r
98 { x: new Date(2012, 7), y: 1000 },
\r
99 { x: new Date(2012, 8), y: 1200 },
\r
100 { x: new Date(2012, 9), y: 5000 },
\r
101 { x: new Date(2012, 10), y: 1300 },
\r
102 { x: new Date(2012, 11), y: 2300 },
\r
103 { x: new Date(2013, 0), y: 2800 },
\r
104 { x: new Date(2013, 1), y: 1300 }
\r
110 showInLegend: true,
\r
111 color: "rgba(127,96,255,.6)",
\r
114 { x: new Date(2012, 2), y: 15475 },
\r
115 { x: new Date(2012, 3), y: 14900 },
\r
116 { x: new Date(2012, 4), y: 12100 },
\r
117 { x: new Date(2012, 5), y: 13450 },
\r
118 { x: new Date(2012, 6), y: 12200 },
\r
119 { x: new Date(2012, 7), y: 14225 },
\r
120 { x: new Date(2012, 8), y: 14400 },
\r
121 { x: new Date(2012, 9), y: 16250 },
\r
122 { x: new Date(2012, 10), y: 17900 },
\r
123 { x: new Date(2012, 11), y: 19400 },
\r
124 { x: new Date(2013, 0), y: 19000 },
\r
125 { x: new Date(2013, 1), y: 17900 }
\r
136 <script src="../../canvasjs.min.js"></script>
\r
137 <title>CanvasJS Example</title>
\r
140 <div id="chartContainer" style="height: 400px; width: 100%;">
\r