All geek questions in one place

Creating a chart in HTML5 using Charts.js

I want to draw a line chart with Chart.js, I followed the Getting Started section on Chart.js, but I still can’t draw even a sample chart. What is wrong with my code? According to NetBeans, everything is in order.

Here is 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 plugin → http://www.chartjs.org/docs/

Yours faithfully

Glenn

+6
source share
2 answers

You need to put this line:

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

Under your declaration. In addition, you do not define your parameters, so you also need to remove this from the call.

Finished, it should look like this:

 <!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>
+8
source

I have been since you asked this question. I hope you find the answer. If not, I am adding sample code to create a simple “line chart” using Chart.js. If you run this piece of code, you get a line chart.

If any other body was shaken for this to work, this could also help them. My breakpoint was the official chart.js page.

This is the line where I indicate the path to Chart.js:

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>
+10
source

Source: https://habr.com/ru/post/945947/

More articles:


All Articles