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:
Editado
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> 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
Puntos
1164
Visitas
Visitas
1
Resp
Resp
Por thejapp hace 73 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
salu2
0
Puntos
Puntos
Por alber hace 73 meses
Administrador