J
To make a chart in Highchart we need to follow some steps: First, enter the site https://www.highcharts.com/download and download the highcharts 6.. Done it, copy the folder code and examples inside the folder highcharts into the system folder you are developing. Inside the folder examples will have several other folders with the files of each type of chart. For your chart, we will use the combo-dual-axes.Now you already have a chart, but it does not take the values of your table, it is a chart with pre-programmed values, so we will put the values of your table. The first thing we're going to do is copy the content of your chosen chart page and paste into a new page that you'll save as a file php. That's because we're gonna need it php to take the values of your table in the database and put inside the chart. Now you have a page php with the graphic inside, let's do the selects to take the values of each column, make an array for each and place the arrays we create within the highcharts arrays: <!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>
I invented the name of the columns according to what was in the image, but if it is different it is only to change. It is advisable that this file is in the main folder of your system, so you can even delete the exemple folder after that if you want. Now you should already have the chart pulling the information from your database. I hope I helped.
