I am a novice at Chart JS. I am trying to learn from example. I created the following HTML page with CSV data that should be plotted using ChartJS... but it is blank! What is going wrong?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Chart.js Chart</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"> </script>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
plugins: [ChartDataSource],
options: {
plugins: {
datasource: {
url: 'precipitation.csv'
}
}
}
});
</script>
</body>
</html>
The CSV file has been paste binned here for your reference.
I am using the chartjs-plugin-datasource on this git.
The problem didn't come from your code. Your project trie to access data from an external services and is blocked by CORS policy. The simplest way to avoid this error is to execute your code in a local server.You can use this simple npm package (serve) or other to serve your code locally.
With the serve package the process is quite simple.
Install serve package via NPM
npm i -g serve
Go to the root of your project and launch serve
serve
After the local server is initialise, you can access to it in your browser via the local ip provided.
Moreover, I recommend you to use let or const (means that the identifier can’t be reassigned) instead of var since ES2015.
In the documentation, they have the datasource property nested like this.
options: {
plugins: {
datasource: {
url: 'precipitation.csv'
}
}
}
Does that make a difference?