Scribd
Cargar
222 vistas

Gráficas Con CanvasJS (HTML + Javascript + MySQL + PHP) - Panama Hitek

El documento describe cómo crear gráficos interactivos utilizando los datos almacenados en una base de datos MySQL. Se explica cómo instalar XAMPP para habilitar un servidor local, crear una base de datos y tabla, e insertar datos de prueba. Luego, se crea un script PHP que extrae los datos de la base de datos y los almacena en un archivo JSON, el cual puede ser leído por JavaScript para generar gráficos dinámicos en el navegador.

Cargado por

Dany Sanchez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
222 vistas

Gráficas Con CanvasJS (HTML + Javascript + MySQL + PHP) - Panama Hitek

El documento describe cómo crear gráficos interactivos utilizando los datos almacenados en una base de datos MySQL. Se explica cómo instalar XAMPP para habilitar un servidor local, crear una base de datos y tabla, e insertar datos de prueba. Luego, se crea un script PHP que extrae los datos de la base de datos y los almacena en un archivo JSON, el cual puede ser leído por JavaScript para generar gráficos dinámicos en el navegador.

Cargado por

Dany Sanchez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 12

12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

Grá cas con CanvasJS (HTML + Javascript +


MySQL + PHP)
Por Antony García González - abril 20, 2016

El objetivo de este post es documentar los métodos que permiten montar una página web
en la cual podamos visualizar una grá ca interactiva a partir de los datos almacenados en
una base de datos. Debo admitir que mis habilidades en la programación web son
limitadas, razón por la cual escribo este post ya que recientemente he montado un
proyecto que integra HTML, JavaScript (Jquery, CanvasJS), MySQL y PHP. La grá ca
resultante luce así:

http://panamahitek.com/graficas-con-canvasjs/ 1/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

Esta grá ca la utilicé en una prueba experimental para probar el funcionamiento de un


sistema de captura de datos que se espera utilizar como parte de un sistema de alerta
temprana en la cuenca de un río aquí en Panamá.

Para construir este grá co se utilizó el API

CanvasJS. Con esta herramienta es muy sencillo construir un grá co como el que se
muestra en la gura anterior. Debo reiterar que mis habilidades en el uso de HTML, PHP y
Javascript son básicas y puede que la forma como he construido los códigos no sea la
mejor.

Consideraciones Previas
Antes de entrar en la programación, necesitaremos crear un servidor de prueba en
nuestra computadora. PHP es un lenguaje del lado del servidor, por lo cual debe
ejecutarse en un servidor para que podamos ver los resultados de lo que vamos
programando. Esto lo podemos lograr instalando XAMPP (yo utilizo Windows). La ventaja
de utilizar XAMPP es que nos permitirá, además de usar PHP, iniciar el servidor MySQL en
el cual crearemos la base de datos.

Cuando instalemos XAMPP, debemos abrir el XAMPP Control Panel e iniciar el Apache y
MySQL Server.

http://panamahitek.com/graficas-con-canvasjs/ 2/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

Con esto hemos habilitado el MySQL Server, el cual nos permitirá crear y manipular bases
de datos MySQL de forma local. El Apache Server es el que nos permitirá ejecutar scripts
en PHP.

El IDE que yo utilizo para casi cualquier tipo de programación es Netbeans. Usted puede
utilizar el IDE de su preferencia. En el Netbeans IDE creamos un proyecto PHP.

http://panamahitek.com/graficas-con-canvasjs/ 3/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

http://panamahitek.com/graficas-con-canvasjs/ 4/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

http://panamahitek.com/graficas-con-canvasjs/ 5/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

El proyecto lo he llamado panamahitek. Es importante que la ruta en la cual se guarda el


proyecto (Sources Folder) sea la carpeta C:\xampp\htdocs\ ya que es ahí donde el xampp
reconoce los cheros en PHP como “dentro” del servidor. En mi caso, la ruta que utilizo
es C:\xampp\htdocs\panamahitek.

Aquí seleccionamos Local Web Site, con lo cual le indicamos a Netbeans que usaremos el
servidor local. La URL será http://localhost/panamahitek/.

Luego le damos en Next/Finish. Ahora se abrirá el proyecto en PHP en el cual veremos un


chero llamado index.php. Podemos hacer una prueba de funcionamiento para veri car
que nuestro servidor Apache está en armonía con Netbeans. Colocamos el siguiente
código en nuestro chero index.php:

