the full script for charts is concluded here:
<title>Chart.js demo</title> <script src='Chart.min.js'></script> <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 : [203,156,99,251,305,247] } ] } // 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>====================
- The element has two attribute : width and height that can control the size of chart in html without return to css.
- The element can be styled just like any normal image (margin, border, background…).
- it is closing tag.
- // these all set the fillStyle to 'orange'
ctx.fillStyle = 'orange'; ctx.fillStyle = '#FFA500'; ctx.fillStyle = 'rgb(255, 165, 0)'; ctx.fillStyle = 'rgba(255, 165, 0, 1)';
- ctx.fillText('Hello world', 10, 50);