<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>
<?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>
-.-
ResponderEliminar