Making Chart with Chart.js

Hello everyone back to individual review in week 9. Last week we did our first sprint review about our result in first sprint. Everything was fine but with a little problem such as deployment. Anyway here i’m going to talk about chart.js. Last sprint planning i got task about to make statistic page. This page is contains information about how many ads that merchant broadcast and received by customer. I’m use chart to make visualization about it. And my scrum master suggest to try chart.js. So, i decide to learn it because i dont know any chart source code.

First, open http://www.chartjs.org/docs/latest/. We can see the documentation about chart.js. There are some way to install chart.js such as using bower, npm, cdn, etc. In here, im using cdn because it easier for me. https://cdnjs.com/libraries/Chart.js here is chart.js library. To use it in html page we can just put
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
in our html file.

Next,there are some file that we need to create : statistic.html, statistic.js, and style.css. add this code to our html file.

<canvas id="myChart"></canvas>

then paste it to .js file

window.onload = function() {
  var ctx = document.getElementById("myChart");
  var lineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
        label: "2015",
        data: [10, 8, 6, 5, 12, 8, 16, 17, 6, 7, 6, 10]
      }]
    }
  })
}

and this is the result