1 <html>
2     <head>
3         <title></title>
4     </head>
5     <body>
6         <?php
7         echo("hola");
http://panamahitek.com/graficas-con-canvasjs/ 6/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

8         ?>
9     </body>
10 </html>

Ahora corremos el ejemplo y veremos el resultado en el navegador.

Ahora, como último paso antes de pasar a la programación, crearemos una carpeta dentro
de la ruta de nuestro proyecto que llamaremos assets. En assets creamos una carpeta
que llamaremos script. En esta carpeta necesitamos colocar los cheros de JavaScript que
necesitaremos para que nuestro proyecto funcione. Estos son:

CanvasJS API
Jquery

Descargamos estos cheros y colocamos el archivo canvasjs.min.js y el archivo jquery-


2.2.3.min.js en assets/script. El archivo index.php lo podemos borrar.

http://panamahitek.com/graficas-con-canvasjs/ 7/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

Ahora estamos listos para proceder con la creación de la base de datos.

Base de datos en MySQL


Para crear la base de datos vamos a XAMPP y damos clic en el Admin de MySQL. Esto
abrirá PHPMyAdmin. Creamos una base de datos llamada panamahitek.

Ahora crearemos una tabla llamada plot_values, con 2 columnas llamadas x y y.

Guardamos la tabla y ahora insertamos algunos valores para lo que será una grá ca
sencilla. Yo he insertado los siguientes valores:

Con esto nalizamos la creación de la base de datos.

http://panamahitek.com/graficas-con-canvasjs/ 8/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

Obteniendo los datos desde MySQL con PHP


El manejo de bases de datos desde la web es un asunto delicado. Primero necesitamos un
nombre de usuario y una contraseña con los cuales protegeremos la integridad de los
datos almacenados en nuestro servidor. El especi car este tipo de información dentro de
un script podría revelar datos importantes de nuestro servidor a usuarios que podrían
utilizar esta información para hackearnos. Es por ello que existen los lenguajes del lado del
servidor, tal como lo es PHP.

Un lenguaje del lado del servidor es aquel que se guarda en el servidor y al cual el usuario
no tiene acceso. Los lenguajes del lado del cliente, como HTML, son descargados al
navegador cada vez que entramos a una página web.

Si le damos clic derecho a una página web, utilizando un navegador como Chrome o
Firefox, veremos la opción inspeccionar. Con esto veremos el código que forma la página
del lado del cliente. Los cheros que contienen los scripts de manejo de base de datos u
otras tareas se encuentran del lado del servidor, a los cuales no tendremos acceso.

El primer script que necesitamos construir en PHP es aquel que extraiga la información de
la base de datos y la almacene dentro de un JSON. El código es el siguiente:

1 <?php
2 header('Content-Type: application/json');
3 $con = mysqli_connect("localhost", "root", "", "panamahitek");
4  
5 if (mysqli_connect_errno($con)) {
6     echo "Failed to connect to DataBase: " . mysqli_connect_error();
7 } else {
8     $data_points = array();
9     $result = mysqli_query($con, "SELECT * FROM plot_values");
10     while ($row = mysqli_fetch_array($result)) {
11         $point = array("valorx" => $row['x'], "valory" => $row['y']);
12         array_push($data_points, $point);
13     }
14     echo json_encode($data_points);
15 }
16 mysqli_close($con);
17 ?>

Procedo a explicar este código:

http://panamahitek.com/graficas-con-canvasjs/ 9/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

En la línea 3 es donde se establece la conexión con la base de datos. Localhost es la


referencia al servidor local, de tal forma que cuando la conexión se ejecute, PHP
buscará entre las bases de datos instaladas en nuestra computadora. El segundo
parámetro es el nombre de usuario, en este caso “root”, el cual es el nombre de
usuario por defecto en MySQL. El tercer parámetro es la contraseña, la cual no hemos
establecido y por lo tanto de nimos como un espacio vacío (denotado por “”). El cuarto
y último parámetro es el nombre de la base de datos. En nuestro caso, la base de datos
la llamamos panamaitek.
En la línea 9 es donde creamos el query para la consulta a la base de datos. Aquí es
donde colocamos el nombre de la tabla que deseamos consultar. En este  caso, la tabla
se llama plot_values.
En la línea 11 creamos un arreglo en el cual guardamos los valores obtenidos desde la
base de datos. Por ejemplo, cuando usamos la expresión “valorx” => $row[‘x’] estamos
indicando que el valor de la columna “x” lo estamos colocando dentro de la etiqueta
valorx. Esto nos permitirá extraer los datos del JSON que enviaremos a JavaScript de
una manera mucho más sencilla.
En la línea 14 es donde transformamos el arreglo en un JSON

