Estou tentando renderizar um gráfico usando ChartJS. Estou usando nodeJS (Express) e mongoDB. A ideia é pegar os dados do banco, passar para o front, e a partir disso, renderizar o gráfico.
Já tenho um pouco de noção de como fazer isso, uma opção seria passar os dados em um array, porém descobri que o Mongoose não possui a função toArray(), então fiquei meio confuso. Outra opção seria passar os dados através de AJAX.
Minha conexão com o banco está funcionando, já testei usando collection.find() e está retornando os dados que eu preciso.
A parte que eu estou tendo dificuldades é em como passar os dados, ainda não ficou muito claro, mas eu gostaria de fazer através de um array mesmo já que o campo data do ChartJS é um array.
Essa é a rota que eu estou usando para fazer o gráfico, caso alguém tenha interesse.
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
})
Código da view:
<% 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 %>
Espero que alguém consiga me ajudar com isso, agradeço desde já!
home
. Só pra constar, aqui tem um guia com o passo-a-passo do que você quer fazerMongoDB
em dados pra você mandar pra sua view. Pelo que eu vi aí o jeito que você tá fazendo não tá exatamente do jeito que eles colocam ali. Se ninguém responder eu bolo uma resposta pra você mais tarde