Menu
I'm trying to learn chart.js. So I was trying to make a chart to test out chart.js.
Everything was working fine when I was defining labels directly in the chart.js data. But it didn't work when I tried to retrieve data from mongodb, pass it into index.ejs, and then substituting it in the place of labels and data in the script.
Also, when I replaced label by directly giving some labels (not the one received from nodejs) and using the data received from nodejs, it worked. (Note: country is of String type and value is of Number type in Schema).
The codes for app.js, index.ejs and the output is below.
Thank you!
app.js code:
app.get('/', async function (req, res) {
var countryArr = [];
var valuesArr = [];
var getCountry = data.find({}).select('country -_id');
var getValues = data.find({}).select('value -_id');
getCountry.exec(function(err, x){
for(var i = 0; i < x.length; i++){
countryArr.push(x[i].country);
}
console.log(countryArr);
getValues.exec(function(err, x){
for(var i = 0; i < x.length; i++){
valuesArr.push(x[i].value);
}
console.log(valuesArr);
res.render('index',{
country : countryArr,
value : valuesArr
});
});
});
});
index.ejs
<body>
<p>
<%= country %>
</p>
<p>
<%= value %>
</p>
<div class="container">
<canvas id="myChart" style="width: 100px; height=100px"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart");
console.log(country[0].toString());
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<%= value %>],
datasets: [{
label: '#',
data: [<%= 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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
Browser Output
391
asked Feb 20 '26 10:02
I found where I was going wrong.
In index.ejs, instead of this...
labels: [<%= value %>],
It should be...
labels: <%- JSON.stringify(country)%>,
Basically the array I was receiving from app.js was kind of [abc,xyz,pqr]. So to convert it to a string array like ['abc','xyz','pqr'], we have to use JSON.stringify()
Anyways, thanks folks!
99
answered Feb 22 '26 00:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With