We Keep Coding

Creating charts in django - errors on javascript

I want to create a chart with some data from my db, I did the same think like I saw on the internet, but I got a few errors
base.html
<script>
$(document).ready(function(){
{% block scripts %} {% endblock scripts %}
})
</script>
The errors are on the row {% block scripts %} {% endblock scripts %}
Why it's showing me this errors? I am new in Js...
Here is the video that I watched: https://www.youtube.com/watch?v=B4Vmm3yZPgc
Edited
results.html
{% block scripts %}
<script>
$(document).ready(function(){
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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
}
}
}
});
});
</script>
{% endblock scripts %}

Try this
base.html
<script>
$(document).ready(function(){
{% block scripts %} {% endblock scripts %}
});
</script>
Results.html
{% block scripts %}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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)',
'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)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
{% endblock scripts %}

How do you use user input as data values in chart.js?

I'm creating a mood tracker that allows people to input the number of days they feel a certain mood. The HTML form accepts the numbers from 0-7, and accordingly I want the pie chart to dynamically shift to reflect that value. When I tried inserting the value in the data array, the whole chart disappears instead. I can't seem to figure out what the issue is, this is my code for reference:
``div class="form-container" style="float: left; margin-left: 170px; margin-top: 13px; text-align: center;">
<form>
<!---Mood Chart--->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart-container" style=" float: right; margin-right: 150px;position: relative; height: 42vh; width: 42vw; margin-top: 8px">
<canvas id="myChart" width="100px" height="100px"></canvas>
<script>
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [],
datasets: [{
label: '# of Votes',
data: [angryValue.value, sadValue.value, happyValue.value, anxiousValue.value, tiredValue.value, motivatedValue.value],
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: {
}
}
});
function updateChart(){
angryValue = Number(document.getElementById('angry').value);
sadValue = Number(document.getElementById('sad').value);
happyValue = Number(document.getElementById('happy').value);
anxiousValue = Number(document.getElementById('anxious').value);
motivatedValue = Number(document.getElementById('motivated').value);
tiredValue = Number(document.getElementById('tired').value);
data.push({
angry: angryValue,
sad: sadValue,
happy: happyValue,
anxious: anxiousValue,
motivated: motivatedValue,
tired: tiredValue
});
chart.render();
}
var moodBtn = document.getElementById('mood-btn');
moodBtn.addEventListener('click', updateChart);
</script>
</div>``

