graficas php/js

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
 
    $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 
$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 
  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	
	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>