As a newcomer to Django, I'm working on creating a small webpage that displays a chart using Chart.js. My goal is to load the JavaScript file statically. To achieve this, I have set up a basic HTML file named data_table.html and included a "static" folder containing three files: data_table.js, styles.css, and an image named bild.jpg.
{% load static %}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="{% static 'styles.css' %}" type="text/css">
<script type="text/javascript" src="{% static 'data_table.js' %}"></script>
<title>Data viewer</title>
</head>
<body>
<canvas id="myChart" width="200" height="200"></canvas>
<script>
</script>
<p class="text">Picture:</p>
<br>
<img class="img" src="{% static 'bild.jpg' %}" alt="My image">
</body>
</html>
The CSS file and the image are successfully loaded, with the picture being displayed and resizable through the CSS file. Moving on to the JavaScript file, it's structured as shown below:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
// Chart configuration details here
});
However, despite including the JavaScript file in the correct location, the chart doesn't render. Strangely, when I embed the JavaScript code between the empty script tags in the body of the HTML file, the chart displays properly. I've also attempted moving the
<script type="text/javascript" src="{% static 'data_table.js' %}"></script>I appreciate any guidance or solutions you can offer. Especially if it turns out I made a simple oversight. Thank you in advance for your help!