Este tutorial te guía en la creación de gráficos interactivos dentro de tus aplicaciones Node.js utilizando la versátil biblioteca de gráficos, billboard.js. Node.js en sí mismo no renderiza gráficos directamente en un navegador; en cambio, aprovechamos billboard.js, una biblioteca del lado del cliente, para servir el HTML, CSS y JavaScript necesarios para el renderizado de gráficos dentro de un entorno Node.js.
Tabla de Contenido
- Visión general de billboard.js
- Requisitos previos para billboard.js
- Creando un gráfico de líneas simple
- Personalización avanzada de gráficos (Opcional)
Visión general de billboard.js
billboard.js es una robusta biblioteca de gráficos JavaScript construida sobre D3.js. Su API limpia simplifica la creación de varios tipos de gráficos, incluyendo gráficos de líneas, gráficos de barras, gráficos de área, diagramas de dispersión y más. Su naturaleza ligera, sus extensas opciones de personalización y su documentación completa lo hacen ideal para integrar gráficos en aplicaciones Node.js. Debido a que se ejecuta completamente del lado del cliente, billboard.js asegura un rendimiento y una capacidad de respuesta mejorados, dejando a tu servidor Node.js libre para gestionar otras tareas.
Requisitos previos para billboard.js
Antes de comenzar, asegúrate de tener lo siguiente:
- Node.js y npm (o yarn): Descarga e instala Node.js y npm (Node Package Manager) o yarn desde el sitio web oficial de Node.js.
- Comprensión fundamental de HTML, CSS y JavaScript: Si bien billboard.js simplifica la creación de gráficos, el conocimiento básico de desarrollo web será beneficioso.
- Un editor de código o IDE: Elige un editor de código preferido (VS Code, Sublime Text, Atom, etc.) para escribir tu código.
Nota: No instalaremos billboard.js a través de npm directamente en nuestro proyecto Node.js, ya que es una biblioteca del lado del cliente. En cambio, lo incluiremos a través de una etiqueta « en nuestro HTML.
Creando un gráfico de líneas simple
Este ejemplo demuestra un gráfico de líneas básico. Configuraremos un servidor Node.js para servir un archivo HTML que contiene billboard.js y el código del gráfico.
1. Configuración del proyecto: Crea un directorio (por ejemplo, `node-chart-example`) y crea los siguientes archivos dentro de él:
2. `index.js` (servidor Node.js):
const http = require('http');
const fs = require('fs');
const path = require('path'); // Añadido para una mejor gestión de rutas
const server = http.createServer((req, res) => {
const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404);
res.end('Archivo no encontrado');
} else {
const extname = path.extname(filePath);
const contentType = extname === '.html' ? 'text/html' : 'application/javascript';
res.writeHead(200, { 'Content-Type': contentType });
res.end(data);
}
});
});
const port = 3000;
server.listen(port, () => {
console.log(`Servidor escuchando en el puerto ${port}`);
});
3. `index.html` (archivo HTML con gráfico):
<html>
<head>
<title>Gráfico Billboard.js</title>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = bb.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line'
}
});
</script>
</body>
</html>
4. Ejecuta el servidor: Navega a tu directorio de proyecto y ejecuta node index.js. Accede al gráfico en http://localhost:3000.
Personalización avanzada de gráficos (Opcional)
billboard.js ofrece una extensa personalización. Explora su documentación para funciones como etiquetas de ejes, colores, información sobre herramientas, manipulación de datos y más. Experimenta con diferentes tipos de gráficos y opciones para crear visualizaciones convincentes.