[Js] Crear grafica de Lineas, Area y Barras con ApexCharts.js

ApexCharts.js es una librería para crear gráficas modernas y responsive de todo tipo con javascript, ApexCharts.js es código abierto y ayuda a crear gráficas interactivas en paginas web.

ApexCharts.js nos ofrece una nueva solución para crear gráficas para mostrar a usuarios y/o clientes, gráficas interactivas y listas para dispositivos móviles.

Dentro de las gráficas que podemos crear con ApexCharts.js son:

• Graficas de Lineas
• Graficas de Area
• Graficas de Barras
• Graficas Mixtas
• Graficas de Burbuja
• Graficas de Scater
• Graficas de Radar
• Graficas de Pie y Donut
• Heatmaps
• Entre otras

Ademas las gráficas cuentan con controles, como overlays, opcion para descargar en SVG y PNG

La librería cuenta con muchas opciones de personalizaciones y una buena documentación.

Podemos conseguir ApexCharts.js desde su pagina oficial https://apexcharts.com/

Crear una grafica de Lineas, Area y Barras con ApexCharts.js

La gráfica de lineas es la gráficas mas sencilla y básica en muchas librerías.

Con los mismos parámetros crearemos las graficas de area y barra, solo cambiaremos el parametro tipo o type.

Para crear una gráfica de lineas debemos seguir los siguientes pasos:

Paso 1. Descargar el paquete con los archivos en la pagina de apexcharts. Al final dejo el ejemplo completo.

Paso 2. Crear una pagina HTML e incluir los archivos apexcharts.js y apexcharts.css (Opcional si quieres bootstrap 3 o 4, en mi ejemplo uso bootstrap 4)

Paso 3. Crear un contenedor en la ubicación donde quieras colocar la gráfica. <div id=”myapexchart”></div>

Paso 4. Debajo del contenedor, agregar el siguiente código javascript dentro de <script></script> para crear la gráfica con mis parametros, tu los puedes modificar a tu antojo.

[code language=”javascript”]

var options = {
chart: {
height: 380,
type: ‘line’ // se puede cambiar por ‘area’ y ‘bar’
},
title: {
text: ‘Visitas: Ultimos 7 dias’, // Titulo de la grafica, se muestra en la parte superior
},
xaxis: {
categories: [‘7/Feb’, ‘8/Feb’, ‘9/Feb’, ’10/Feb’, ’11/Feb’, ’12/Feb’, ’13/Feb’], // son 7 valores, deben coincidir con los valores de los datos en las series.
},
series: [{
name: "Semana actual", // Nombre de la serie, se muestra cuando hay mas de 1 serie
data: [1284, 1235, 748, 795, 1546, 1465, 1609] // valores hay 7 valores, debes coincidir con los valores de: xaxis
}],
colors:[ ‘#9C27B0’ ] ,
grid: {
row: {
colors: [‘#e5e5e5′,’transparent’], // color de fondo separados por coma para alternarlos
}
}
}

var chart = new ApexCharts( document.querySelector("#myapexchart") , options);

chart.render();

[/code]

Agregue comentarios al código para que sea mas fácil entender cada parte.

Resultado

El resultado es el siguiente.

La gráfica esta realmente muy bien.

Descargar

A continuación les dejo la opción para descargar el ejemplo completo que utilice.

Link: https://drive.google.com/file/d/1u1-DqosRRXHIEf99k4GB8Xaia4xs7oED/view?usp=sharing

Conclusión

ApexCharts.js parece una buena opción para incluir en nuestros proyectos, sobre todo por estar muy completas las gráficas, llenas de opciones y ser open-source.

Ustedes que opinan?

No se olviden de compartir el enlace con sus amigos.