Skip to main content
2 de 2
adicionou 1468 caracteres ao conteúdo
danibrum
  • 147
  • 1
  • 11

Gerar gráfico usando ChartJS no Express

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á!

danibrum
  • 147
  • 1
  • 11