0

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

5
  • Na realidade você tem alguns problemas na sua solução. Pra gerar o gráfico você tem que ter um template dele. Coloca aí o código da sua home. Só pra constar, aqui tem um guia com o passo-a-passo do que você quer fazer
    – Sorack
    Commented 30/07/2018 às 17:03
  • Sim, eu tenho tudo configurado no meu app.js, isso aí é só uma das rotas. Já tinha olhado um pouco dessa página do fusioncharts, é útil mesmo mas não é exatamente como eu penso em fazer. No caso gostaria de fazer algo tipo assim: data: atendimentos, e usar essa data aí mesmo no chart. Vou botar o código da view, mas não tem nada de muito relevante
    – danibrum
    Commented 30/07/2018 às 17:11
  • Então, mas aí que tá, se você olhar nessa documentação que eu mandei pra você ele diz como você transforma os dados do MongoDB 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
    – Sorack
    Commented 30/07/2018 às 17:13
  • Beleza, postei o código da view ali se tu quiser dar uma olhada, vou ver bem direitinho isso aí e retorno aqui. Vou ver se faço a query usando o mongo mesmo e não o ODM que eu to usando (Mongoose). Obrigado!
    – danibrum
    Commented 30/07/2018 às 17:15
  • É, acho que vou precisar de ajuda pra passar os dados pro front. Também não sei muito bem como testar porque estou retornando 8000 queries mas enfim.
    – danibrum
    Commented 31/07/2018 às 11:18

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .