How to add your js code to html, with files?

Chart.js is where the new Chart() constructor would be defined. In order to use it within your own JS code, you’d likely need to use a CDN to connect/import the chart.js files into your HTML before you load your custom .js file.

2 Likes

Haha I didn’t mean to reply to myself on that one :laughing:

2 Likes

Is CDN this <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>?

I added it to the html, but it’s still not working.
I’m having problem to add the JS code connected with the HTML code I think, because I have done the tutorial chart and it’s not showing up on my HTML, when looking in the browser.

This one came up for me.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>

Did you grab the link from here?

1 Like

I took from

Make sure it is loaded before the script that is using it.

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="./yourCode.js"></script>
3 Likes

I have it at line 2 in the html code and the js file code at line 9 inside the body.

This is the JS code

var LC = document.getElementById('LineChart').getContext('2d');

var chart = new Chart(LC, {
    type: 'line',
    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]
  }]
},
    options: {}
});

Do you have the canvas element in the HTML?

The example code they give does work.

1 Like

You should be getting some sort of error in the browser console, if nothing is rendering to the screen, I would imagine.

1 Like

I have the canvas, the problem I think is the

var LC = document.getElementById('LineChart').getContext('2d');

Did you check the console?

Are there any error messages?

1 Like

I have problem with

var LC = document.getElementById(‘LineChart’).getContext(‘2d’);
^

ReferenceError: document is not defined

Is your script tag before or after your HTML content?

1 Like

My script for the JS file is at line 11, canvas is at line 12.

Right, but where is the LineChart element in your HTML?

That error suggests that you’re loading your JavaScript before your HTML is loaded, which is why document is undefined.

1 Like

Can we see the html?

1 Like

LineChart is the id of the canvas.

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<link rel="AnimatedSpeedLineChart.css"></link>

<header>
<h1 id="H1A">Line Graph</h1>
</header>


<body id = "B1a">
<script src = "LineC.js"></script>
<canvas id = "LineChart", height = 400px, width = 1832px></canvas>
</body>

I just threw it into vs code and it is not recognizing the lineChart id.

Are the error messages in your editor getting highlighted like in mine?

1 Like

Switch them around.

<canvas id = "LineChart", height = 400px, width = 1832px></canvas>
<script src = "LineC.js"></script>
2 Likes