Una de las ideas originales del blog era, como dije en su momento, hablar de tres categorías: “Política y Sociedad”, “Ciencia y Tecnología” y “Deportes”. Sin embargo, la primera ha terminado predominando. Dado que de deportes ya estoy escribiendo en SillonBol, voy a intentar darle vida a “Ciencia y Tecnología”.

Una de las grandes novedades de HTML5 son sin duda los Canvas, que nos permiten hacer todo tipo de gráficos y animaciones en 2D y 3D. Se pueden complicar todo lo que se quiera, pero para empezar vamos a ver una de las opciones que probablemente tenga más utilidad: extraer datos de una base y representarlos en una gráfica.

Típica cabecera HTML + definición de un canvas en el centro de la pantalla.

<!DOCTYPE html>

<html><head><title>Nombre de la página</title><link rel=”STYLESHEET” href=”nombre_del_archivo_de_estilo.css”/></head>

<body>

<center><canvas id=”myCanvas” width=”1280″ height=”720″ style=”border:1px solid #FFFFFF;”>Your browser does not support the HTML5 canvas tag.</canvas></center>

A continuación el script que nos hace el dibujo.

<script>

function draw(inicio, valor)

{

var c=document.getElementById(“myCanvas”);

var ctx=c.getContext(“2d”); // En 2D

// Defines el ancho

ctx.width=1280;

var ancho=ctx.width;

//Defines el alto

ctx.height=720;

var alto=ctx.height;

// Crear gradiente para el fondo

var grd=ctx.createLinearGradient(0,0,ancho,0);

grd.addColorStop(0,”black”); // Punto y color de inicio

grd.addColorStop(0.5,”#309a07″); // Color intermedio

grd.addColorStop(1,”black”); //Color final

// Rellenar el fondo con el gradiente

ctx.fillStyle=grd;

ctx.fillRect(0,0,ancho,alto);

// Dibujo los datos

// El punto de partida es x=inicio, y=alto (el alto es abajo del todo). La x la vamos moviendo a la derecha, la y es fija abajo del todo.

ctx.moveTo(inicio,alto);

// Movemos la línea hacia arriba en la variable y, manteniendo la x fija por ser una barra vertical

ctx.lineTo(inicio,valor); 

ctx.lineWidth=10; // Definimos el grosor de la línea

ctx.globalAlpha = 0.99; // Definimos la transparencia

ctx.strokeStyle = “white”; // Color de la línea

ctx.stroke();

}

</script>

El código php que recupera los datos de la base  y se los envía a la función para que los dibuje.

<?php

//Llamamos al archivo que nos conecta a la base de datos

require_once(“archivo_con_los_datos_de_conexion_a_la_base.inc”); 

// Hacemos la petición de datos a la base

$salida=mysql_db_query (“nombre_de_la_base_de_datos”, “Select * from nombre_de_la_tabla”);

$numdatos=mysql_num_rows ($salida);

for ($a=0;$a<$numdatos;$a++)

{

$dato=mysql_fetch_row($salida); // Extraemos una fila

$inicio=$dato[0]; //En el ejemplo, la primera columna era una simple key autoincrementable

$inicio=$inicio*20; // Vamos moviendo 20 pixeles a la derecha cada dato

$valor=$dato[1]; //En el ejemplo, la segunda columna es el dato a dibujar

$valor=$valor*7.2; //La altura era de 720 y los datos de 0 a 100. Escalamos

$valor=720-$valor; // Canvas tiene las coordenadas (0,0) arriba a la izquierda. Invertimos la y para que empiece desde abajo.

echo “<script>draw($inicio, $valor);</script>”; // Llamamos a la función que dibuja

}

?>

</body>

</html>

 

El resultado -una vez escalado para que entre en el blog- sería:

PD. Si alguien tiene alguna duda o no le funciona al copiarlo, podéis avisarme/preguntarme por facebook, twitter o correo ;)

Tagged with: