graficas php/js

[thejapp]

Buenas, tengo un codigo para generar una grafica de los ingresos y egresos de un hotel pero dicha grafica no se genera, o mejor dicho las barras/lineas son las que no se generan aqui el codigo:


Archivo 1 conexión.php

Código (php) [Seleccionar] Expandir

<?php

    $con=@mysqli_connect('localhost', 'root','', 'hotel_colinas');
    if(!$con){
        die("imposible conectarse: ".mysqli_error($con));
    }
    if (@mysqli_connect_errno()) {
        die("Conexión falló: ".mysqli_connect_errno()." : ". mysqli_connect_error());
    }

function hcie_monto($table,$mes,$periodo,$tipo){
global $con;
$fecha_inicial="$periodo-$mes-1";
if ($mes==1 or $mes==3 or $mes==5 or $mes==7 or $mes==8 or $mes==10 or $mes==12){
$dia_fin=31;
} else if ($mes==2){
if ($periodo%4==0){
$dia_fin=29;
} else {
$dia_fin=28;
}
} else {
$dia_fin=30;
}
$fecha_final="$periodo-$mes-$dia_fin";
$query=mysqli_query($con,"select sum(hcie_monto) as hcie_monto_ac from $table where hcie_estatus = '$tipo' AND hcie_fecha>='$fecha_inicial' AND hcie_fecha<='$fecha_final'");
$row=mysqli_fetch_array($query);
$hcie_monto=floatval($row['hcie_monto_ac']);
return $hcie_monto;
}
?>

Archivo 2 hc_chart.php

Código (php) [Seleccionar] Expandir

<?php 
$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
include_once("conexion.php");//Contiene los datos de conexion a la base de datos
$periodo=intval($_REQUEST['periodo']);
$txt_mes=array( "1"=>"Ene","2"=>"Feb","3"=>"Mar","4"=>"Abr","5"=>"May","6"=>"Jun",
"7"=>"Jul", "8"=>"Ago","9"=>"Sep","10"=>"Oct","11"=>"Nov", "12"=>"Dic"
 );//Arreglo que contiene las abreviaturas de los meses del año



$categorias []= array('Mes',"Ingresos $periodo", "Egresos $periodo ");//Nombre de la primer fila del grafico
for ($inicio = 1; $inicio <= 12; $inicio++) {
    $mes=$txt_mes[$inicio];//Obtengo la abreviatura del mes
$st_ingreso=hcie_monto('hc_ingreso_egreso',$inicio,$periodo,'ingreso');//Obtengo el  monto de los ingresos
$st_egreso=hcie_monto('hc_ingreso_egreso',$inicio,$periodo,'egreso');//Obtengo el monto de los egresos
$categorias []= array($mes,$st_ingreso,$st_egreso);//Agrego elementos al arreglo


}
echo json_encode( ($categorias) );//Convierto el arreglo a formato json
}
?>

Archivo 3 hc_inicio.php

Código (php) [Seleccionar] Expandir

<?php 
  include("hc_includes/hc_css.php");
 ?>
   <script src="<?php echo SERVERURL; ?>js/jquery.min.js"></script>
   <script type="text/javascript" src="<?php echo SERVERURL; ?>js/jsapi.js"></script>
   <script type="text/javascript" src="<?php echo SERVERURL; ?>js/uds_api_contents.js"></script>
<?php 
  include("hc_includes/hc_menuHorizontal.php");
  include("hc_includes/hc_menuVertical.php");
 ?>
 <!-- Page -->
 <div class="page">
   <div class="page-header">
     <ol class="breadcrumb">
       <li class="breadcrumb-item"><a href="<?php echo SERVERURL; ?>inicio/home/inicio">Inicio</a></li>
       <li class="breadcrumb-item"><a href="javascript:void(0)">Registros</a></li>
       <li class="breadcrumb-item active">Registro de Habitación</li>
     </ol>

   </div>
   <div class="page-content">
     <!-- Panel Basic -->
     <div class="panel">
       <header class="panel-heading">

       </header>

                 <div align="center">

                   <select id="periodo" style="text-align: center;" class="form-control empty" onchange="drawVisualization();" >
               <?php
                    for($i=2017;$i<2030;$i++){
                        if($i == 2018){
                            echo '<option value="'.$i.'" selected>'.$i.'</option>';
                        }else{
                            echo '<option value="'.$i.'">'.$i.'</option>';
                        }
                    }
                ?>
                 
               </select>
             </div>
                           <div class="col-xs-12">
                       <div id="chart_div" style="width: 100%; height: 400px;"></div>
                   </div>

                   </div>
               </div>
                 
 



 

     </div>
     <!-- End Panel Basic -->
 

 <!-- End Page -->
 <!-- Footer -->



