|
|
| (19 intermediate revisions by the same user not shown) |
| Line 8: |
Line 8: |
| <title>Chart.js demo</title> | | <title>Chart.js demo</title> |
| <!-- import plugin script --> | | <!-- import plugin script --> |
| <script src='http://dl.dropboxusercontent.com/u/1874620/Chart.js'></script> | | <script src='http://dl.dropboxusercontent.com/u/1874620/ChartNew.js'></script> |
| </head>
| | <script src='http://dl.dropboxusercontent.com/u/1874620/WBR_scripts/WJG_Chart_Practice.js'></script> |
| <body>
| |
| <!-- line chart canvas element -->
| |
| <canvas id="buyers" width="600" height="400"></canvas>
| |
| <!-- pie chart canvas element -->
| |
| <canvas id="countries" width="600" height="400"></canvas>
| |
| <!-- bar chart canvas element -->
| |
| <canvas id="income" width="600" height="400"></canvas>
| |
| <script>
| |
| // line chart data
| |
| var buyerData = {
| |
| labels : ["January","February","March","April","May","June"],
| |
| datasets : [
| |
| {
| |
| fillColor : "rgba(172,194,132,0.4)",
| |
| strokeColor : "#ACC26D",
| |
| pointColor : "#fff",
| |
| pointStrokeColor : "#9DB86D",
| |
| data : [68,55,75,70,73,76]
| |
| }
| |
| ]
| |
| }
| |
| // get line chart canvas
| |
| var buyers = document.getElementById('buyers').getContext('2d');
| |
| // draw line chart
| |
| new Chart(buyers).Line(buyerData);
| |
| // pie chart data
| |
| var pieData = [
| |
| {
| |
| value: 20,
| |
| color:"#878BB6"
| |
| },
| |
| {
| |
| value : 40,
| |
| color : "#4ACAB4"
| |
| },
| |
| {
| |
| value : 10,
| |
| color : "#FF8153"
| |
| },
| |
| {
| |
| value : 30,
| |
| color : "#FFEA88"
| |
| }
| |
| ];
| |
| // pie chart options
| |
| var pieOptions = {
| |
| segmentShowStroke : false,
| |
| animateScale : true
| |
| }
| |
| // get pie chart canvas
| |
| var countries= document.getElementById("countries").getContext("2d");
| |
| // draw pie chart
| |
| new Chart(countries).Pie(pieData, pieOptions);
| |
| // bar chart data
| |
| var barData = {
| |
| labels : ["January","February","March","April","May","June"],
| |
| datasets : [
| |
| {
| |
| fillColor : "#48A497",
| |
| strokeColor : "#48A4D1",
| |
| data : [456,479,324,569,702,600]
| |
| },
| |
| {
| |
| fillColor : "rgba(73,188,170,0.4)",
| |
| strokeColor : "rgba(72,174,209,0.4)",
| |
| data : [364,504,605,400,345,320]
| |
| }
| |
| ]
| |
| }
| |
| // get bar chart canvas
| |
| var income = document.getElementById("income").getContext("2d");
| |
| // draw bar chart
| |
| new Chart(income).Bar(barData);
| |
| </script>
| |
| </body> | | </body> |
| </html> | | </html> |
| </includeonly> | | </includeonly> |