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
Archivo 2 hc_chart.php
Archivo 3 hc_inicio.php
Archivo 4 hc_listado.php
Archivo 1 conexión.php
Código (php) [Seleccionar]
<?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]
<?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]
<?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]
<?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>