Visualización de Datos en Tiempo Real
Visualización de Datos en Tiempo Real
Para la visualización de datos en tiempo real, se pueden utilizar librerías como Chart.js o D3.js, que permiten crear gráficos interactivos y dinámicos. Estas herramientas son ideales por su capacidad de trabajar en streaming y actualizar los gráficos en tiempo real a medida que llegan nuevos datos. A continuación se describen algunas de ellas.
Chart.js
La librería por excelencia para gráficos sencillos y rápidos. Permite crear gráficos de líneas, barras y pasteles de manera sencilla y con una buena apariencia visual. Es OpenSource y cuenta como una buena documentación. Su integración es muy básica, tal como se muestra en el código a continuación.
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>Sin embargo, para uso en streaming de grandes volumes de datos o pequeños tiempos de actualización, habría que considerar otras opciones más robustas, ya que no está diseñado para manejar esos casos de uso de manera eficiente.
D3.js
A diferencia de Chart.js, este no renderiza los gráficos sobre un canvas, sino que utiliza elementos SVG para crear gráficos más complejos y personalizables. D3.js es ideal para visualizaciones interactivas y dinámicas, permitiendo manipular el DOM en función de los datos. Sin embargo, su curva de aprendizaje es más pronunciada y puede requerir más tiempo de desarrollo.
Amcharts
Como se ha mencionado, Chart.js es adecuado para visualizar datos simples, pero no está optimizado para manejar grandes volúmenes de información. Por otro lado, D3.js permite trabajar con datasets extensos y complejos, aunque esto implica una mayor dificultad en su implementación y gestión. En este contexto, Amcharts surge como una alternativa intermedia, combinando buen rendimiento y facilidad de uso. Esta librería facilita la creación de gráficos interactivos y altamente personalizables, requiriendo menos esfuerzo que D3.js y ofreciendo más funcionalidades que Chart.js. En el ámbito empresarial, Amcharts es ampliamente utilizada por organizaciones como Microsoft, Apple, NASA y Siemens. Aunque no es OpenSource, dispone de una versión gratuita con funcionalidades limitadas.
El siguiente ejemplo muestra la implementación de un gráfico de barras con Amcharts. Aunque su integración es más elaborada que la de Chart.js, proporciona mayor flexibilidad, opciones de personalización y una API avanzada para animaciones.
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
var root = am5.Root.new("chartdiv");
// Set themes
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: "panX",
wheelY: "zoomX",
pinchZoomX: true,
paddingLeft:0,
paddingRight:1
}));
// Add cursor
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
cursor.lineY.set("visible", false);
// Create axes
var xRenderer = am5xy.AxisRendererX.new(root, {
minGridDistance: 30,
minorGridEnabled: true
});
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});
xRenderer.grid.template.setAll({
location: 1
})
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: "country",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
var yRenderer = am5xy.AxisRendererY.new(root, {
strokeOpacity: 0.1
})
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: yRenderer
}));
// Create series
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
sequencedInterpolation: true,
categoryXField: "country",
tooltip: am5.Tooltip.new(root, {
labelText: "{valueY}"
})
}));
series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5, strokeOpacity: 0 });
series.columns.template.adapters.add("fill", function (fill, target) {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add("stroke", function (stroke, target) {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
// Set data
var data = [{
country: "Germany",
value: 1322
}, {
country: "France",
value: 1114
}, {
country: "Spain",
value: 711
}, {
country: "Netherlands",
value: 665
}];
xAxis.data.setAll(data);
series.data.setAll(data);
series.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>JointJS
Las bibliotecas mencionadas anteriormente se orientan principalmente a la creación de gráficos para visualización de datos. Sin embargo, cuando se trata de representar diagramas, flujos de procesos o grafos, estas herramientas no resultan la opción más adecuada. Si bien D3.js podría utilizarse con este fin, su implementación resulta demasiado compleja para este tipo de tareas específicas. En este contexto, una de las soluciones más populares en la actualidad es JointJS, empleada por empresas como Apple, Bosch, BMW o General Electric.
JointJS se distribuye en dos versiones: la versión open source, que proporciona las funcionalidades básicas para la creación de diagramas, y JointJS+, una versión comercial que incluye módulos avanzados, interfaces mejoradas y componentes especializados orientados a aplicaciones empresariales.
A diferencia de bibliotecas de visualización como Chart.js, JointJS está diseñada para trabajar con diagramas de manera sencilla. Su API se basa en la creación de figuras geométricas y su posterior conexión mediante enlaces (links), lo que permite construir diagramas y grafos de forma modular. El flujo típico de trabajo consiste en crear un lienzo (paper) asociado a un gráfico (graph), definir los elementos que lo componen y establecer las conexiones entre ellos.
var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
el: document.getElementById('myDiagram'),
model: graph,
width: 800,
height: 600,
gridSize: 10
});
var rect1 = new joint.shapes.standard.Rectangle();
rect1.position(100, 30);
rect1.resize(100, 40);
rect1.attr({
body: { fill: 'lightblue' },
label: { text: 'Inicio', fill: 'black' }
});
rect1.addTo(graph);
var rect2 = new joint.shapes.standard.Rectangle();
rect2.position(300, 30);
rect2.resize(100, 40);
rect2.attr({
body: { fill: 'lightgreen' },
label: { text: 'Fin', fill: 'black' }
});
rect2.addTo(graph);
// Conexión entre los nodos
var link = new joint.shapes.standard.Link();
link.source(rect1);
link.target(rect2);
link.addTo(graph);