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.
Haha I didn’t mean to reply to myself on that one
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?
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>
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.
You should be getting some sort of error in the browser console, if nothing is rendering to the screen, I would imagine.
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?
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?
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.
Can we see the html?
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?
Switch them around.
<canvas id = "LineChart", height = 400px, width = 1832px></canvas>
<script src = "LineC.js"></script>