I am really new to django and i am trying to build a small page where a chart with chart.js is shown. I want to load the javascript file static. I created a basic html-file called data_table.html and added a folder static where three files are in: data_table.js, styles.css and a picture bild.jpg. The html file is:
{% 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 picture are loaded. The picture is displayed and with the css file i can resize the picture. So that works i guess? The javascripts file looks as follows:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{% for d in data%}'{{d.label}}',{%endfor%}],
datasets: [{
label: '# of Votes',
data: [{% for d in data%}{{d.data}},{%endfor%}],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
The javascript file seems not to be loaded and no chart is displayed. Surprisingly if i am putting the javascript code in between the empty script tags in the body, the chart is displayed fine.
I also tried to put the
<script type="text/javascript" src="{% static 'data_table.js' %}"></script>
line at the sameplace where the empty script tag is right now. It also does not work.
No error is thrown. So what am i doing wrong?
Thank you in forward for your answers. In special if i am just doing a very stupid error.
The solution is as easy as the problem stupid was:
The JS file is laoded but the django template code is not executed. This is probably why its called static files. For people meeting the same problem: create another view which gives back json. Fetch it via Javascript code.
You should create 3 sub directories inside static directory css,js,img 1.You should save data_table.js file inside js folder..... 2.Then load static directory... {% load static %} 3.Include this line in html file
<script type="text/javascript" src="{% static 'js/data_table.js' %}"></script>
Your javascript file needs to be run after the page is fully loaded. You can either place the js file just before the body tag closes, or add an event listener called DOMContentLoaded, meaning the code will only run after the page is loaded
FIRST APPROACH
<html>
<head>
...
</head>
<body>
...
<!-- Place your js file just before body closes, when all elements are loaded -->
<script type="text/javascript" src="{% static 'data_table.js' %}"></script>
</body>
</html>
SECOND APPROACH
document.addEventListener('DOMContentLoaded', function()
{
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{% for d in data%}'{{d.label}}',{%endfor%}],
datasets: [{
label: '# of Votes',
data: [{% for d in data%}{{d.data}},{%endfor%}],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});