node js mysql query result rendered to chart.js labels in pug page-CodePudding

I've this strange behaviour when i make a get request. A query to mysql calls for totals of sells(float) group by days (nvarchar). I've made 2 arrays (for totals and datas) where i push the content of the result

router.get('/movmensili', function(req, res ,next){
 if(!req.session.user){
 return res.redirect('/'); 
} 
executeQuery("SELECT SUM(price) as Totale, Data FROM db10101.10101 group by Data order 
by Data", function(error, resmov){
    
    var dateArray = [];
    var totaliArray = [] ;
    for (var i = 0; i<resmov.length; i  ) {
        dateArray.push(resmov[i].Data)   
    }
    for (var i = 0; i<resmov.length; i  ) {
        totaliArray.push(resmov[i].Totale)   
    }
    
    res.render('movmensili', {title: 'movs', date: (dateArray), totali: totaliArray
    });
   });   
});

console.log(dateArray); //['2022-05-01','2022-05-02','2022-05-03','2022-05-04','2022-05-05']
console.log(totaliArray); //[ '4.00', '5.50', '3.00', '1.75', null ]

so far so good once I open my Pug page i got to draw a bar chart with Chart.js the two arrays used for the chart axes, contains numeric values, no problems for the sell totals, but the xlabels should be strings. So far the xlabes are 2016(=2022 minus 05 minus 01), 2015, 2014 and so on....

canvas#myChart(style='width: 100%; height: 100%; margin: 10 auto')
 script.
    const xlabels = [#{date}]  //[2022-05-01,2022-05-02,2022-05-03,2022-05-04,2022-05-05]
    
    const ydatas = [#{totali}] //[4.00,5.50,3.00,1.75,]

I wasn't able to convert / cast / stringify the x values to get the result needed. Any suggestions?

CodePudding user response：

David, this worked for me. Are you sure you are passing the labels correctly on render (try date: dateArray instead of date: (dateArray)). I didn't create a render function for this page so hard coded the labels and data arrays:

        script.
            var labels = ['2022-05-01','2022-05-02','2022-05-03','2022-05-04','2022-05-05',]
            var data = {
                labels: labels,
                datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: ['4.00', '5.50', '3.00', '1.75', null],
                }]
            };
            var config = {type: 'line',data: data,options: {}};
            var myChart = new Chart(document.getElementById("myChart"),config);

CodePudding user response：

if I hardcode the labels in const xlabels = [#{date}], instade of importing from page render, everything works fine. It' exactly that the point. the console.log of dateArray is perfectly as I would like to be in the xlabels, while once imported the quotes disappeare---- console.log(dateArray); //['2022-05-01','2022-05-02','2022-05-03','2022-05-04','2022-05-05'] <> const xlabels = [#{date}] //[2022-05-01,2022-05-02,2022-05-03,2022-05-04,2022-05-05]