Si queremos probar si nuestro código está funcionando correctamente, podemos darle clic
derecho en el chero PHP en el cual hemos colocado este código. En mi caso, mi chero se
llama data.php.

En el navegador que estemos utilizando, el resultado es el siguiente:

http://panamahitek.com/graficas-con-canvasjs/ 10/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

Con esto comprobamos que, efectivamente, nuestro script PHP está extrayendo la


información de la base de datos y la está empaquetando en un JSON. Por eso es que nos
aparecen los punto y coma, las comillas y las llaves. Ahora estamos listos para proceder
con la programación en HTML.

Programación en HTML
La programación en HTML es la que permitirá mostrar a los usuarios una interfaz grá ca.
Es, también, donde montaremos los scripts en JavaScript.

Creamos un archivo llamado index.html en nuestro proyecto. Dentro colocamos el


siguiente código.

1 <html>
2     <head>
3         <script type="text/javascript">
4             window.onload = function () {
5                 var dataLength = 0;
6                 var data = [];
7                 $.getJSON("data.php", function (result) {
8                     dataLength = result.length;
9                     for (var i = 0; i < dataLength; i++) {
10                         data.push({
11                             x: parseInt(result[i].valorx),
12                             y: parseInt(result[i].valory)
13                         });
14                     }
15                     ;
16                     chart.render();
17                 });
18                 var chart = new CanvasJS.Chart("chart", {
19                     title: {
20                         text: "Valores X vs. Valores Y"
21                     },
22                     axisX: {
23                         title: "Valores X",
24                     },
25                     axisY: {
26                         title: "Valores Y",
27                     },
28                     data: [{type: "line", dataPoints: data}],
29                 });
30             }
31         </script>
32         <script type="text/javascript" src="assets/script/canvasjs.min.
33         <script type="text/javascript" src="assets/script/jquery-2.2.3.m
34     </head>
35     <body>
36         <div id="chart">
37         </div>
http://panamahitek.com/graficas-con-canvasjs/ 11/12
12/11/2017 Gráficas con CanvasJS (HTML + Javascript + MySQL + PHP) | Panama Hitek

38     </body>
39 </html>

Procedo a explicar el código:

Las líneas 32 y 33 son las que permiten utilizar el API CanvasJS y Jquery. En estas líneas
“incluimos” en nuestro proyecto los recursos contenidos en dichos cheros,
Entre las líneas 3 y 31 se escribe el código en JavaScript, el cual se debe incluir dentro de
los indicadores <script></script>
Entre las líneas 4 y 30 es donde se de ne las acciones que se desean ejecutar en el
inicio, justo en la carga inicial de la página.
En las líneas 5 y 6 se de nen variables: dataLength almacenará la cantidad de datos
recuperados desde la base de datos; data[] es un arreglo en el cual guardaremos los
datos que recuperamos de la base de datos.
Entre las líneas 7 y 17 es donde importamos el JSON desde el chero data.php (el que
programamos en la sección anterior).
Entre las líneas 9 y 14 es donde recorremos el arreglo con los datos, extraemos la
información y la guardamos dentro de la variable data. La extracción de los datos del
JSON se da en la siguiente instrucción: parseInt(result[i].valorx), donde el parseInt
transformará el valor en un número entero. Nótese que valorx es el nombre que le
colocamos a la etiqueta en el JSON del script en PHP.
En la línea 16 es donde se renderiza el grá co.
Entre las líneas 18 y 29 es donde se crea la grá ca con el API CanvasJS. Se de ne el título
(línea 20), los títulos de los ejes (líneas 23 y 26) y por último se agrega el set de datos
que serán gra cados y el tipo de grá ca (línea 28).
En la línea 36 es donde se inserta la grá ca dentro del body del documento HTML. Esto
se logra a través de un <div> al cual se le asigna un id. En nuestro caso, el id lo hemos
llamado “chart”. La relación entre CanvasJS y el <div> se establece dentro de la línea 18.

Luego de crear el chero index.html con el código presentado estamos listos para
comprobar si nuestro código funciona. Lo corremos y en el navegador veremos lo
siguiente:

http://panamahitek.com/graficas-con-canvasjs/ 12/12

También podría gustarte