Chartjs-Node js mysql query result rendered to chart.js labels in pug page

0👍

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);

0👍

if I hardcode the labels in:

const xlabels = [#{date}]

instead of importing from page render, everything works fine. It’s 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 disappear

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]

0👍

Not best solution, but it works….
async function GetData()

        var xlabel = '#{date}';
        var xlabel = xlabel.replace(/"/g, '"'); 
        alert(xlabel);
        var xlabel = xlabel.split(",");
        alert(xlabel);



        for(i = 0; i < xlabel.length; i += 1){
         xlabel[i] = xlabel[i];
         //alert(numarray[i]);
         xlabels.push(xlabel[i]);
        }

Leave a comment