Uno de los desafíos más comunes que los desarrolladores pueden enfrentar es el manejo y representación de datos. En este contexto, Morris.js surgen como una solución brillante que permite a los desarrolladores representar grandes volúmenes de datos de manera visual y fácil de comprender. Morris.js es una biblioteca de JavaScript potente pero sencilla que permite la creación de gráficos atractivos basados en datos.
Evidentemente, para alimentar estos gráficos con datos, necesitamos un método práctico y eficiente. Afortunadamente, los arrays en JavaScript son herramientas tremendamente versátiles con respecto al manejo de datos. En este artículo, cubriremos cómo puedes rellenar una gráfica Morris usando un array como fuente de datos en JavaScript.
Imaginemos que tenemos un conjunto de datos almacenado en un array. Para connectar y visualizar este array de datos en un gráfico de Morris, podemos seguir el siguiente procedimiento.
let misDatos = [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
];
new Morris.Line({
element: 'myfirstchart',
data: misDatos,
xkey: 'year',
ykeys: ['value'],
labels: ['Value']
});
En el código anterior, hemos definido un array llamado misDatos que contiene una serie de objetos representando nuestros datos para cada año. A continuación, hemos creado un nuevo gráfico de líneas utilizando la función Morris.Line. Los datos para este gráfico se obtienen directamente del array definido anteriormente. Los ejes x e y del gráfico se definen mediante las claves ‘year’ y ‘value’, respectivamente.
Este es un ejemplo sencillo y puede que tu array contenga una estructura de datos mucho más compleja. Por supuesto, en esos casos, tendríamos que realizar transformaciones adecuadas en nuestros datos para que sean aptos para el gráfico. Sin embargo, el principio esencial sigue siendo el mismo: estamos usando arrays para alimentar nuestro gráfico Morris.
let misDatos = [
{ year: '2008', value1: 20, value2: 30 },
{ year: '2009', value1: 10, value2: 20 },
{ year: '2010', value1: 5, value2: 25 },
{ year: '2011', value1: 5, value2: 22 },
{ year: '2012', value1: 20, value2: 30 }
];
new Morris.Line({
element: 'myfirstchart',
data: misDatos,
xkey: 'year',
ykeys: ['value1', 'value2'],
labels: ['Value 1', 'Value 2']
});
As you can see, you can easily plot more complex data structures by providing more keys and labels.
Now, this is not always the case as your array might not be suited to feed the chart directly. Perhaps you have a multidimensional array or just a plain single-dimension array with your data points. In this case, you would need to transform this array into a structure that Morris charts can understand.
let rawData = [20, 10, 5, 5, 20];
let years = ['2008', '2009', '2010', '2011', '2012'];
let transformedData = [];
for(let i = 0; i < rawData.length; i++){
transformedData.push({year: years[i], value: rawData[i]});
}
As you can see in the example above, we transformed our initial data structure into one that can be eaten by Morris charts. This is a very common scenario when dealing with legacy systems or APIs that don't provide data the way you'd like.
To conclude, the main advantage of using such a solution as Morris charts combined with JavaScript arrays is the flexibility and power this solution provides. Arrays allow to handle data in any shape or form and with the right transformations, this data can feed beautiful and powerful Morris charts. It's a match made in heaven!