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.