CODEWITHSUNDEEP
javascriptchart.js
dearN
dearN

Reputation: 1276

ChartJS: Blank page | what is going wrong?

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.

Upvotes: 0

Views: 1199

Answers (2)

Thibault Walterspieler
Thibault Walterspieler

Reputation: 2402

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.

Upvotes: 1

Kristoffer Karlsson
Kristoffer Karlsson

Reputation: 182

In the documentation, they have the datasource property nested like this.

options: {
    plugins: {
        datasource: {
            url: 'precipitation.csv'
        }
    }
}

Does that make a difference?

Upvotes: 0

Related Questions