Grafica en Tiempo Real / Realtime con ApexCharts.js

 in Web Development by

Las graficas ApexCharts tienen la posibilidad de usarlas como graficas en tiempo real, es decir esta haciendo peticiones cada cierto tiempo y si reciben datos se agregan nuevos datos a la grafica.

Anteriormente ya habiamos hablado de las graficas ApexCharts en el articulo Crear grafica de lineas , area y barras con ApexCharts.js

Si no tienen la libreria ApexCharts entonces tendrian que descargarla desde su pagina oficial https://apexcharts.com/ si no al final del articulo podran descargar el ejemplo completo con las librerias y todo.

Empecemos con el Codigo

Una vez descargado todo lo que necesitamos, ApexCharts y jQuery ahora lo incluimos en nuestro documento HTML.

<link href="apexcharts/apexcharts.css" rel="stylesheet">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="apexcharts/apexcharts.min.js"></script>

Ahora en el Body o cuerpo del documento vamos a agregar el resto de codigo.

Vamos a crear un DIV o contenedor para cargar la grafica.

<div id="myapexchart"></div>

Ahora el codigo para inicializar la grafica ApexCharts.

<script type="text/javascript"> 
 var options = {
            chart: {
                height: 380,
                type: 'line' // se puede cambiar por 'area' y 'bar'
            },
            title: {
                text: 'Grafica en Tiempo Real', // Titulo de la grafica, se muestra en la parte superior
            },
            xaxis: {
                categories: [],
            },
            series: [],
            noData: { text: "Cargando ..."},
            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();
</script>

Hasta este punto ya debe cargar la grafica sin datos. Ahora vamos a agregar el codigo para recibir los datos que deben estar en JSON.

<script type="text/javascript">
          var url = './data.php';

/* CARGAR LOS DATOS DE LA GRAFICA POR PRIMERA VEZ*/
$(document).ready(function(){
$.getJSON(url, function(response) {
    console.log(response.data);
  chart.updateSeries([{
    name: 'Lecturas',
    data: response.data
  }])
});

});


/* CARGAR LOS DATOS DE LA GRAFICA CADA 10 SEGUNDOS*/
window.setInterval(function () {

$.getJSON(url, function(response) {
    console.log(response.data);
  chart.updateSeries([{
    name: 'Lecturas',
    data: response.data
  }])
});
      }, 10000);
</script>

Como pueden ver son funciones getJSON de jquery y hacemos referencia a un archivo data.php que puede ser un JSON estatico o datos recibidos desde una base de datos.

Archivo data.php

{"data":
[
{"x":"Enero","y":"13.640"},
{"x":"Febrero","y":"1.054"},
{"x":"Marzo","y":"1.280"},
{"x":"Abril","y":"3.280"},
{"x":"Mayo","y":"2.280"},
{"x":"Junio","y":"9.280"},
{"x":"Julio","y":"6.280"},
{"x":"Agosto","y":"4.280"},
{"x":"Septiembre","y":"7.280"},
{"x":"Octubre","y":"0.280"},
{"x":"Noviembre","y":"8.280"},
{"x":"Diciembre","y":"1.780"}
]
}

Este es el formato que debe tener el archivo JSON al que hacemos solicitud de datos.

En este caso es un archivo es un archivo estatico, pero en el proximo ejemplo usando una base de datos mysql.

Probando el ejemplo

Para probar el ejemplo lo que tenemos que hacer es cargar todo y modificar los datos del archivo data.php

Recuerden que para que el ejemplo funcione tenemos que estar en un entorno de servidor, es decir usando desde el XAMPP o LAMPP cargado en la carpeta htdocs y ejecutado desde el navegador con http://localhost o bien desde un servidor / hosting.

Entonces cada 10 segundos la grafica cambiara y se recargaran automaticamente los valores.

Resultado

Descargar

A continuacion el enlace de descarga para obtener el ejemplo completo.

Link: https://www.dropbox.com/s/617mgbchqo8ke2v/apexchart-realtime1.zip

Finalizando

Mas adelante veremos mas ejemplos con ApexCharts, espero este ejemplo les guste y les ayude en sus proyectos.

Leave a comment