Chart.js data dinámica con PHP MySql

Chart.js data dinámica con PHP MySql / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Chart.js data dinámica con PHP MySql

"Chart.js es una biblioteca JavaScript, la cual pinta datos usando el elemento canvas de HTML5 para desarrollar gráficos y tablas."

Vamos a centrarnos exclusivamente en la data de forma dinámica llamando a una base de datos con PHP y MySql.

Una vez realizada la conexión:

$sql="SELECT *  FROM tablaName WHERE id ORDER BY fecha DESC";
$result=  mysqli_query($conexion, $sql);
$nfilas=  mysqli_num_rows($result);

Bajo el canvas del chart y siempre dentro del bucle FOR, ya que vamos a mostrar varios gráficos, por ejemplo, tantos como encuestas se rellenen. Ponemos el script con todo el desarrollo del chart, (el motivo de esto lo explicaré al final.) nos centramos en el data, para mostrar dos filas de datos por cada chart, llamando a los names de los inputs desde donde se recogen los valores en la supuesta encuesta:

Por ejemplo: <?=$fila["questionb1"]?>, <?=$fila["questionb2"]?>, etc.

	datasets: [{
	    data: [, , , , ]
	}, {
	    data: [, , , , ]
	}]

En este ejemplo, deseamos mostrar varios charts de forma dinámica, como la llamada se realiza por el ID, solo mostraria uno, pero aprovechando que lo pondremos dentro de un bucle FOR para mostrar los datos, realizamos un conteo del ID asignado al canvas para ir añadiendole un valor superior a cada vuelta del bucle y asi modificando su ID de forma dinamica.

El HTML:

<canvas id="canvas<?=$i+1?>"></canvas>

LLamada en el Javascript:

var ctx = document.getElementById("canvas<?=$i+1?>").getContext("2d");

Puedes ver toda la documentación y descargar los archivos desde la web oficial de chart.js

Mariano J.

Escribe un comentario

Tu email no se hará visible