0

Estou usando Express no Nodejs e também uso PUG (ou Jade antigo) nas views. Numa view eu exibo os dados retirados de um banco de dados em um gráfico. Os dados já recebo em formato de array. Criei um pequeno script Javascript para gerar o gráfico.

DÚVIDA: Como faço para estes dados do array serem acessados de dentro desse Javascript conforme indicado no meu código abaixo? Como eu passo os dados para o Javascript?

view.pug

doctype html
html
  head
    title= title
    meta("charset=utf-8")
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="./javascripts/chartjs/Chart.js")
  body
    block content
        form.form-horizontal.well(method="post", action="/report")
            script
                include ../public/javascripts/chart-gen.js

chart-gen.js: arquivo que fiz um include logo acima:

    var dataValues = valoresDoBancoDeDados;  <<<==== dados vindos do banco de dados (array)
    var dataLabels = labelsDoBancoDeDados;   <<<==== dados vindos do banco de dados (array)

    var data = {
        labels: dataLabels, 
        datasets: [
            {
                label: "Quantidade de veículos",
                backgroundColor: 'rgb(132,199,200)', 
                data: dataValues 
            }    
        ]
    };

    var chrt = document.getElementById("canvas_chart").getContext("2d");
    var mChart = new Chart(chrt, {
       type: 'line',
       data: data
    });

HTML: pronto deverá ficar assim:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="./javascripts/chartjs/Chart.js"></script>
</head>
<body>
    <form class="form-horizontal well" method="post" action="/report">

      <div style="position: relative; height:320px; width:600px;">
        <canvas id="canvas_chart"></canvas>
      </div>

      <script>    
            var dataValues = valoresDoBancoDeDados;  <<<==== dados vindos do banco de dados (array)
            var dataLabels = labelsDoBancoDeDados;   <<<==== dados vindos do banco de dados (array)

            var data = {
                labels: dataLabels, 
                datasets: [
                    {
                        label: "Quantidade de veículos",
                        backgroundColor: 'rgb(132,199,200)', 
                        data: dataValues
                    }    
                ]
            };

            var chrt = document.getElementById("canvas_chart").getContext("2d");
            var mChart = new Chart(chrt, {
               type: 'line',
               data: data
            });
      </script>

    </form>
</body>
</html>

1 Resposta 1

0

Forma correta:

view.pug

    script(type='text/javascript')
        | var dataValues = valoresDoBancoDeDados;
        | var dataLabels = labelsDoBancoDeDados;
        include ../public/javascripts/chart-gen.js

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .