Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Codigo generar graficas en 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
<?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
<?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
<?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
<?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>

Editado
0
Puntos
143
Visitas
1
Resp
Por thejapp hace 4 meses
Principiante
Respuesta #1
buenas, es muy difícil poder ayudarte en temas tan globales y con tantas funciones por medio.. sería mejor ir haciendo preguntas puntuales eh ir solucionando problemas y resolviendo parte por parte del código

salu2
0
Puntos
Por alber hace 4 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate