Popular Chart.JS com dados do MySQL passado no render da página por uma função async

Programação Node.js
, ,
#1

Fala pessoal, estou querendo popular um gráfico de pizza na minha página dashboard, porém não estou conseguindo, podem me ajudar (Não quero usar php, somente javascript, jquery e html) .

  • Gráfico: Chart.JS
  • BD: MySQL
  • Linguagem: Javascript / Node.JS

Minha rota na qual passo o Json no render da página:

pageAdmin: (req, res) => {
  (async function () {
    let teste = await DBModel.getTeste();

    res.render('./pageAdmin', {
       //Dados que são passados para a página
       DTTeste: JSON.parse(JSON.stringify(teste))
    });

  })();//async
};

Aqui meu arquivo ejs onde renderizo o gráfico (front-end):

<div class="row">
   <div style="padding:10px" id="chart-container">
        <canvas id="pie-chart" width="800" height="450"></canvas>
   </div>
</div>

E por fim o trecho que contém o script para gerar e popular o gráfico:

<script>
    new Chart(document.getElementById("pie-chart"), {
        type: 'pie',
        data: {
            labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
            datasets: [{
                label: "Population (millions)",
                backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                data: [2478, 5267, 734, 784, 433]
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Predicted world population (millions) in 2050'
            }
        }
    });
</script>

Como faço para popular o label e data do gráfico utilizando o “DTTeste” recebido no render?

Os dados estão vindo desta forma (olhando no console.log):

inserir a descrição da imagem aqui

onde “status”_rnc será a label do gráfico e “Qtde” será os valores

#2

Consegui:

image
image.png1366×711 58.1 KB

Segue código com a solução:

<!-- Pizza total peças por perfil no dia -->

<script>

    //Variáveis que receberão os dados para popular o gráfico

    const linhaProducao = [];

    const pecasProduzidas = [];

    //Dados recebidos do res.render na rota

    '<% DTTotalPecasPorPerfil.forEach((row, index) => { %>'

        linhaProducao.push('<%- row.Perfil %>');

        pecasProduzidas.push('<%- row.Total %>');

    '<% }); %>'

    //Doughnut chart definido no canvas da página

    //var ctx = document.getElementById('pie-chart').getContext('2d');

    var canvas = document.getElementById('pie-chart');

    var ctx = canvas.getContext("2d");

    //Iniciando o gráfico

    var myChart = new Chart(ctx, {

        type: 'doughnut',//Tipo de gráfico

        maintainAspectRatio: true,

        responsive: true,

        data: {

            labels: linhaProducao,//Texto agrupador

            datasets: [{

                data: pecasProduzidas,//Valores

                backgroundColor: ["#007bff", "#ffc107", "#28a745", "#702CA1"],//Cores

                borderWidth: 0.9,

                borderColor: '#FFFFFF',

            }]

        },

        options: {

            title: {

                display: false,

                text: 'Titulo aqui',

                position: 'top',

                fontSize: 16,

                fontColor: '#000000',

                padding: 20,

            },

            animation: {

                animateScale: true,

                animateRotate: true,

            },

            legend: {

                display: true,

                position: 'right',

                labels: {

                    size: 14,

                    lineHeight: 1.6,

                    boxWidth: 20,

                    fontColor: '#181B22',

                    padding: 12,

                }

            },

            tooltips: {

                enabled: true,

            },

            plugins: {

                datalabels: {

                    color: '#FFFFFF',

                    textAlign: 'center',

                    font: {

                        size: 14,

                        weight: 'bold',

                        lineHeight: 1.6,

                    },

                    formatter: function (value, ctx) {

                        //return ctx.chart.data.labels[ctx.dataIndex] + '\n' + value;

                        return value;

                    }

                }

            },

        },

    });

</script>