I have a page where I should display two graphics, and although the two are working, only the second graphic appears.
No error appears, simply one of the two graphs appears as if the other did not even exist.
Chart 1:
<?PHP
$PREV = mysqli_query($lnk, "Select JAN_PREV, FEV_PREV, MAR_PREV, ABR_PREV, MAI_PREV, JUN_PREV, JUL_PREV, AGO_PREV, SET_PREV, OUT_PREV, NOV_PREV, DEZ_PREV from qualite where KPI = 'KPI1' ");
$REAL = mysqli_query($lnk, "Select JAN_REAL, FEV_REAL, MAR_REAL, ABR_REAL, MAI_REAL, JUN_REAL, JUL_REAL, AGO_REAL, SET_REAL, OUT_REAL, NOV_REAL, DEZ_REAL from qualite where KPI = 'KPI1' ");
$resultPREV = mysqli_fetch_assoc($PREV);
$resultREAL = mysqli_fetch_assoc($REAL);
$ListaP = $resultPREV;
$ListaR = $resultREAL;
$ListaPTotal = array();
$ListaRTotal = array();
foreach ($ListaP as $i => $value) {
array_push($ListaPTotal, $value);
}
foreach ($ListaR as $i => $value) {
array_push($ListaRTotal, $value);
}
$html1 = "
<div id='container-tt' style='min-width: 310px; height: 400px; margin: 0 auto'></div>
<script type='text/javascript'>
Highcharts.chart('container-tt', {
chart: {
type: 'column'
},
title: {
text: 'KPI1'
},
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: 'Previsto',
data: [" . join(", ", $ListaPTotal) . "]
}, {
name: 'Realizado',
data: [" . join(", ", $ListaRTotal) . "]
}]
});
</script>
</div>";
echo $html1;
?>
The second chart:
<?php
$PREV2 = mysqli_query($lnk, "Select JAN_PREV, FEV_PREV, MAR_PREV, ABR_PREV, MAI_PREV, JUN_PREV, JUL_PREV, AGO_PREV, SET_PREV, OUT_PREV, NOV_PREV, DEZ_PREV from qualite where KPI = 'KPI2' ");
$REAL2 = mysqli_query($lnk, "Select JAN_REAL, FEV_REAL, MAR_REAL, ABR_REAL, MAI_REAL, JUN_REAL, JUL_REAL, AGO_REAL, SET_REAL, OUT_REAL, NOV_REAL, DEZ_REAL from qualite where KPI = 'KPI2' ");
$resultPREV2 = mysqli_fetch_assoc($PREV2);
$resultREAL2 = mysqli_fetch_assoc($REAL2);
$ListaP2 = $resultPREV2;
$ListaR2 = $resultREAL2;
$ListaPTotal2 = array();
$ListaRTotal2 = array();
foreach ($ListaP2 as $i => $value) {
array_push($ListaPTotal2, $value);
}
foreach ($ListaR2 as $i => $value) {
array_push($ListaRTotal2, $value);
}
$html2 = "
<div id='container-tt' style='min-width: 310px; height: 400px; margin: 0 auto'></div>
<script type='text/javascript'>
Highcharts.chart('container-tt', {
chart: {
type: 'column'
},
title: {
text: 'KPI2'
},
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: 'Previsto',
data: [" . join(", ", $ListaPTotal2) . "]
}, {
name: 'Realizado',
data: [" . join(", ", $ListaRTotal2) . "]
}]
});
</script>
</div>";
echo $html2;
?>
And the page that displays the graphics:
<!DOCTYPE html>
<html lang="pt-br" class="no-js">
<head>
<script src="code/highcharts.js" type="text/javascript"></script>
</head>
<body>
<!--É do highcharts -->
<script src="code/modules/exporting.js"></script>
<?php require_once("menu.php"); ?>
<!--Baner -->
<div class="parallax-window" data-parallax="scroll" data-image-src="img/header-metade.jpg" style="height: 300px;">
<div class="parallax-content container">
<h1 class="carousel-title" style="font-size: 50px;">QUALITÉ</h1>
<p>SISTEMA</p>
</div>
</div>
<!-- Main -->
<div class="content-lg container">
<div class="row margin-b-20">
<div class="col-sm-6">
<h2>Prev x Real Month</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 sm-margin-b-50">
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
include("conn.php");
require_once("graf-qualite-1.php");
require_once("graf-qualite-2.php");
?>
</div>
</div>
<div class="col-sm-4 col-sm-offset-1">
</div>
</div>
</div>
<?php require_once("footer.php"); ?>
</body>
</html>
I'm using HIGHCHARTS.js for the chart.