Thursday, August 17, 2017

6. Using Chart.js library

The easiest ways of creating a bar chart is using a library.


Here the Chart.js library is used to create a Bar Chart like in the previous example.


// 6. Using Chart.js library

var ctx = document.getElementById('myCanvas').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [ "California", "Texas", "Florida", "New York",
                  "Illinois", "Pennsylvania", "Ohio", "Georgia",
                  "North Carolina", "Michigan" ],
        datasets: [{
            label: "Ten largest states",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [ 39.250017, 27.862596, 20.612439, 19.745289, 12.801539,
                    12.784227, 11.646273, 10.310371, 10.146788, 9.928301]
        }]
    },
    options: {}
});

The html file links to the Chart.js library:


<!DOCTYPE HTML>
<html>
<head>
  <style>
    canvas {
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="1200" height="600"></canvas>
  <script src="Chart.js"></script>
  <script src="main.js"></script>
</body>
</html>

Output:


Posted by at

1 comment:

  1. SergeyMarch 26, 2019 at 3:36 PM

    Software developers in Ukraine have a strong skill set, they are tech savvy, up to date with recent innovations and have an independent thinking. Moreover, Ukraine offers intermediate prices of $25-$49/hour for its software developers in comparison to the engineers from other eastern European countries. Learn more about Ukrainian programmers.

    ReplyDelete

Subscribe to: Post Comments (Atom)