at the moment of entering my index.php page
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body>
<div class="container">
<select name="inc_sem_zon_per" id="inc_sem_zon_per" >
<option value="">Seleccione una opcion</option>
<option value="LIMA">LIMA</option>
<option value="CENTRO">CENTRO</option>
<option value="SUR">SUR</option>
<?php/*
$con = mysql_connect("localhost","root","");
mysql_select_db("inci",$con);
$consulta_semana= mysql_query("SELECT distinct region FROM registro_tecno ");
while($data= mysql_fetch_array($consulta_semana)){
$regionx=$data['region'];
echo "<option value='".$regionx."' $selected>".$regionx."</option>";
}*/
?>
</select>
<select name="fecha" id="fecha">
<option value="">Seleccione una opcion</option>
<option value="semanas">semana</option>
<option value="meses">mes</option>
</select>
<select name="semanas" id="semanas" onchange="anadir();" hidden>
<option value="">Seleccione:</option>
<?php
$acu=1;
$con = mysql_connect("localhost","root","");
mysql_select_db("inci",$con);
$consulta_semana= mysql_query("SELECT MAX(semana) as y FROM registro_tecno ");
while($data= mysql_fetch_array($consulta_semana)){
$semanax=$data['y'];
}
while($acu<=$semanax){
echo "<option value='".$acu."' $selected>".$acu."</option>";
$acu++;
}
?>
</select>
<select name="meses" id="meses" onchange="anadir();" hidden>
<option value="">Seleccione:</option>
<?php
$acu=1;
$con = mysql_connect("localhost","root","");
mysql_select_db("inci",$con);
$consulta_semana= mysql_query("SELECT MAX(mes) as meses FROM registro_tecno");
while($data= mysql_fetch_array($consulta_semana)){
$mesx=$data['meses'];
}
while($acu<=$mesx){
echo "<option value='".$acu."' $selected>".$acu."</option>";
$acu++;
}
?>
</select>
<div id="kevin" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</div>
<script >
$( function() {
$("#fecha").change(function() {
if($(this).val()==="meses"){
$("#semanas").prop("hidden",true);
$("#semanas").prop("value=null",true);
$("#meses").prop("hidden",false);
}else{
$("#semanas").prop("hidden",false);
$("#meses").prop("value=null",true);
$("#meses").prop("hidden",true);
}
});
});
</script>
</body>
to see my graphics, I get this way ...
so for the graph to be shown I have to use the select, this will direct me to functions.js where I use ajax
function anadir(){
var parametros={
"inc_sem_zon_per": $("#inc_sem_zon_per").val(),
"fecha": $("#fecha").val(),
"meses": $("#meses").val(),
"semanas": $("#semanas").val(),
}
$.ajax({
data: parametros,
url:"ejemplo.php",
type:"POST",
beforeSend: function(){
$("#kevin").html('<center><img src="img/ajax-loader.gif" width="20" heigh="20"></center>');
},
success: function(vista){
$("#kevin").html(vista);
}
});
}
then it would bring me values of example.php:
$inc_sem_zon_per=$_POST['inc_sem_zon_per'];
$fecha=$_POST['fecha'];
$meses=$_POST['meses'];
$semanas=$_POST['semanas'];
include("conexion.php");
$estado[0]="En Curso";
$estado[1]="Pendiente";
$estado[2]="Resuelto";
if ($fecha=="semanas") {
$sale="semana";
$semana_max=$con->query("SELECT MAX(semana) as sem_max FROM registro_tecno ");
while($row_sem_max= mysqli_fetch_array($semana_max, MYSQLI_ASSOC))
{
$me_max= $row_sem_max["sem_max"];
}
$limite_inferior=(int)$me_max-(int)$semanas;
for ($i=0; $i <=2 ; $i++) {
$c=0;
$a="";
for ($j=$limite_inferior+1; $j <=$me_max ; $j++) {
$result_inc =$con->query("SELECT count(incidencia) as ver FROM registro_tecno where (estado='".$estado[$i]."' and region='".$inc_sem_zon_per."' and semana=".$j.") ");
$rown3=$result_inc->num_rows;
if ($rown3==0) {
$a=$a."0,";
$c++;
}else{
while($row_inc= mysqli_fetch_array($result_inc, MYSQLI_ASSOC))
{
$inc[$c] = $row_inc["ver"];
$a=$a.$inc[$c].",";
$c++;
}
}
}
$s[$i]=$a;
echo "estado: ".$estado[$i];
echo "<br>ver ".$s[$i]."<br>";
}
mysqli_close($con);
}elseif ($fecha=="meses") {
$sale="mes";
$c=0;
$acum_asig="";
$m_max=$con->query("SELECT MAX(mes) as mes_max FROM registro_tecno ");
while($row_sem_max= mysqli_fetch_array($m_max, MYSQLI_ASSOC))
{
$me_max= $row_sem_max["mes_max"];
}
$limite_inferior=(int)$me_max-(int)$meses;
for ($i=0; $i <=2 ; $i++) {
$c=0;
$a="";
for ($j=$limite_inferior+1; $j <=$me_max ; $j++) {
$result_inc =$con->query("SELECT count(incidencia) as ver FROM registro_tecno where (estado='".$estado[$i]."' and region='".$inc_sem_zon_per."' and mes=".$j.") ");
$rown3=$result_inc->num_rows;
if ($rown3==0) {
$a=$a."0,";
$c++;
}else{
while($row_inc= mysqli_fetch_array($result_inc, MYSQLI_ASSOC))
{
$inc[$c] = $row_inc["ver"];
$a=$a.$inc[$c].",";
$c++;
}
}
}
$s[$i]=$a;
}
mysqli_close($con);
}
?>
<script type="text/javascript">
$(function () {
$('#kevin').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Incidencia Por Estado y Region'
},
subtitle: {
text: <?php echo "' REGION ".$inc_sem_zon_per."'"; ?>
},
xAxis: {
categories: [
<?php for($y=$limite_inferior+1;$y<=$me_max;$y++){ echo "'".$sale." ".$y."',";}?>
]
},
yAxis: {
min: 0,
title: {
text: 'N° de Incidencias'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.0f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
<?php for($h=0;$h<=2;$h++){?>
{
name: <?php echo "'".$estado[$h]."',"; ?>
data: [
<?php
echo $s[$h];
?>
]
},
<?php }?>
]
});
});
</script>
and it shows me in the following way:
then my question would be if at the time of loading the page you can use the ajax but so that I get a graph by default, and that does not come out blank as in the first image I showed ... try to do it with if-else and an include, but the problem is that I load the page and delay, but with the ajax is faster and does not load the page ... could it?