Consultas = {
init: function(config){
this.config = config;
//Caching de dom
sEst = $('#estacion'),
sPar = $('#parametro'),
sCons = $('#consulta'),
sTipo = $("#tipoEstadistico"),
idClima = $('#clima'),
compa = $('#check'),
formulario = $('#consultaDiaria'),
infoConsultas = $('#infoConsultas');
//draggable,close
$('#contForm').draggable();
$('#minimizar').on('click', function(){
$('.slideForm').slideToggle();
})
//Proceso formulario de consultas
$('#enviar').on('click', function(){
Consultas.enviarConsulta(formulario);
})
//estilizo los select
sEst.select2({
placeholder : "Elegir Estacion"
});
sPar.select2();
sCons.select2({
placeholder : "Elegir Tipo de Consulta"
});
sTipo.select2({
placeholder : "Tipo Estadístico"
});
//cargo las estaciones en el select
this.estaciones();
//cargo los tipos de consulta en el select
this.crearSelectConsultas();
//cargo los tipos estadisticos
sTipo.append("");
},
estaciones: {},
estaciones: function() {
var self = Consultas;
$.ajax({
type: 'POST',
url: 'modelo/modelo.php',
data: { estacionesC:'estacionesC'},
beforeSend: function() {
$('.aLoader').fadeIn();
},
complete: function() {
$('.aLoader').fadeOut();
},
success: function(resp){
self.estaciones = resp;
self.crearSelect();
}
});
},
crearSelect: function(){//Crea el select de estaciones y los input check de consultas
var self = Consultas;
$.each(self.estaciones, function(i){
sEst.append("");
compa.append(""+self.estaciones[i].sit_descripcion+"
");
});
sEst.on('change', function(){
var v = $(this).val();
self.cargarParam(v);
self.datepickerPorEstacion(v);
})
},
cargarParam: function(estacion){
$.ajax({
type: 'POST',
url: 'modelo/modelo.php',
data: { contParam: estacion},
beforeSend: function() {
$('.aLoader').fadeIn();
},
complete: function() {
$('.aLoader').fadeOut();
},
success: function(resp){
sPar.empty().append('');
sPar.select2("val", "")
if(resp.length == 0){
sPar.append("");
} else {
$.each(resp, function(i){
sPar.append("");
});
}
}
});
},
crearComparacion: function(cont,est){
var formCompa = $('#formCompa');
//Obtengo los datos que se enviaron por formulario
var par = formulario.find('#parametro').val(),
fecha = formulario.find('#fecha').val(),
fi = formulario.find('#fi').val(),
ff = formulario.find('#ff').val();
tipo = formulario.find('#tipoConsulta').val();
estadis = formulario.find('#tipoEstadistico').val();
//Creo los campos para append
var campos = "";
//Crear el formulario de comparacion, vaciando los anteriores
formCompa.find("#variables").html('').append(campos);
//bindeo el submit
formCompa.fadeIn().find("#sbmtCompa").off('click').on('click', function(){
Consultas.enviarFormCompa(formCompa);
});
},
crearSelectConsultas: function(){
self = Consultas;
sCons.append("");
sCons.on('change', function() {
var valor = $(this).val();
if(valor == 'diario'){
self.mostrarCapa('diario','media')
} else {
self.mostrarCapa('media','diario')
}
});
},
dibujarBrujula: function(rotacion){
var rotar = rotacion;
var paper = Raphael($("#brujula")[0], 130, 130);
//pongo la imagen de la brujula
var brujula = paper.image("images/brujula.png",0,0,130,130);
//pongo la imagen de una flechita (src, x, y, width, height)
var arrow = paper.image("images/flecha.png",0,0,130,130);
//lo siguiente rota (r) una x cantidad de grados
arrow.attr({
"transform": "r 0"
});
arrow.animate({
"transform": "r "+rotar
},
2000,
"bounce")
},
enviarConsulta: function(formulario){
var data = formulario.serialize();
$.ajax({
type: 'POST',
url: 'modelo/modelo.php',
data: data,
dataType: 'JSON',
beforeSend: function() {
$('.aLoader').fadeIn();
},
complete: function() {
$('.aLoader').fadeOut();
},
success: function(resp){
infoConsultas.fadeOut();
/*recibo JSON con data y labels*/
Consultas.graficarSimple(resp);
/*crear Formulario de comparación*/
Consultas.crearComparacion();
},
});
},
enviarFormCompa: function(formCompa){
var data = formCompa.serialize();
$.ajax({
type: 'POST',
url: 'modelo/modelo.php',
data: data,
dataType: 'JSON',
beforeSend: function() {
$('.aLoader').fadeIn();
},
complete: function() {
$('.aLoader').fadeOut();
},
success: function(resp){
Consultas.graficarCompara(resp);
},
});
},
graficarCompara: function(data){
var linea = new Array;
var est = new Array;
var maximo = new Array;
var titulo = data[0].titulo;
var unidad = data[0].unidad;
var labels = data[0].labels;
console.log(data);
$.each(data, function(i,value) {
if(value.data !== 'No hay datos'){//Si vuelven datos
$.each(value.data, function(j){
value.data[j] = (value.data[j] === null) ? 'null' : eval(value.data[j]);
if(value.data[j] !== 'null'){
maximo.push(value.data[j]);
}
});
linea.push(value.data);
est.push(value.estacion);
};
});
var max = Math.max.apply(null,maximo);
RGraph.Reset(grafico);
var line = new RGraph.Line("grafico", linea);
// Configure the chart to appear as you wish.
line.Set("title", titulo);
line.Set('chart.ymax', max);
line.Set('chart.labels', labels);
line.Set('chart.background.barcolor1', 'white');
line.Set('chart.background.barcolor2', 'white');
line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
line.Set('chart.colors', ['#f00', '#0f0', '#666', '#333', '#f0f', '#ff0', '#0ff']);
line.Set('chart.linewidth', 2);
line.Set('chart.key', est);
line.Set('chart.filled', false);
line.Set("chart.labels.above", true); // MUESTRA SOBRE LA lineRA EL VALOR, boolean
line.Set("chart.labels.above.decimals", 2); //DECIMALES ON, cta. de decimales
line.Set("chart.text.angle", 90); //DECIMALES ON, cta. de decimales
line.Set("title", titulo);
line.Set("chart.gutter.top", 50);
line.Set("chart.gutter.left", 80);
line.Set("chart.gutter.bottom", 150);
line.Set("chart.scale.point", ',');
//line.Set("ymax", maximo);
line.Set("chart.variant", "3d");
line.Set("chart.xlabels.offset", 20);
line.Set("title.yaxis", unidad);
line.Set("chart.title.yaxis.pos", 0.10);
line.Set("chart.title.yaxis.color", "black");
line.Set("chart.scale.decimals",2);
// Now call the .Draw() method to draw the chart.
line.Draw();
},
graficarSimple: function(data){
if(data.data === 'No hay datos'){
RGraph.Reset(grafico);
$('#noData').html('No hay datos disponibles');
} else {
console.log(data);
RGraph.Reset(grafico);
$('#noData').html('');
$.each(data.data, function(i){
data.data[i] = (data.data[i] === null) ? 'null' : eval(data.data[i]);
})
var resultados = data.data;
var unidad = data.unidad;
var titulo = data.titulo;
var maximo = eval(data.maximo);
var bar = new RGraph.Bar('grafico', resultados);
bar.Set('chart.labels', data.labels);
bar.Set('chart.ymax', maximo);
bar.Set("chart.labels.above", true); // MUESTRA SOBRE LA BARRA EL VALOR, boolean
bar.Set("chart.labels.above.decimals", 2); //DECIMALES ON, cta. de decimales
bar.Set("chart.text.angle", 90); //DECIMALES ON, cta. de decimales
bar.Set("title", titulo);
bar.Set("chart.gutter.top", 50);
bar.Set("chart.gutter.left", 80);
bar.Set("chart.gutter.bottom", 150);
bar.Set("chart.scale.point", ',');
//bar.Set("ymax", maximo);
bar.Set("chart.variant", "3d");
bar.Set("chart.xlabels.offset", 20);
bar.Set("title.yaxis", unidad);
bar.Set("chart.title.yaxis.pos", 0.10);
bar.Set("chart.title.yaxis.color", "black");
bar.Set("chart.scale.decimals",2);
bar.Set("title.xaxis.pos", 0.25);
RGraph.Effects.Bar.Grow(bar);
}
},
mostrarCapa: function(mostrar,ocultar){
$("#"+ocultar).fadeOut('slow', function(){$("#"+mostrar).fadeIn();})
$("#tipoConsulta").attr("value" , mostrar);
},
datepickerPorEstacion: function(estacion){
$(".datepicker").datepicker( "destroy" );
$.ajax({
type: 'POST',
url: 'modelo/modelo.php',
data: {'maxmin' : estacion},
success: function(resp){
mD = resp.max;
miD = resp.min;
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
defaultDate: ""+mD,
minDate: ""+miD,
maxDate: ""+mD,
});
}
});
},
mostrarMeteoHora: function(hora){
var self = Consultas;
var estacion = sEst.val();
var data = { meteo: 'hora', estacion: estacion, hora: hora};
$.ajax({
type: 'POST',
url: 'modelo/modelo2.php',
data: data,
beforeSend: function() {
$('.aLoader').fadeIn();
},
complete: function() {
$('.aLoader').fadeOut();
},
success: function(resp){
//vaciar los contenidos
$("#brujula").html("");
$("#datosMeteo .resp").html("");
if(resp.length == 0){
$("#datosMeteo .resp").html("No hay datos");
} else {
$.each(resp, function(index){
var param = resp[index].ContaminantesDescripcion;
var valor = resp[index].ValorMedido;
var imagen = resp[index].urlImagen;
var unidad = resp[index].Unidad;
if(param == "Dirección del Viento") {
self.dibujarBrujula(valor);
} else {
rotacion = "";
$("#datosMeteo .resp").append("