Estou tentando fazer um gráfico parecido com este e não estou conseguindo. Alguém poderia me ajudar?
Lembrando que a tabela pode ser ignorada, eu só queria o gráfico mesmo.
Estou tentando fazer um gráfico parecido com este e não estou conseguindo. Alguém poderia me ajudar?
Lembrando que a tabela pode ser ignorada, eu só queria o gráfico mesmo.
Para fazer um gráfico no Highchart
precisamos seguir alguns passos:
Primeiro, entre no site https://www.highcharts.com/download e faça o download do highcharts 6.1.1. Feito isso, copie a pasta code e examples de dentro da pasta do highcharts para dentro da pasta do sistema que você está desenvolvendo.
Dentro da pasta examples vão ter várias outras pastas com os arquivos de cada tipo de gráfico. Para o seu gráfico, vamos usar o combo-dual-axes.
Agora você já tem um gráfico, mas ele não pega os valores da sua tabela, é um gráfico com valores pré programados, então, vamos colocar os valores da sua tabela.
A primeira coisa que vamos fazer é copiar o conteúdo da página do seu gráfico escolhido e colar em uma nova página que você vai salvar como um arquivo php. Isso porque vamos precisar do php pra pegar os valores da sua tabela no banco de dados e colocar dentro do gráfico.
Agora que você tem uma página php com o gráfico dentro, vamos fazer os selects
pra pegar os valores de cada coluna, fazer uma array pra cada e colocar as arrays que criamos dentro das arrays do highcharts:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seu gráfico</title>
<style type="text/css">
</style>
</head>
<body>
<script src="code/highcharts.js"></script>
<script src="code/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="col-sm-6 sm-margin-b-2">
<div class="">
<div class="" data-height="height">
<div class="service-info">
<?php
$lnk = mysqli_connect('localhost','root','') or die(mysql_error());
mysqli_select_db($lnk,'SeuBanco') or die(mysql_error());
$Yr16 = mysqli_query($lnk, "Select JAN, FEV, MAR, ABR, MAI, JUN, JUL, AGO, SET, OUT, NOV, DEZ from Yr16 where MMTR = 'Yr16' ");
$BP17 = mysqli_query($lnk, "Select JAN, FEV, MAR, ABR, MAI, JUN, JUL, AGO, SET, OUT, NOV, DEZ from B917 where MMTR = 'B917' ");
$Yr17 = mysqli_query($lnk, "Select JAN, FEV, MAR, ABR, MAI, JUN, JUL, AGO, SET, OUT, NOV, DEZ from Yr17 where MMTR = 'Yr17' ");
$resultYr16 = mysqli_fetch_assoc($Yr16);
$resultBP17 = mysqli_fetch_assoc($BP17);
$resultYr17 = mysqli_fetch_assoc($Yr17);
$ListaYr16 = $resultYr16;
$ListaBP17 = $resultBP17;
$ListaYr16 = $resultYr17;
$ListaYr16Total = array();
$ListaBP17Total = array();
$ListaYr17Total = array();
foreach ($ListaYr16 as $i => $value) {
array_push($ListaYr16Total, $value);
}
foreach ($ListaBP17 as $i => $value) {
array_push($ListaBP17Total, $value);
}
foreach ($ListaYr17 as $i => $value) {
array_push($ListaYr17Total, $value);
}
$html1 = "
<div id='container-tt-1' style='min-width: 210px; height: 300px; margin: 0 auto'></div>
<script type='text/javascript'>
Highcharts.chart('container-tt-1', {
chart: {
type: 'column'
},
title: {
text: 'Gráfico de horas'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
}
},
tooltip: {
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Yr16',
data: [" . join(", ", $ListaYr16Total) . "]
}, {
name: 'Yr17',
data: [" . join(", ", $ListaYr17Total) . "]
} , {
name: 'BP17',
data: [" . join(", ", $ListaBP17Total) . "]
}]
});
</script>";
echo $html1;
?>
</div>
</div>
</div>
</div>
</body>
</html>
Eu inventei o nome das colunas de acordo com o que estava na imagem, mas caso seja diferente é só alterar.
É aconselhável que esse arquivo esteja na pasta principal do seu sistema, então, você pode até excluir a pasta exemples depois disso se você quiser.
Agora você já deve ter o gráfico puxando as informações do seu banco de dados.
Espero ter ajudado.