-
Notifications
You must be signed in to change notification settings - Fork 143
060_produce_simple_charts
Francois Vancoppenolle edited this page Jun 18, 2016
·
1 revision
Previous Page Next Page Table of contents
To produce a simple chart, several parts are necessary in your HTML page :
- Include the javascript file (line 2)
- Define your data (line 3->23)
- Define a canvas (line 29)
- Produce the chart (line 30 -> 34)
1 <!--[if lte IE 8]><SCRIPT src='excanvas.js'></script><![endif]-->
2 <SCRIPT src='ChartNew.js'></script>
3 <SCRIPT>
4 var linedata = {
5 labels : ["V1","V2","V3","V4"],
6 datasets : [
7 {
8 fillColor : "rgba(220,220,220,0.5)",
9 strokeColor : "rgba(220,220,220,1)",
10 pointColor : "rgba(220,220,220,1)",
11 pointStrokeColor : "rgba(220,220,220,1)",
12 data : [105,1234,103412,15]
13 },
14 {
15 fillColor : "rgba(151,187,205,0.5)",
16 strokeColor : "rgba(151,187,205,1)",
17 pointColor : "rgba(151,187,205,1)",
18 pointStrokeColor : "rgba(151,187,205,1)",
19 data : [2341,763,122,4]
20 }
21 ]
22 }
23 </SCRIPT>
24 <html>
25 <head>
26 <title>Sample line chart</title>
27 </head>
28 <body>
29 <canvas id="canvas" height="600" width="1000"></canvas>
30 <script>
31 window.onload = function() {
32 new Chart(document.getElementById("canvas").getContext("2d")).Line(linedata);
33 }
34 </script>
35 </body>
36 </html>