0

Tenho vários gráficos do Google Charts pois estou fazendo um Dashboard, o problema é que preciso fazer a conexão com o banco via NodeJS por questões de performance e adquirir conhecimento em novas áreas, porém não consigo trazer os dados que já possuo no banco (SQL Server) para o arquivo JavaScript onde está os charts do Google.

Já tentei express, body-parser e um pouco de tudo que vi no Google e YouTube. Meu código está no padrão MVC na minha página PHP eu trago por pela tag script os arquivos js do Google Chart.

Código Google Chart:

google.charts.load('current', {packages:['corechart']});
          google.charts.setOnLoadCallback(drawChart);
          function drawChart() {

            var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Day'],
              ['CAMPO1',   12],
              ['CAMPO2',      2],
              ['CAMPO3',  2],
              ['CAMPO4', 2],


              ['CAMPO5', 7],
              ['CAMPO6', 2],
            ]);

            var options = {
              title: '',
               width: '100%', height: '100%',
                chartArea:{left:10,top:50,width:'80%',height:'100%'},
                 colors: ['#00eb0f', '#18b500', '#01730d', '#ffaa00', '#008cff', '#fc0303', '#c70000'],

              backgroundColor: { fill:'transparent' },
              textStyle: {color: 'white'},
              pieHole: 0.4,


              titleTextStyle: {
               color: 'white'
             },
             legend: {position: 'right',textStyle: {color: 'white',fontSize: 14}}

            };


            var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
            chart.draw(data, options);
          }

Código NodeJS:

const express = require('express');
const app = express();         
const bodyParser = require('body-parser');
const port = 3000; //porta padrão

const sql = require("mssql");
const connStr = "Server=MEUSERVE;Database=MINHABASE;User Id=MEUUSER;Password=MINHASENHA;";



//fazendo a conexão global
sql.connect(connStr)
   .then(conn => global.conn = conn)
   .catch(err => console.log(err));


app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

//definindo as rotas
const router = express.Router();
router.get('/', (req, res) => res.json({ message: 'Funcionando!' }));
app.use('/', router);

//inicia o servidor

//BODY PARSER

app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())


app.listen(port);
console.log('API funcionando!');


function execSQLQuery(sqlQry, res){
    global.conn.request()
     .query(sqlQry)
     .then(result => res.json(result.recordset))
     .catch(err => res.json(err));
    }
 router.get('/clientes', (req, res) =>{

    let a = execSQLQuery("SELECT * FROM MINHA_TABLE;", res);

 })

Um detalhe importante a ser posto é que na URL :3000/clientes traz um array com todas as informações que eu preciso mas não sei como passar os campos que quero dentro do Google Chart.

1 Resposta 1

0

Faz uma chamada ajax para o teu servidor Nodejs. O retorno dessa chamada você popula teus charts. Como você esta trabalhando no padrão MCV, front e back deveriam se comunicar por endpoints, ou seja, requisições ajax do teu front para as rotas do teu backend, e no response da chamada ajax popular os itens que você precisa.

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 .