Maybe this is more what you want?
const moods=['Angry', 'Sad', 'Happy', 'Anxious', 'Motivated', 'Tired'];
const ctx = document.getElementById('myChart');
const cont=document.querySelector(".form-container");
cont.innerHTML=moods.map((M,i)=>{
let m=M.toLowerCase();
return `<input type="text" name="${m}" placeholder="${M}" value="${i+2}"> ${M}`;
}).join("<br>");
const inps=[...document.querySelectorAll("input")];
cont.addEventListener("input",ev=>{
myChart.data.datasets[0].data= inps.map(el=>+el.value);
myChart.update()
});
const myChart = new Chart( ctx, {
type: 'pie',
data: {
labels: moods,
datasets: [{
label: '# of Votes',
data: inps.map(el=>+el.value),
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: {}
}
});
.form-container,.chart-container {margin: 8px; display:inline-block;}
#myChart { width:200px; height:200px;}
.form-container input {width:30px}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="form-container"></div>
<div class="chart-container"><canvas id="myChart"></canvas></div>
I replaced some of your lengthy HTML markup by some generated code, based on the moods array. I also skipped the buttons and triggered the update() event by listening to input events on the container wrapping all input elements:
cont.addEventListener("input",ev=>{
myChart.data.datasets[0].data= inps.map(el=>+el.value);
myChart.update()
});

Inside the updateChart() function, there is no variable named data. So, it looks like you're pushing some data to the uninitialized variable.
Isn't the data supposed to be pushed inside the config of chart.js? You might want to create a separate variable for storing the data so that you can push the data on the fly from other functions and just swap out the data for chart.js.

<div class="form-container" style="float: left; margin-left: 170px; margin-top: 13px; text-align: center;">
<form>
<!---Happy--->
<div class="mood">
<input type="string" name="happy" id="happy" placeholder="Happy" value="1" required>
<button class="mood-btn" >Enter</button>
</div>
<!---Angry--->
<div class="mood">
<input type="string" name="angry" id="angry" placeholder="Angry" value="3" required>
<button class="mood-btn" >Enter</button>
</div>
<!---Sad--->
<div class="mood">
<input type="string" name="sad" id="sad" placeholder="Sad" value="5" required>
<button class="mood-btn" >Enter</button>
</div>
<!---Motivated--->
<div class="mood">
<input type="string" name="motivated" id="motivated" placeholder="Motivated & Productive" value="6"required>
<button class="mood-btn" >Enter</button>
</div>
<!---Tired--->
<div class="mood">
<input type="string" name="tired" id="tired" placeholder="Tired or Burnt out" value="0" required>
<button class="mood-btn" >Enter</button>
</div>
<!---Anxious--->
<div class="mood">
<input type="string" name="anxious" id="anxious" placeholder="Anxious & Stressed" value="7" required>
<button class="mood-btn" >Enter</button>
</div>
</form>
</div>
<!---Mood Chart--->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="chart-container" style=" float: right; margin-right: 150px;position: relative; height: 42vh; width: 42vw; margin-top: 8px">
<canvas id="myChart" width="100px" height="100px"></canvas>
<script>
let chartData =[]
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Angry', 'Sad', 'Happy', 'Anxious', 'Motivated', 'Tired'],
datasets: [{
label: '# of Votes',
data: chartData,
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: {
}
}
});
function removeData(chart) {
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
function addData(chart, data) {
chart.data.datasets.forEach((dataset) => {
dataset.data = [...data]
});
chart.update();
}
function updateChart(event){
event.preventDefault()
angryValue = Number(document.getElementById('angry').value);
sadValue = Number(document.getElementById('sad').value);
happyValue = Number(document.getElementById('happy').value);
anxiousValue = Number(document.getElementById('anxious').value);
motivatedValue = Number(document.getElementById('motivated').value);
tiredValue = Number(document.getElementById('tired').value);
chartData = [
angryValue,
sadValue,
happyValue,
anxiousValue,
motivatedValue,
tiredValue
]
removeData(myChart)
addData(myChart, chartData)
}
var moodBtn = document.querySelectorAll('.mood-btn');
moodBtn.forEach(btn => {
btn.addEventListener('click', updateChart, false)
})
</script>
</div>

chart.js 'Chart' is not defined no-undef

i ran my program in node.js localhost but it has an error. I have already install npm chart.js
./src/index.js
Line 2: 'Chart' is not defined no-undef
In my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
In my index.js:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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
}
}
}
});

How to move a chart.js to the center

I just coded my first chart in chart.js, but i cant move it to the center of my webpage
here is my code for the chart in html:

Use "display:block;margin:0 auto;" to center the div containing the JS table.

Make a container for your canvas and give it display: inline-block style. Then you can treat the container like any html block.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
.outbox{
text-align: center;
}
.container{
width: 50%;
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="outbox">
<div class="container">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>

You want to center the canvas since that is where the chart is drawn on. To center the canvas see this stack article: How to center canvas in html5

ChartJS not working in Chrome extension

I have a file named index.html in my Chrome extension that uses ChartJS to draw a chart. This is the markup :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to dashboard</title>
<link rel="stylesheet" href="./style.css">
<script src="scripts/Chart.min.js"></script>
</head>
<body>
<canvas id="chart" height="400" width="900"></canvas>
<script src="./script.js"></script>
</body>
And this is the script:
var ctx = document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
I am not getting any error in console. But still, the page is rendered blank. What could be the issue with this code?