CODEWITHSUNDEEP
javascriptchart.js
danibrum
danibrum

Reputation: 529

Chart not rendering on ChartJS

I have an Express server on the server side running my application and I'm sending data to front end. I'm using Mongoose as a database.

The data is being sent correctly I guess, I can check it on the console.log that I've made to test.

At the moment I want to use just one bar to test if the data is being rendered.

So, I have the following code on my route to send the data:

router.get('/home', isAuthenticated, async (req, res) =>  {

    let final;
    atendimentos.find({})
        .then(atendimentos => {
            final = atendimentos.filter(atendimentos => atendimentos.status === 'F')
            res.render('home', {user: req.user, fin: final.length});
            //Funciona
            console.log(final.length)
        })
        .catch(err => console.error(err));
   })

This final returns an array with a number that I've got from database, it returns everything with the status F on it.

Now, the parts from the ChartJS on the front end:

<div id="container">
    <canvas id="myChart" width="400" height="200" </canvas>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

<script>

 var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
         labels: "Atendimentos",
         datasets: [{
         label: 'Gráfico de atendimento',
         data: [<%= fin %>], // parâmetros do banco
         backgroundColor: [
             'rgb(71, 87, 112)'
             ],
         borderColor: [
             'rgb(71, 87, 112)'
             ],
         borderWidth: 1
         }]
     },
     options : {
         scales: {
             yAxes: [{
                 ticks: {
                     beginAtZero: true
                     }
                 }]
             }
         }
    });

    </script>

I'm getting the following errors:

Uncaught TypeError: t.ticks.map is not a function and Uncaught TypeError: Cannot read property 'skip' of undefined.

Hope I can get some help with it, thanks in advance!

Upvotes: 0

Views: 767

Answers (1)

danibrum
danibrum

Reputation: 529

Fixed it. The labels field is supposed to be an array, I just put [] and now it's working!

Upvotes: 1

Related Questions