Creating a chart in HTML5 with Charts.js

Question

I want to draw a line chart with Chart.js, I followed the 'Getting started' section of Chart.js but I still am not able to draw even the example chart. What is wrong with my code? According to NetBeans it's all ok ..

Here's the code:

<!doctype html>
    <html lang="nl">
        <head>
            <meta charset="utf-8">
            <title>Become a member</title>
            <script type="text/javascript" src="Chart.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        </head>

        <body>
            <script type="text/javascript">

                window.onLoad = function() {
                    init();
                };

                function init() {
                    var ctx = $("#myChart").get(0).getContext("2d");
                    var myNewChart = new Chart(ctx).Line(data, options);

                    var data = {
                        labels: ["January", "February", "March", "April", "May", "June", "July"],
                        datasets: [
                            {
                                fillColor: "rgba(220,220,220,0.5)",
                                strokeColor: "rgba(220,220,220,1)",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "#fff",
                                data: [65, 59, 90, 81, 56, 55, 40]
                            },
                            {
                                fillColor: "rgba(151,187,205,0.5)",
                                strokeColor: "rgba(151,187,205,1)",
                                pointColor: "rgba(151,187,205,1)",
                                pointStrokeColor: "#fff",
                                data: [28, 48, 40, 19, 96, 27, 100]
                            }
                        ]
                    }
                }

            </script>
            <div>
                <section>
                    <article>
                        <canvas id="myChart" width="400" height="400">
                        </canvas>
                    </article>
                </section>
            </div>
        </body>
    </html>

Any help is more than welcome!

Link to the plug-in -> http://www.chartjs.org/docs/

Kind regards

Glenn

You don't seem to have any reference to jQuery, although it is used inside your page: — Filippos Karapetis
– Filippos Karapetis, Commented May 27, 2013 at 15:05
Filippos, thank you for your comment, it seems I missed it when I copied my code. My link to jQuery is : <script src="ajax.googleapis.com/ajax/libs/jquery/1.9.1/…> — Glenn
– Glenn, Commented May 27, 2013 at 15:15

kartik · Accepted Answer · 2015-10-20 21:56:02Z

It's been I while since you asked this question. I hope you have found the answer. If not, I am attaching a sample code to generate a simple "Line chart" using Chart.js. If you run this code snippet you will get a line chart.

If any body else fumbled on getting this working, it might help them too. My reference point was chart.js offical page.

This the line where I give the path to Chart.js:

I hope this helps!

Thanks, Kay

<!DOCTYPE HTML>
<html>

<head></head>

<body>
  <canvas id="c" width="500" height="500"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <script>
    var ctx = document.getElementById("c").getContext("2d");
    var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
      }, {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
      }]
    };
    var MyNewChart = new Chart(ctx).Line(data);
  </script>
</body>

</html>

have you any idea relevant click on point and generate modal popup ?

Mathlight · Accepted Answer · 2016-02-27 16:15:23Z

10

You need to place this line:

var myNewChart = new Chart(ctx).Line(data, options);

Beneath your declaration. Additionally, you're not defining your options so you need to also remove that from the call.

Completed, it should look like:

<!doctype html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>Become a member</title>
        <script type="text/javascript" src="Chart.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

    <body>
        <script type="text/javascript">

            window.onload = function() { 
                init();
            };

            function init() {
                var ctx = $("#myChart").get(0).getContext("2d");

                var data = {
                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                    datasets: [
                        {
                            fillColor: "rgba(220,220,220,0.5)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            data: [65, 59, 90, 81, 56, 55, 40]
                        },
                        {
                            fillColor: "rgba(151,187,205,0.5)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            data: [28, 48, 40, 19, 96, 27, 100]
                        }
                    ]
                }

                var myNewChart = new Chart(ctx).Line(data);
            }

        </script>
        <div>
            <section>
                <article>
                    <canvas id="myChart" width="400" height="400">
                    </canvas>
                </article>
            </section>
        </div>
    </body>
</html>

edited Feb 27, 2016 at 16:15

Mathlight

6,73318 gold badges66 silver badges109 bronze badges

answered Jun 16, 2013 at 7:19

Sam

9767 silver badges22 bronze badges

2 Comments

Dimitry K Over a year ago

Somehow this window.onLoad never gets executed when I try it. But putting init() into body tag works: <body onLoad="init()">

VjyV Over a year ago

have you any idea relevant click on point and generate modal popup ?

Stevan Tosic · Accepted Answer · 2019-11-10 23:18:59Z

According to the new version of chartjs, version 2.8.0.

official documentation

This is a working code example

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45]
    }]
  },

  // Configuration options go here
  options: {}
});
</script>
</body>
</html>

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45]
    }]
  },

  // Configuration options go here
  options: {}
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart"></canvas>

Collectives™ on Stack Overflow

Creating a chart in HTML5 with Charts.js

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related