Creando Gráficas en PHP con Graficas by Nax v0.2

Tras unos días de pruebas y más pruebas (sobretodo en JavaScript) puedo hoy decir que dispongo de la versión 0.2 del creador de gráficas.

Las mejoras implementadas:

  • AJAX funcionando
  • Archivo JS más ordenado
  • Eliminadas funciones inecesarias
  • Eliminadas funciones de eventos
  • Eliminados algunos PHP e integrados al php principal
  • Agregada una lista con todas las imagenes creadas
  • Botón para eliminar la caché de imágenes

Con estas mejoras queda preparado el terreno para la siguiente versión que pretende:

  • Comparativa entre dos gráficas (una al lado de la otra y superposición)
  • Agregar sistema de vectores
  • Agregar sistema de parábolas
  • Opciones de color para los puntos/rectas/parábolas

index: (geometria.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Graficas by Nax v 0.2</title>
<script language="javascript" src="ajax.js"></script>
</head>

<body onload="creargrafica(1);">

<div id="opciones">
<b>Puntos:</b><br />
Inserta los puntos (0,0):<br />
<textarea name="puntos" id="puntos" cols="10" rows="5">0,0</textarea><br /><br />
<input type="button" id="enviar" value="Crear" onclick="creargrafica(0);" />
</div>

<br />
<div id="files">Aquí una lista de archivos</div>
<br />
<div id="grafica">Aqui va la grafica</div>
</body>
</html> 

ajax.js:

var conex;
function del() {
var ran = Math.random();
conex = crearXMLHttpRequest();
conex.onreadystatechange = deleting;
conex.open('GET', 'grafica.php?del=1&' + ran + '=' + ran, true);
conex.send();
}

function deleting() {
if (conexion.readyState == 4) {
var lista = document.getElementById('list');
var x;
for (x=0; x <= lista.options.length; x++) {
lista.options[x] = null;
}
}
}

var conexion;
var list;
function creargrafica(lis) {
list = lis;
var points = document.getElementById('puntos');
var ran = Math.random();
conexion=crearXMLHttpRequest();
conexion.onreadystatechange = procesarEventos;
conexion.open('GET','grafica.php?list=' + list + '&points=' + encodeURIComponent(points.value) + '&'+ ran + '=' + ran, true);
conexion.send();

}

function procesarEventos() {
var lugar;
if (list == 1) { lugar = 'files'; } else {lugar = 'grafica';

}
var graf = document.getElementById(lugar);
if (conexion.readyState == 4) {
graf.innerHTML = conexion.responseText;

if (list != 1) {
var lista = document.getElementById('list');
var img = document.getElementById('img');
var opnew = new Option(img.name, img.name);
lista.appendChild(opnew);
}

} else{
graf.innerHTML = "wait";
}

}

function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}

grafica.php:

<?php

if ($_GET['list']) {
$var = 'Files: <select name="list" id="list" >';
$dir = opendir('img/');
while ($archivo = readdir($dir)) {
if (substr($archivo, -3) == 'png')
$var .= '<option value="'.$archivo.'">'.$archivo.'</option>';
}
$var.= '</select>';
closedir($dir);
echo $var . '&nbsp;&nbsp; <input type="button" id="borrar" name="borrar" value="Borrar Todo" onclick="del()" />';
die();
}

if ($_GET['del']) {
$dir = opendir('img/');
while ($archivo = readdir($dir)) {
if (substr($archivo, -3) == 'png')
unlink('img/'.$archivo);
}
closedir($dir);
echo "fin";die();
}

$points = explode(' ',preg_replace('/rn|r|n/',' ',$_GET['points']));

$y = 400; $y0 = $y / 2; //coordenadas 0,0
$x = 500; $x0 = $x / 2;

$cm = 10; //1 cm = 10 px

