Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde,
eu tenho o seguinte código com os dados do gráfico inseridos na mão:
<html>
<head>
<script type="text/javascript" src="js/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['TimeStamp', 'FT001', 'FT002'],
['2019-04-10 10:24:09', 300, 400],
['2019-04-10 10:25:09', 600, 460],
['2019-04-10 10:26:09', 500, 1120],
['2019-04-10 10:27:09', 550, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'TimeStamp', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
backgroundColor: '#E4E4E4',
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px"></div>
</body>
</html>
gostaria de saber como busco os dados do Banco de Dados Mysql.
Não sei mexer com AJAX, meu jeito é meio que uma gambiarra que funciona.. Olha aí:
Peguei o arquivo "be_pages_dashboard.min.js" e renomeei para "be_pages_dashboard.min.js.php" e coloquei um código em PHP pra gravar as informações na página:
<?php
function conn(){
$conn = new mysqli('localhost', '*****', '*****', '*****');
if ($conn->connect_errno) {
die('Falhou em conectar: (' . $conn->connect_errno . ') ' . $conn->connect_error);
}
return $conn;
}
function grafico_pontuacao($conexao){
$pontuacoes = $conexao->query("SELECT * FROM (SELECT DATE(pontuacao_data) AS p_data, (SELECT sum(pontuacao_valor) from pontuacao WHERE DATE(pontuacao_data) <= p_data) as pontuacao_valida_do_dia FROM pontuacao GROUP BY p_data DESC limit 10) as pontuacao_valida_do_dia_desc ORDER BY p_data");
foreach ($pontuacoes as $pontuacao){
$arrayDatas[] = date('d/m/Y', strtotime($pontuacao['p_data']));
$arrayPontuacao[] = $pontuacao['pontuacao_valida_do_dia'];
}
return array('datas' => $arrayDatas, 'pontuacoes' => $arrayPontuacao);
}
function grafico_clientes($conexao){
$Clientes = $conexao->query("SELECT * FROM (SELECT usuario_dtcadastro AS c_data, ( SELECT count(*) FROM usuario WHERE DATE(usuario_dtcadastro) <= c_data ) as qtde_cadastros_do_dia FROM usuario GROUP BY c_data DESC limit 10) as clientes_cadastrados_no_dia_desc ORDER BY c_data");
foreach ($Clientes as $Cliente){
$arrayDatas[] = date('d/m/Y', strtotime($Cliente['c_data']));
$arrayClientes[] = $Cliente['qtde_cadastros_do_dia'];
}
return array('datas' => $arrayDatas, 'clientes' => $arrayClientes);
}
$graficoPontuacao = grafico_pontuacao(conn());
$graficoClientes = grafico_clientes(conn());
?>[ ... JAVASCRIPT ... ]
data: {
labels: <?=json_encode($graficoPontuacao['datas']);?>,
datasets: [{
label: "This Week",
fill: !0,
backgroundColor: "rgba(66,165,245,.45)",
borderColor: "rgba(66,165,245,1)",
pointBackgroundColor: "rgba(66,165,245,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(66,165,245,1)",
data: <?=json_encode($graficoPontuacao['pontuacoes']);?>
}]
},[ ... JAVASCRIPT ... ]
E na página que queria puxar o arquivo coloquei sem o .php porque no .htaccess está configurado para ocultar a extensão.
<script src="assets/js/pages/be_pages_dashboard.min.js"></script>
Acho que essa não é a maneira mais performática, mas deu certo rsrsrs
Resultado:
Obs: Utilizado o ChartJS ([https://www.chartjs.org/](https://www.chartjs.org/))
Você pode fazer uma requisição através de um Ajax (Javascript), chamando um PHP (ou outra linguagem que preferir) para consultar o banco de dados.