2017/03/25

How to create a simple bar chart using Chart.js

Below are some examples on how to create charts using Chart.js

For info. on how to obtain the latest Chart.js, please refer to the link below.
http://stackoverflow.com/documentation/chart.js/4274/getting-started-with-chart-js#t=201703251048525532779

Bar Chart Sample Code

Note, the code below uses the CDN version of Chart.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
  <head>
    <!-- For latest CDN version of Chart.js, visit https://cdnjs.com/libraries/Chart.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
  </head>

  <body>
    <canvas id="myChart" width="400" height="250"></canvas>

    <script>

      var canvas = document.getElementById('myChart');
      var data = {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
              {
                  label: "My First dataset",
                  backgroundColor: "rgba(255,99,132,0.2)",
                  borderColor: "rgba(255,99,132,1)",
                  borderWidth: 2,
                  hoverBackgroundColor: "rgba(255,99,132,0.4)",
                  hoverBorderColor: "rgba(255,99,132,1)",
                  data: [65, 59, 30, 81, 56, 55, 40],
              }
          ]
      };
    
      var option = {
              animation: {
         duration:5000
              },
              //responsive: false
      };

      var myBarChart = Chart.Bar(canvas,{
       data:data,
        options:option
      });
      
    </script>
  </body>
</html>

Result


Note that the size of the chart is beyond the width and height specified in <canvas id="myChart" width="400" height="250"></canvas>. The solution is to add responsive: false in the option field (see below pic).


Result

The chart is now responding to the width and height parameters.

--------------------------------------------------------------------------------------------------------------------------

Below is another example.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
</head>

<body>
    <canvas id="myChart" width="400" height="200"></canvas>

    <script>
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                      labels: ["Group 1", "Group 2", "Group 3"],
                      datasets: [{
                          label: 'Groups',
                          data: [12, 19, 3]
                      }]
                  },
                  options: {
                    responsive: false
                  }
        });
    </script>

</body>
</html>

Result

References:

Chart.js

Creating Beautiful Charts with Chart.js
https://www.sitepoint.com/creating-beautiful-charts-chart-js/

An Introduction to Chart.js 2.0 — Six Simple Examples
https://www.sitepoint.com/introduction-chart-js-2-0-six-examples/

Getting started with chart.js
http://stackoverflow.com/documentation/chart.js/4274/getting-started-with-chart-js#t=201703251048525532779

CDNJS Version of Chart.js
https://cdnjs.com/libraries/Chart.js

c3.js

How to Create Website Graphs from CSV Files with c3.js and PapaParse
https://youtu.be/1OK4TJfCzdY
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)