CODEWITHSUNDEEP
javascriptchart.js
Bob
Bob

Reputation: 15

How do I create a chartjs bar chart?

The following code is supposed to create a new bar chart but I'm getting an "Uncaught TypeError: Cannot set property 'data' of undefined" which points to the first line (var chart = new Chart etc)

var chart = new Chart(document.getElementById("chart1"), {
            type: 'bar',
            data: {
                labels: ["Label1", "Label2", "Label3", "Label4"],
                datasets: [{
                    label: "Num incidents",
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    data: [89,57,25,28]
                }],
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        })

I have a html file with the following:

<head>
<meta charset="utf-8"/>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"> 
</script>
</head>

<div class="column">
  <canvas id="chart1"></canvas>
</div>

Do i need to include the chartjs api in the js file as well?
Or do i need to call the chart somewhere in my js file?

Upvotes: 1

Views: 308

Answers (2)

Nicky
Nicky

Reputation: 51

Works for me. It must be just the order.

Try this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js" type="application/javascript"></script>
    </head>
    <body>
        <div class="column">
          <canvas id="chart1"></canvas>
        </div>
        <script type="application/javascript">
            var chart = new Chart(document.getElementById("chart1"), {
                type: 'bar',
                data: {
                    labels: ["Label1", "Label2", "Label3", "Label4"],
                    datasets: [{
                        label: "Num incidents",
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        data: [89,57,25,28]
                    }],
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        </script>
    </body>
</html>

Or play here: https://jsfiddle.net/2d9kfegj/2/

Upvotes: 1

pr1nc3
pr1nc3

Reputation: 8338

Inside your html file:

<script src="myJavascript.js"> </script>

The problem is that you don't include your js file in your html. Make sure you include your js file at the end of your html like:

  <head>
    <meta charset="utf-8"/>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
    </script>

</head>

<div class="column">
    <canvas id="chart1"></canvas>
</div>

<script src="myJavascript.js"></script>

After that it will work just fine. You need to load your page first so your JS knows where to put the chart that is created.

In jquery you can use document.ready function but since you don't have a jquery tag i will avoid to mention to put a listener for page ready and suggest to just put it in the end for your ease.

Upvotes: 0

Related Questions