Archivo 1 conexión.php
Código
<?php if(!$con){ } } 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'"); return $hcie_monto; } ?>
Archivo 2 hc_chart.php
Código
<?php if($action == 'ajax'){ include_once("conexion.php");//Contiene los datos de conexion a la base de datos "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 } } ?>
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 ?> <!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>