Este corto tutorial muestra cómo crear una visualización dinámica con Highcharts a partir de una consulta a la API de Eustat. Se presenta un ejemplo básico con el objetivo de incentivar el uso de la API en la visualización de estadísticas.
Highcharts es una biblioteca JavaScript de gráficos interactivos que permite generar visualizaciones atractivas con poco esfuerzo: líneas, barras, mapas, áreas, etc. Para ver gráficos más elaborados y su código, puedes visitar la galería de ejemplos de Highcharts.
Una de las ventajas de Highcharts es que se integra fácilmente con APIs y necesita poco HTML. Para este gráfico de líneas solo necesitaremos una página con una referencia a las librerías necesarias y un contenedor para el gráfico.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chart</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="container" style="height: 400px;"></div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
// Aquí se inserta el código para obtener datos de la API y dibujar el gráfico
</script>
</body>
</html>La siguiente consulta JSON se ha generado utilizando la interfaz de selección de variables y valores de una tabla del Banco de Datos de Eustat: https://www.eustat.eus/bankupx/pxweb/es/DB/-/PX_010154_cepv1_ep06b.px.
El asistente para la selección de valores permite seleccionar los datos que nos interesan fácilmente y obtener la consulta en formato JSON. Seleccionamos
la población total de la C.A. de Euskadi, Araba/Álava, Bizkaia y Gipuzkoa, a 1 de enero para los años 2001–2024. Esta consulta puede integrarse directamente
dentro del bloque <script> del HTML. El endpoint espera una solicitud POST con este contenido.
{
const url = "https://www.eustat.eus/bankupx/api/v1/es/DB/PX_010154_cepv1_ep06b.px";
const query = {
"query": [
{
"code": "ámbitos territoriales",
"selection": {
"filter": "item",
"values": ["00001", "01", "48", "20"]
}
},
{
"code": "grandes grupos de edad cumplida",
"selection": {
"filter": "item",
"values": ["10"]
}
},
{
"code": "sexo",
"selection": {
"filter": "item",
"values": ["10"]
}
},
{
"code": "periodo",
"selection": {
"filter": "item",
"values": [
"20010101", "20020101", ..., "20240101"
]
}
}
],
"response": {
"format": "json-stat"
}
}
}A continuación, deberemos especificar el título del gráfico, el nombre de los ejes y las unidades. El formato del código necesario puede verse en la siguiente página: https://www.highcharts.com/demo/highcharts/line-chart (haz clic en el botón Code). Utilizando JavaScript y Highcharts, hemos creado un gráfico dinámico simple. Los datos pueden actualizarse en todo momento gracias a la consulta JSON realizada mediante POST a la API de Eustat.
💡 Nota: haz clic con el botón derecho del ratón y selecciona "Ver código fuente de la página" para obtener el código HTML completo del gráfico y su integración con la API.