0
I am trying to render a chart using Chartjs. I am using nodejs (Express) and mongoDB. The idea is to take the database data, go to the front, and from that, render the graph.
I already have some idea of how to do this, an option would be to pass the data in an array, but I discovered that Mongoose does not have the function toArray(), so I was a bit confused. Another option would be to pass the data through AJAX.
My connection to the database is working, I have already tested using Collection.find() and is returning the data I need.
The part I’m having difficulties with is how to pass the data, it’s still not very clear, but I’d like to do through an array even since the Chartjs data field is an array.
This is the route I’m using to chart, in case anyone is interested.
router.get('/home', isAuthenticated, function(req, res){
atendimentos.find({}, async function(err, atendimentos) {
if(!err){
console.log(atendimentos);
}
})
res.render('home', {user: req.user, atendimentos}); //Enviar dados do atendimento por parâmetro
})
View code:
<% include partials/header %>
<h1 id="hpg">Página dos gráficos</h1>
<h2>Você está logado como <%= user.username %></h2>
<!-- <select name="" id="">
<option value="">Teste1</option>
<option value="">Teste2</option>
<option value="">Teste3</option>
</select><br> -->
<!-- <canvas id="chart" width="400"> height="200" </canvas> -->
<a href="/signout">Sair</a>
<!-- Render do gráfico -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> -->
<script>
//var Chart = require("chart.js");
//var ctx = get.ElementById('chart').getContext('2d');
//var chart = new Chart(ctx, {
//type: 'line,
//data: {
// labels: [],
// datasets [{
// label: 'Gráfico de atendimento',
// data: [], // parâmetros do banco
// backgroundColor: [],
// borderColor: [],
// borderWidth: 1
// }]
// }
// options : {
// scales: {
// yAxes [{
// ticks: {
// beginAtZero: true
// }
// }]
// }
// }
//});
</script>
<% include partials/footer %>
I hope someone can help me with that, I thank you in advance!
Actually you have some problems in your solution. To generate the graph you have to have a template of it. Put there the code of your
home. Just for the record, here is a guide with the step-by-step of what you want to do– Sorack
Yes, I have everything configured in my app.js, this is just one of the routes. I had already looked at some of this fusioncharts page, it’s useful even but it’s not exactly how I think about doing it. In this case I would like to do something like this: date: appointments, and use that date right there on Chart. I’ll put the view code, but there’s nothing very relevant
– danibrum
So, but then again, if you look at this documentation that I sent you, it tells you how you transform the data from
MongoDBin data for you to send to your view. From what I saw there the way you are doing is not exactly the way they put it there. If no one answers I’ll cake an answer for you later– Sorack
All right, I posted the view code over there if you want to take a look, I’m gonna take a good look at that and get back here. I’ll see if I query using the same Mongo and not the ODM I’m using (Mongoose). Thank you!
– danibrum
Yes, I think I will need help to pass the data to the front. I also do not know very well how to test because I’m returning 8000 queries but anyway.
– danibrum