2017/03/26

How to create a simple line chart using Chart.js

Here is a quick example of how to make a line chart using Chart.js.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
!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",
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 5,
            pointHitRadius: 10,
            data: [65, 59, 80, 0, 56, 55, 40],
        }
    ]
    };

    var option = {
        showLines: true,
        responsive: false
    };
    var myLineChart = Chart.Line(canvas,{
        data:data,
    options:option
    });
      
    </script>
  </body>
</html>

Result


Reference

https://jsfiddle.net/red_stapler/4zwyn6vd/4/
Posted by at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)