error
This commit is contained in:
parent
b5b9787ea2
commit
3247d9dfd7
|
@ -111,8 +111,10 @@
|
|||
<div class="form-group">
|
||||
<label for="codigo_postal" class="required">Código Postal</label>
|
||||
<input type="number" min="0" step="1" id="codigo_postal" name="codigo_postal" maxlength="10" required>
|
||||
<button type="button" id="buscarBtn"><span class="material-icons">search</span>Buscar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-col">
|
||||
<div class="form-group">
|
||||
<label for="id_estado">Estado</label>
|
||||
|
@ -253,5 +255,6 @@
|
|||
<script src="js/form.js"></script>
|
||||
<script src="js/form_datos_extendidos.js"></script>
|
||||
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
|
||||
<script src="js/buscarCodigo.js"></script>
|
||||
</body>
|
||||
</html>
|
72
inicio.html
72
inicio.html
|
@ -134,7 +134,7 @@
|
|||
<div class="data">
|
||||
<div class="content-data">
|
||||
<div class="head">
|
||||
<h3>Sales Report</h3>
|
||||
<h3>Generos</h3>
|
||||
<div class="menu">
|
||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||
<ul class="menu-link">
|
||||
|
@ -150,63 +150,7 @@
|
|||
</div>
|
||||
<div class="content-data">
|
||||
<div class="head">
|
||||
<h3>Chatbox</h3>
|
||||
<div class="menu">
|
||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||
<ul class="menu-link">
|
||||
<li><a href="#">Edit</a></li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Remove</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-box">
|
||||
<p class="day"><span>Today</span></p>
|
||||
<div class="msg">
|
||||
<img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cGVvcGxlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
|
||||
<div class="chat">
|
||||
<div class="profile">
|
||||
<span class="username">Alan</span>
|
||||
<span class="time">18:30</span>
|
||||
</div>
|
||||
<p>Hello</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg me">
|
||||
<div class="chat">
|
||||
<div class="profile">
|
||||
<span class="time">18:30</span>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque voluptatum eos quam dolores eligendi exercitationem animi nobis reprehenderit laborum! Nulla.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg me">
|
||||
<div class="chat">
|
||||
<div class="profile">
|
||||
<span class="time">18:30</span>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, architecto!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg me">
|
||||
<div class="chat">
|
||||
<div class="profile">
|
||||
<span class="time">18:30</span>
|
||||
</div>
|
||||
<p>Lorem ipsum, dolor sit amet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
<form action="#">
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Type...">
|
||||
<button type="submit" class="btn-send"><i class='bx bxs-send' ></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="content-data">
|
||||
<div class="head">
|
||||
<h3>Sales Report</h3>
|
||||
<h3>Edades</h3>
|
||||
<div class="menu">
|
||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||
<ul class="menu-link">
|
||||
|
@ -217,12 +161,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div id="basic"></div>
|
||||
<div id="chart2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-data">
|
||||
<div class="head">
|
||||
<h3>Sales Report</h3>
|
||||
<h3>Estados</h3>
|
||||
<div class="menu">
|
||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||
<ul class="menu-link">
|
||||
|
@ -233,12 +177,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div id="treemap"></div>
|
||||
<div id="chart3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-data">
|
||||
<div class="head">
|
||||
<h3>Sales Report</h3>
|
||||
<h3>Examenes</h3>
|
||||
<div class="menu">
|
||||
<i class='bx bx-dots-horizontal-rounded icon'></i>
|
||||
<ul class="menu-link">
|
||||
|
@ -249,7 +193,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div id="polar"></div>
|
||||
<div id="chart4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -259,7 +203,7 @@
|
|||
<!-- NAVBAR -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||
<script src="js/inicio.js"></script>
|
||||
<script type="module" src="js/inicio.js"></script>
|
||||
<script src="https://website-widgets.pages.dev/dist/sienna.min.js" defer></script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,77 @@
|
|||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var buscarBtn = document.getElementById("buscarBtn");
|
||||
|
||||
//Añadir un evento al boton de buscar
|
||||
buscarBtn.addEventListener("click", function() {
|
||||
var codigoPostal = document.getElementById("codigo_postal").value;
|
||||
console.log(codigoPostal);
|
||||
|
||||
//verificar si el codigo postal esta vacio
|
||||
if (codigoPostal) {
|
||||
//crear la url para la peticion
|
||||
var url = "./php/buscarCodigo.php?codigo_postal=" + encodeURIComponent(codigoPostal);
|
||||
|
||||
//Realiza una solicitud HTTP GET a la URL especificada
|
||||
fetch(url)
|
||||
.then(response => {
|
||||
//console.log("Estado de la respuesta:", response.status);
|
||||
//console.log("Contenido de la respuesta:", response);
|
||||
// Verifica si la respuesta del servidor es exitosa
|
||||
if (!response.ok) {
|
||||
throw new Error("Error en la respuesta del servidor");
|
||||
}
|
||||
//Convierte la respuesta a formato JSON
|
||||
return response.json();
|
||||
|
||||
|
||||
})
|
||||
.then(data => {
|
||||
var estadoSelect = document.getElementById("id_estado");
|
||||
var municipioSelect = document.getElementById("id_municipio");
|
||||
var coloniaSelect = document.getElementById("id_colonia");
|
||||
|
||||
// Inicializa los elementos select con una opción por defecto
|
||||
estadoSelect.innerHTML = "<option value=''>Seleccionar Estado</option>";
|
||||
municipioSelect.innerHTML = "<option value=''>Seleccionar Municipios</option>";
|
||||
coloniaSelect.innerHTML = "<option value=''>Seleccionar Colonia</option>";
|
||||
|
||||
// Verifica si se recibieron datos
|
||||
if (data.length > 0) {
|
||||
//Crea conjuntos para almacenar estados, ciudades y colonias únicos
|
||||
let estados = new Set();
|
||||
let municipios = new Set();
|
||||
let colonias = [];
|
||||
|
||||
// Itera sobre cada fila de datos recibidos
|
||||
data.forEach(row => {
|
||||
estados.add(row.estado);
|
||||
municipios.add(row.municipio);
|
||||
colonias.push(row.colonia);
|
||||
});
|
||||
|
||||
//Añade las opciones de estados al elemento select
|
||||
estados.forEach(estado => {
|
||||
estadoSelect.innerHTML += "<option value='" + estado + "'>" + estado + "</option>";
|
||||
});
|
||||
|
||||
//Añade las opciones de ciudades al elemento select
|
||||
municipios.forEach(municipio => {
|
||||
municipioSelect.innerHTML += "<option value='" + municipio + "'>" + municipio + "</option>";
|
||||
});
|
||||
|
||||
//Añade las opciones de colonias al elemento select
|
||||
colonias.forEach(colonia => {
|
||||
coloniaSelect.innerHTML += "<option value='" + colonia + "'>" + colonia + "</option>";
|
||||
});
|
||||
} else {
|
||||
alert("No se encontraron datos para el código postal ingresado.");
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error en la solicitud:", error);
|
||||
});
|
||||
} else {
|
||||
alert("Por favor, ingrese un código postal.");
|
||||
}
|
||||
});
|
||||
});
|
|
@ -0,0 +1,143 @@
|
|||
async function recuperarCantidadGenero(tipoConsulta) {
|
||||
try {
|
||||
const response = await fetch("./php/graficos.php", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ tipoConsulta }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
return data.cantidad || 0;
|
||||
} catch (error) {
|
||||
console.error("Error al recuperar datos:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function recuperarCantidadEdad(tipoConsulta) {
|
||||
try {
|
||||
const response = await fetch("./php/graficos.php", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ tipoConsulta }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
return data.cantidad || 0;
|
||||
} catch (error) {
|
||||
console.error("Error al recuperar datos:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function recuperarCantidadEstado(tipoConsulta) {
|
||||
try {
|
||||
const response = await fetch("./php/graficos.php", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ tipoConsulta }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!Array.isArray(data)) {
|
||||
throw new Error("La respuesta del backend no es un array.");
|
||||
}
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Error al recuperar datos de estados:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function recuperarCantidadExamen(tipoConsulta) {
|
||||
try {
|
||||
const response = await fetch("./php/graficos.php", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ tipoConsulta }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!Array.isArray(data)) {
|
||||
throw new Error("La respuesta del backend no es un array");
|
||||
}
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("Error al recuperar datos de examenes:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function obtenerDatosEdades() {
|
||||
const edad1 = await recuperarCantidadEdad("Menor de 18 años");
|
||||
const edad2 = await recuperarCantidadEdad("18 a 24 años");
|
||||
const edad3 = await recuperarCantidadEdad("25 a 34 años");
|
||||
const edad4 = await recuperarCantidadEdad("35 a 44 años");
|
||||
const edad5 = await recuperarCantidadEdad("45 a 54 años");
|
||||
const edad6 = await recuperarCantidadEdad("55 a 64 años");
|
||||
const edad7 = await recuperarCantidadEdad("65 años o más");
|
||||
|
||||
return [edad1, edad2, edad3, edad4, edad5, edad6];
|
||||
}
|
||||
|
||||
|
||||
async function obtenerDatosGeneros() {
|
||||
const femenino = await recuperarCantidadGenero("Femenino");
|
||||
const masculino = await recuperarCantidadGenero("Masculino");
|
||||
const noDefinido = await recuperarCantidadGenero("Prefiero no decirlo");
|
||||
|
||||
return [femenino, masculino, noDefinido];
|
||||
}
|
||||
|
||||
async function obtenerDatosEstados() {
|
||||
try {
|
||||
const estados = await recuperarCantidadEstado("Estados");
|
||||
|
||||
if (!Array.isArray(estados)) {
|
||||
console.error("Error: 'estados' no es un array. Verifica la respuesta del backend");
|
||||
return [];
|
||||
}
|
||||
|
||||
const estadosValidos = estados.filter(estado => estado.estado && estado.cantidad !== undefined);
|
||||
|
||||
return estadosValidos;
|
||||
} catch (error) {
|
||||
console.error("Error al obtener datos de estados:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function obtenerDatosExamenes() {
|
||||
try {
|
||||
const examenes = await recuperarCantidadExamen("Examenes");
|
||||
|
||||
if (!Array.isArray(examenes)) {
|
||||
console.error("Error: 'examenes' no es un array. Verifica la respuesta del backend");
|
||||
return [];
|
||||
}
|
||||
|
||||
const examenesValidos = examenes.filter(examen => examen.examen && examen.cantidad !== undefined);
|
||||
|
||||
return examenesValidos;
|
||||
} catch (error) {
|
||||
console.error("Error al obtener datos de examenes:", error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export { obtenerDatosGeneros, obtenerDatosEdades, obtenerDatosEstados, obtenerDatosExamenes };
|
364
js/inicio.js
364
js/inicio.js
|
@ -2,6 +2,7 @@
|
|||
const allDropdown = document.querySelectorAll('#sidebar .side-dropdown');
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
|
||||
|
||||
allDropdown.forEach(item=> {
|
||||
const a = item.parentElement.querySelector('a:first-child');
|
||||
a.addEventListener('click', function (e) {
|
||||
|
@ -162,193 +163,194 @@ allProgress.forEach(item=> {
|
|||
|
||||
|
||||
|
||||
import { obtenerDatosGeneros, obtenerDatosEdades, obtenerDatosEstados,obtenerDatosExamenes } from './funcionesGraficos.js';
|
||||
|
||||
// APEXCHART
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'series1',
|
||||
data: [31, 40, 28, 51, 42, 109, 100]
|
||||
}, {
|
||||
name: 'series2',
|
||||
data: [11, 32, 45, 32, 34, 52, 41]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area'
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
},
|
||||
};
|
||||
async function inicializarGrafico() {
|
||||
const [femenino, masculino, noDefinido] = await obtenerDatosGeneros();
|
||||
|
||||
var options2 = {
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||||
}, {
|
||||
name: 'Free Cash Flow',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 5,
|
||||
borderRadiusApplication: 'end'
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '$ (thousands)'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const options = {
|
||||
series: [
|
||||
{ name: 'Femenino', data: [femenino] },
|
||||
{ name: 'Masculino', data: [masculino] },
|
||||
{ name: 'Prefiero no decirlo', data: [noDefinido] },
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Géneros'],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " personas";
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
var options3 = {
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'New Delhi',
|
||||
y: 218
|
||||
},
|
||||
{
|
||||
x: 'Kolkata',
|
||||
y: 149
|
||||
},
|
||||
{
|
||||
x: 'Mumbai',
|
||||
y: 184
|
||||
},
|
||||
{
|
||||
x: 'Ahmedabad',
|
||||
y: 55
|
||||
},
|
||||
{
|
||||
x: 'Bangaluru',
|
||||
y: 84
|
||||
},
|
||||
{
|
||||
x: 'Pune',
|
||||
y: 31
|
||||
},
|
||||
{
|
||||
x: 'Chennai',
|
||||
y: 70
|
||||
},
|
||||
{
|
||||
x: 'Jaipur',
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 'Surat',
|
||||
y: 44
|
||||
},
|
||||
{
|
||||
x: 'Hyderabad',
|
||||
y: 68
|
||||
},
|
||||
{
|
||||
x: 'Lucknow',
|
||||
y: 28
|
||||
},
|
||||
{
|
||||
x: 'Indore',
|
||||
y: 19
|
||||
},
|
||||
{
|
||||
x: 'Kanpur',
|
||||
y: 29
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap'
|
||||
},
|
||||
title: {
|
||||
text: 'Basic Treemap'
|
||||
}
|
||||
};
|
||||
const chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var options4 = {
|
||||
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
|
||||
chart: {
|
||||
type: 'polarArea',
|
||||
},
|
||||
stroke: {
|
||||
colors: ['#fff']
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 200
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
inicializarGrafico();
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#polar"), options4);
|
||||
chart.render();
|
||||
async function inicializarGrafico2() {
|
||||
const [edad1,edad2,edad3,edad4,edad5,edad6,edad7] = await obtenerDatosEdades();
|
||||
|
||||
const options2 = {
|
||||
series: [
|
||||
{ name: 'Menor de 18 años', data: [edad1] },
|
||||
{ name: '18 a 24 años', data: [edad2] },
|
||||
{ name: '25 a 34 años', data: [edad3] },
|
||||
{ name: '35 a 44 años', data: [edad4] },
|
||||
{ name: '45 a 54 años', data: [edad5] },
|
||||
{ name: '55 a 64 años', data: [edad6] },
|
||||
{ name: '65 años o más', data: [edad7] },
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Edades'],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " Años";
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
|
||||
chart2.render();
|
||||
}
|
||||
|
||||
inicializarGrafico2();
|
||||
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart"), options);
|
||||
chart.render();
|
||||
async function inicializarGrafico3() {
|
||||
try {
|
||||
const estados = await obtenerDatosEstados();
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic"), options2);
|
||||
chart.render();
|
||||
if (!Array.isArray(estados)) {
|
||||
console.error("Error: 'estados' no es un array. Verifica la funcion obtenerDatosEstados");
|
||||
return;
|
||||
}
|
||||
|
||||
var basic = new ApexCharts(document.querySelector("#treemap"), options3);
|
||||
basic.render();
|
||||
const seriesData = estados.map(estado => ({
|
||||
name: estado.estado,
|
||||
data: [estado.cantidad]
|
||||
}));
|
||||
|
||||
const options3 = {
|
||||
series: seriesData,
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: estados.map(estado => estado.estado), // categorias en el eje X
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " personas";
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chart3 = new ApexCharts(document.querySelector("#chart3"), options3);
|
||||
chart3.render();
|
||||
} catch (error) {
|
||||
console.error("Error al inicializar el gráfico 3:", error);
|
||||
}
|
||||
}
|
||||
|
||||
inicializarGrafico3();
|
||||
|
||||
async function inicializarGrafico4() {
|
||||
try {
|
||||
const examenes = await obtenerDatosExamenes();
|
||||
|
||||
if (!Array.isArray(examenes)) {
|
||||
console.error("Error: 'examenes' no es un array. Verifica la función obtenerDatosExamenes");
|
||||
return;
|
||||
}
|
||||
|
||||
const seriesData = examenes.map(examen => ({
|
||||
name: examen.examen,
|
||||
data: [examen.cantidad]
|
||||
}));
|
||||
|
||||
const options4 = {
|
||||
series: seriesData,
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '55%',
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: examenes.map(examen => examen.examen), // categorías en el eje X
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " examenes";
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const chart4 = new ApexCharts(document.querySelector("#chart4"), options4);
|
||||
chart4.render();
|
||||
} catch (error) {
|
||||
console.error("Error al inicializar el grafico 4:", error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
inicializarGrafico4();
|
|
@ -0,0 +1,53 @@
|
|||
<?php
|
||||
// filepath: c:\xampp\htdocs\Proyecto_Lania\LANIA_Proyecto\php\buscarCodigo.php
|
||||
include 'conexionBd.php'; // Asegúrate de que el archivo esté en la ruta correcta
|
||||
|
||||
header('Content-Type: application/json'); // Aseguramos que la respuesta sea JSON
|
||||
|
||||
// Crear instancia de la conexión
|
||||
$conexion = new Conexion();
|
||||
$conexionBD = $conexion->conectar(); // Establecer conexión
|
||||
|
||||
// Verificar que se ha enviado el parámetro 'codigo_postal'
|
||||
if (isset($_GET['codigo_postal'])) {
|
||||
$codigo_postal = $_GET['codigo_postal'];
|
||||
|
||||
// Consulta SQL para obtener estado, ciudad y colonia en base al código postal
|
||||
$sql = "SELECT e.nombre AS estado, m.nombre AS municipio, c.nombre AS colonia
|
||||
FROM colonias c
|
||||
JOIN municipios m ON c.municipio = m.id
|
||||
JOIN estados e ON m.estado = e.id
|
||||
WHERE c.codigo_postal = ?";
|
||||
|
||||
// Verificar que la conexión a la base de datos esté activa
|
||||
if ($conexionBD) {
|
||||
// Preparar la sentencia SQL
|
||||
$stmt = $conexionBD->prepare($sql);
|
||||
$stmt->bind_param("i", $codigo_postal); // El parámetro es un entero (i)
|
||||
$stmt->execute();
|
||||
|
||||
// Obtener los resultados
|
||||
$result = $stmt->get_result();
|
||||
|
||||
// Verificar si hay resultados
|
||||
if ($result->num_rows > 0) {
|
||||
$data = [];
|
||||
while ($row = $result->fetch_assoc()) {
|
||||
$data[] = $row; // Agregar cada resultado a un array
|
||||
}
|
||||
echo json_encode($data); // Devolver los resultados en formato JSON
|
||||
} else {
|
||||
echo json_encode([]); // Si no hay resultados, devolver un array vacío
|
||||
}
|
||||
|
||||
$stmt->close();
|
||||
} else {
|
||||
echo json_encode(["error" => "Conexión a la base de datos fallida."]);
|
||||
}
|
||||
|
||||
$conexionBD->close();
|
||||
} else {
|
||||
// Si no se recibe un código postal, respondemos con un error
|
||||
echo json_encode(["error" => "Código postal no proporcionado."]);
|
||||
}
|
||||
?>
|
|
@ -0,0 +1,26 @@
|
|||
<?php
|
||||
class Conexion{
|
||||
private $host = "localhost";
|
||||
private $dbname = "lania_cc";
|
||||
private $user = "root";
|
||||
private $password = "password";
|
||||
private $conexion;
|
||||
|
||||
|
||||
public function conectar() {
|
||||
$this->conexion = new mysqli($this->host, $this->user, $this->password, $this->dbname);
|
||||
|
||||
if ($this->conexion->connect_error) {
|
||||
die('Error de conexión: ' . $this->conexion->connect_error);
|
||||
}
|
||||
|
||||
return $this->conexion;
|
||||
}
|
||||
|
||||
public function cerrarConexion() {
|
||||
if ($this->conexion) {
|
||||
$this->conexion->close();
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
|
@ -0,0 +1,294 @@
|
|||
<?php
|
||||
require_once './conexionBd.php';
|
||||
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
$tipoConsulta = $input['tipoConsulta'] ?? '';
|
||||
|
||||
$graficos = new Graficos();
|
||||
|
||||
switch ($tipoConsulta) {
|
||||
case 'Femenino':
|
||||
$cantidad = $graficos->obtenerGeneroFemenino();
|
||||
break;
|
||||
case 'Masculino':
|
||||
$cantidad = $graficos->obtenerGeneroMasculino();
|
||||
break;
|
||||
case 'Prefiero no decirlo':
|
||||
$cantidad = $graficos->obtenerGeneroNoDefinido();
|
||||
break;
|
||||
case 'Menor de 18 años':
|
||||
$cantidad = $graficos->obtenerEdadMenor18();
|
||||
break;
|
||||
case '18 a 24 años':
|
||||
$cantidad = $graficos->obtenerEdad1824();
|
||||
break;
|
||||
case '25 a 34 años':
|
||||
$cantidad = $graficos->obtenerEdad2434();
|
||||
break;
|
||||
case '35 a 44 años':
|
||||
$cantidad = $graficos->obtenerEdad3544();
|
||||
break;
|
||||
case '45 a 54 años':
|
||||
$cantidad = $graficos->obtenerEdad4554();
|
||||
break;
|
||||
case '55 a 64 años':
|
||||
$cantidad = $graficos->obtenerEdad5564();
|
||||
break;
|
||||
case '65 años o más':
|
||||
$cantidad = $graficos->obtenerEdad65oMas();
|
||||
break;
|
||||
case 'Estados':
|
||||
$cantidad = $graficos->obtenerEstados();
|
||||
echo json_encode($cantidad); // Devolver directamente el array de estados
|
||||
exit; // Terminar la ejecucion aqui
|
||||
case 'Examenes':
|
||||
$cantidad = $graficos->obtenerExamenes();
|
||||
echo json_encode($cantidad); // Devolver directamente el array de examenes
|
||||
exit; // Terminar la ejecucion aqui
|
||||
default:
|
||||
$cantidad = 0;
|
||||
}
|
||||
|
||||
echo json_encode(['cantidad' => $cantidad]);
|
||||
}
|
||||
|
||||
class Graficos{
|
||||
private $conexion;
|
||||
protected $db;
|
||||
|
||||
public function __construct() {
|
||||
$this->conexion = new Conexion();
|
||||
$this->db = $this->conexion->conectar();
|
||||
}
|
||||
|
||||
|
||||
public function obtenerGeneroFemenino() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS Femenino FROM candidato WHERE id_genero = 2 ");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['Femenino'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function obtenerGeneroMasculino() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS Maculino FROM candidato WHERE id_genero = 1 ");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['Maculino'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function obtenerGeneroNoDefinido() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS NoDefinido FROM candidato WHERE id_genero = 3 ");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['NoDefinido'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function obtenerEdadMenor18() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS menorEdad FROM candidato WHERE id_rango_edad = 1");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['menorEdad'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function obtenerEdad1824() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS edad1824 FROM candidato WHERE id_rango_edad = 2");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['edad1824'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function obtenerEdad2434() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS edad2434 FROM candidato WHERE id_rango_edad = 3");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['edad2434'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function obtenerEdad3544() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS edad3544 FROM candidato WHERE id_rango_edad = 4");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['edad3544'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
|
||||
public function obtenerEdad4554() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS edad4554 FROM candidato WHERE id_rango_edad = 5");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['edad4554'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
|
||||
public function obtenerEdad5564() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS edad5564 FROM candidato WHERE id_rango_edad = 6");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['edad5564'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function obtenerEdad65oMas() {
|
||||
$query = $this->db->prepare("SELECT COUNT(*) AS edad65oMas FROM candidato WHERE id_rango_edad = 7");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
$output = "0";
|
||||
|
||||
if($resultado->num_rows > 0) {
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$output= $data['edad65oMas'];
|
||||
}
|
||||
}
|
||||
$query->close();
|
||||
$this->db->close();
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function obtenerEstados() {
|
||||
try {
|
||||
$query = $this->db->prepare("
|
||||
SELECT estados.nombre AS estado, COUNT(*) AS cantidad
|
||||
FROM estados
|
||||
INNER JOIN info_candidatos ON info_candidatos.id_estado = estados.id
|
||||
GROUP BY estados.nombre
|
||||
ORDER BY estados.nombre
|
||||
");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
|
||||
$estados = [];
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$estados[] = $data;
|
||||
}
|
||||
|
||||
$query->close();
|
||||
|
||||
error_log(json_encode($estados));
|
||||
return $estados;
|
||||
} catch (Exception $e) {
|
||||
error_log("Error al obtener los estados: " . $e->getMessage());
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
public function obtenerExamenes() {
|
||||
try {
|
||||
$query = $this->db->prepare("SELECT nombre_examen AS examen , COUNT(*) AS cantidad
|
||||
FROM examen
|
||||
INNER JOIN candidato ON candidato.id_examen = examen.id_examen
|
||||
GROUP BY nombre_examen
|
||||
ORDER BY nombre_examen;
|
||||
");
|
||||
$query->execute();
|
||||
$resultado = $query->get_result();
|
||||
|
||||
$examenes = [];
|
||||
while ($data = $resultado->fetch_assoc()) {
|
||||
$examenes[] = $data;
|
||||
}
|
||||
|
||||
$query->close();
|
||||
|
||||
error_log(json_encode($examenes));
|
||||
return $examenes;
|
||||
} catch (Exception $e) {
|
||||
error_log("Error al obtener los examenes: " . $e->getMessage());
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
?>
|
Loading…
Reference in New Issue