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>