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>

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

Run the function on load

I have composed the following code using chart.js for creating the chart and downloading it on clicking the button, but now i am unable to tune the same code for it to download the image when the page is loaded so that there is no user interaction and i have the downloaded image when the page is triggered.
<html>
<head>
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<br/><br/>
<button id="save-btn">Save Chart Image</button>
<script>
// Get the context of the canvas element we want to select
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
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,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data);
$("#save-btn").click(function() {
$("#myChart").get(0).toBlob(function(blob) {
saveAs(blob, "chart_1");
});
});
</script>
</body>
</html>
Kindly suggest me the solution.Thanks in advance.

This can be achieved by adding the following piece of code in your chart options ...
onAnimationComplete: function() {
$("#save-btn").click();
}
Here is a working example ...
<html>
<head>
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
</head>
<body> <canvas id="myChart" width="400" height="400"></canvas> <br/> <br/> <button id="save-btn">Save Chart Image</button>
<script>
// Get the context of the canvas element we want to select
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
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,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data, {
onAnimationComplete: function() {
$("#save-btn").click();
}
});
$("#save-btn").click(function() {
$("#myChart").get(0).toBlob(function(blob) {
saveAs(blob, "chart_1");
});
});
</script>
</body>
</html>
note: be aware that, the user will be prompted with a save as dialog box on page load

how to show bar chart for every product

I'm trying to print a bar chart for every product to show a summary of data but the bar chart is showing only once with different values at y-axis.
How can I show the data for each product on a bar chart?
Review.js
angular.module('App.review',[]).directive('review', function($cookieStore){
return{
restrict:'E',
controller:function($scope, $window, $http){
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"],
datasets: [{
label: '# of Votes',
data: $scope.data,
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: {
xAxes: [{
display: false,
stacked: false,
ticks: {
min: 0,
max: 10
}
}]
}
}
});
},
templateUrl:'scripts/directives/ReviewDirective/review.html',
transclude:false
}
});
review.html
<div style="width:100%; border:solid green;">
<canvas id="myChart" width="100" height="100vh"></canvas>
</div>
product.html
<td ng-controller="ReviewsCtrl" >
<div data-ng-repeat="r in dataList" >
<div data-ng-if=" r.id == item.productId">
<div data-ng-init="data =r.data" >
{{data=r.data}}
<review></review>
</div>
</div>
</div>
</td>

Check this code
var app = angular.module('App.review', []);
app.directive('review', function () {
return {
restrict: 'E',
scope: {
data: "=data"
},
link: function ($scope, element, attrs) {
var ctx = element[0].querySelector('#myChart');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ["Rating", "Blue", "Yellow", "Green", "Purple", "O"],
datasets: [{
label: '# of Votes',
data: $scope.data,
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: {
xAxes: [{
display: false,
stacked: false,
ticks: {
min: 0,
max: 10
}
}]
}
}
});
},
templateUrl: 'review.html',
transclude: false
}
});
app.controller('ReviewsCtrl', function ($scope) {
$scope.dataList = [{
productId: 1,
productName: 'One',
data: [1, 2, 3, 4, 5]
}, {
productId: 2,
productName: 'Two',
data: [6, 7, 8, 1, 1]
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
<div ng-app="App.review">
<table>
<tr>
<td ng-controller="ReviewsCtrl">
<div data-ng-repeat="r in dataList">
{{r.productName}}
<review data="r.data"></review>
</div>
</td>
</tr>
</table>
<script type="text/ng-template" id="review.html">
<div style="width: 100%; border: solid green;">
<canvas id="myChart" width="100" height="100vh"></canvas>
</div>
</script>
</div>