Tenho alguns dados que estão sendo armazenados no banco de dados do meu sistema, gostaria de exibir esses dados em gráficos, pesquisei e encontrei o framework Chart.js mas não sei como fazer para pegar dados que estão dentro do banco de dados e fazer aparecer no gráfico
Chart.js com php
E
2 Respostas
T
Qual parte exatamente você está com dificuldade? Tentou executar algum dos exemplos ao menos?
Se você já sabe trazer os dados do banco para uma página normal (ex: um table ou um formulário html), basta fazer o mesmo e colocar os dados retornados do banco no atributo data num objeto Chart, como descrito aqui; https://www.chartjs.org/docs/latest/ .
Abraço.
E
Oi, então eu fiz sim um teste usando um exemplo mas meu problemas está em armazenar os valores nas variáveis, eu fiz um select para pegar os dados e estou colocando a variável para dados no meu gráfico mas quando coloco o gráfico some.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gráfico</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</head>
<body>
<?php
$link = mysqli_connect("localhost", "root", "", "api");
$consulta = "Select * from dados";
$exe = mysqli_query($link,$consulta);
while ($row = mysqli_fetch_assoc($exe)){
echo $row['data'];
echo $row['volume'];
echo $row['nome'];
}
mysqli_close($link);
?>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [<?php echo $row['data']?>],
datasets: [{
label: "Mercado Bitcoin",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [<?php echo $row['volume'] ?>],
}]
},
// Configuration options go here
options: {}
});
Criado 19 de fevereiro de 2019
Ultima resposta 19 de fev. de 2019
Respostas 2
Participantes 2