Menu
I am trying to use the charts.js to create a simple line graph. When I run the code below no chart appears. What am I doing wrong? I am following this tutorial http://www.chartjs.org/docs/latest/getting-started/
<html>
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="myChart" width="600" height="400"></canvas>
<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>
909
Data visualization methods can help group your data in one place and show it in a way that is easy to understand for all, especially in the form of charts. AngularJS provides integration with chart js, which is a popular medium for using visualization tools on your data.
Let's get started using Chart. js! First, we need to have a canvas in our page. It's recommended to give the chart its own container for responsiveness.
js is a free, open-source JavaScript library for data visualization, which supports eight chart types: bar, line, area, pie (doughnut), bubble, radar, polar, and scatter.
Is it possible to use chart. js for a desktop/mobile application using html that connects through an esp8266 access point or does it need a wifi connection? @marionboynton, CanvasJS is a standalone library that can work offline without any internet connection.
You're using version 0.2.0. Works fine if you use the version in the demo (2.4.0) or the newest version (2.6.0). The CDN link for that is https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<h1>Chart.js Sample</h1>
<canvas id="myChart" width="600" height="400"></canvas>
<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: {
responsive:false,
maintainAspectRatio: false
}
});
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
