Generate chart using ChartJS on Express

0

I'm trying to render a chart using ChartJS. I'm using nodeJS (Express) and mongoDB. The idea is to get the data from the bank, go to the front, and from there, render the chart.

I already have a little notion of how to do this, one option would be to pass the data to an array, but I discovered that Mongoose does not have the toArray () function, so I was kind of confused. Another option would be to pass the data through AJAX.

My connection to the database is working, I already tested using collection.find () and it is returning the data I need.

The part I'm having trouble with is how to pass the data, it's still not very clear, but I would like to do it through an array even though the date field in ChartJS is an array.

This is the route I'm using to make the chart if 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>//varChart=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 this, thank you in advance!

    
asked by anonymous 30.07.2018 / 16:12

0 answers