Creating a chart in HTML5 with Charts.js

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>


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>

Tags:

Charts

Html5 Canvas

Recent Posts