<?php 
 
  include("hc_includes/hc_footer.php");
  include("hc_includes/hc_js.php");
  /* Skin tools (demo site only) */
  include("assets/js/Section/skintools.php");

 ?>


    <script type="text/javascript">
   function errorHandler(errorMessage) {
           //curisosity, check out the error in the console
           console.log(errorMessage);
           //simply remove the error, the user never see it
           google.visualization.errors.removeError(errorMessage.id);
       }
       
     function drawVisualization() {
       // Some raw data (not necessarily accurate)
       var periodo=$("#periodo").val();//Datos que enviaremos para generar una consulta en la base de datos
       var jsonData= $.ajax({
                       url: '<?php echo SERVERURL; ?>hc_admin/hc_estadistica/hc_chart.php',
                       data: {'periodo':periodo,'action':'ajax'},
                       dataType: 'json',
                       async: false
                   }).responseText;

       var obj = jQuery.parseJSON(jsonData);
       var data = google.visualization.arrayToDataTable(obj);

   var options = {
     title : 'REPORTE DE INGRESOS VS EGRESOS '+periodo,
     vAxis: {title: 'Monto'},
     hAxis: {title: 'Meses'},
     seriesType: 'bars',
     series: {5: {type: 'line'}}
   };

   var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
   google.visualization.events.addListener(chart, 'error', errorHandler);
   chart.draw(data, options);
   }

   // Haciendo los graficos responsivos
     jQuery(document).ready(function(){
       jQuery(window).resize(function(){
        drawVisualization();
       });
     });
     google.setOnLoadCallback(drawVisualization);
   </script>



Archivo 4 hc_listado.php

Código (php) [Seleccionar] Expandir

<?php
session_start();

?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Gráficas</title>



       <script src="js/jsapi.js"></script>
       <script src="js/uds_api_contents.js"></script>


   <style>
       .caja{
           margin: auto;
           max-width: 250px;
           padding: 20px;
           border: 1px solid #BDBDBD;
       }
       .caja select{
           width: 100%;
           font-size: 16px;
           padding: 5px;
       }
       .resultados{
           margin: auto;
           margin-top: 40px;
           width: 1000px;
       }
   </style>

</head>


<body style="background:#f5f5f5" class="container-fluid">

<div class="clearfix"></div>
<div class="row">
<div class="col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2><i class="glyphicon glyphicon-book"></i>&nbsp;&nbsp;Estadísticas</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class='col-md-4'>

<select id="periodo" onchange="drawVisualization();" >
               <?php
                    for($i=2017;$i<2030;$i++){
                        if($i == 2018){
                            echo '<option value="'.$i.'" selected>'.$i.'</option>';
                        }else{
                            echo '<option value="'.$i.'">'.$i.'</option>';
                        }
                    }
                ?>
           </select>

</div>
<div class="col-xs-12">
<div id="chart_div" style="width: 100%; height: 400px;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<script type="text/javascript">
function errorHandler(errorMessage) {
       //curisosity, check out the error in the console
       console.log(errorMessage);
       //simply remove the error, the user never see it
       google.visualization.errors.removeError(errorMessage.id);
   }

 function drawVisualization() {
   // Some raw data (not necessarily accurate)
var periodo=$("#periodo").val();//Datos que enviaremos para generar una consulta en la base de datos
var jsonData= $.ajax({
                   url: 'st_user/st_estadistica/st_chart.php',
data: {'periodo':periodo,'action':'ajax'},
                   dataType: 'json',
                   async: false
               }).responseText;

var obj = jQuery.parseJSON(jsonData);
var data = google.visualization.arrayToDataTable(obj);

var options = {
 title : 'REPORTE DE INGRESOS VS EGRESOS '+periodo,
 vAxis: {title: 'Monto'},
 hAxis: {title: 'Meses'},
 seriesType: 'bars',
 series: {5: {type: 'line'}}
};

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'error', errorHandler);
chart.draw(data, options);
}

// Haciendo los graficos responsivos
 jQuery(document).ready(function(){
   jQuery(window).resize(function(){
    drawVisualization();
   });
 });
 google.setOnLoadCallback(drawVisualization);
</script>