//basic
$img = imagecreate($x,$y);
$background = imagecolorallocate($img, 0, 0 , 0);
$color = imagecolorallocate($img, 255, 255, 255);
$green = imagecolorallocate($img, 50, 255, 0);
$red = imagecolorallocate($img, 255, 50, 0);

imagestring($img, 2, 10 ,$y-50, "http://www.skamasle.com/", $red);
imagestring($img,2,10, $y-40, "By Nax v0.2", $red);

//ejes basicos
imageline($img, $x0, 0, $x0, $y, $color);
imageline($img, 0, $y0, $x, $y0, $color);

// Lineas de X
for ($i = 0; $i <= $x; $i +=10)
imageline($img, 0+$i,$y0+5,0+$i, $y0-5, $color);

//Lineas de Y
for ($i = 0; $i <= $y; $i += 10)
imageline($img, $x0+5, 0+$i, $x0-5, 0+$i, $color);

//puntos
foreach ($points as $key => $value) {
$ejes = explode(',', $value);
$ejes[0] = $ejes[0] * $cm; $ejes[1] = $ejes[1] * $cm;
imageline($img, $x0+$ejes[0], $y0+(-$ejes[1]), $x0+$ejes[0], $y0+(-$ejes[1])+3, $green);
}
$num =rand(1,1000);
imagestring($img,2,$x - 390, $y-40, "img.$num", $red);
imagepng($img,"img/img".$num.".png");
echo '<img id="img" name="img'.$num.'.png" src="img/img'.$num.'.png" />';
imagedestroy($img);

?>

Nota: Hay que crear una carpeta llamada: ‘img’ donde tengamos el script.

Espero que lo disfruten y sirva para algo.
nax

10 respuestas a «Creando Gráficas en PHP con Graficas by Nax v0.2»

  1. La verdad que me quito el sombrero.

    Muy buen code aunque digo yo V0.2 ?

    Hasta donde quieres llegar con el script ? para mi esto ya sería alpha 1 o Beta…

    Que ideas tienes con esto ? Le haras un ejecutables o alguna cosa parecida ?

    ummm tengo una idea…

  2. Ya esta 😀

    http://www.skamasle.com/grafijax/geometria.php

    Lo e bautisado grafijax pero bueno algo tenia que poner ¬¬

    No se por que no me dibuja nada solo me sale el cuadrado negro y ya.. esos puntos verdes no me salen :S

  3. muy cierto es algo raro X_x a mi me funciona bien…

    es v0.2 porque tengo pensado implementar unas cuantas cosas adicionales XD

    * Comparativa entre dos gráficas (una al lado de la otra y superposición)
    * Agregar sistema de vectores
    * Agregar sistema de parábolas
    * Opciones de color para los puntos/rectas/parábolas

  4. Ya me funciono, aunque, solo me creo un punto….

    Con estos datos

    12,6
    13,2
    -8,5
    9,8

    Solo me hizo un punto en el cuadro derecho, que creo que es el punto 12,6

    Y si pongo

    -12,6
    12,6

    Solo me hace el punto -12,6 ¬¬

  5. ok el problema está en el parseo… por alguna razón solo toma la primera coordenada…

    lo que no comprendo es porqué lo hace.. si a mi me funciona bien T_T

  6. @ubun: well… la siguiente versión arreglare el tema para que no pase (quitar el textarea y poner un textbox..)

    @luis: me alegro que sirva xD a ver si eso me anima a sacar la próxima versión antes

  7. Estaría bien usar colores para futuras versiónes y que abajo salga un cuadrito que diga

    Rojo 12,6
    Verde -6,7

    O algo así o tal vez….

    Umm esto se podría convertir en un gráfico que genere porcientos ?

    20%
    30%
    50%

    y que dibuje las lineas.

    Escribes un texto…

    Venta de autos 20%
    Venta de motos 15%
    Bla bla

    Crear !

    Te sale con colores y demas cosas………..

    Na es solo una idea para futuras versiones 😛

    Ahí nos vemos

Los comentarios están cerrados.