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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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, "https://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»

Pingback: Tweets that mention Skamasle » Creando Gráficas en PHP con Graficas by Nax v0.2 -- Topsy.com
Ubuntero dice:

6 abril 2010 a las 0:01

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…
Ubuntero dice:

6 abril 2010 a las 0:10

Ya esta 😀

https://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
nax dice:

6 abril 2010 a las 16:31

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
Ubuntero dice:

6 abril 2010 a las 17:22

ummm sera el server ( el host que no soporta alguna cosa ) ?
Ubuntero dice:

6 abril 2010 a las 18:44

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 ¬¬
nax dice:

6 abril 2010 a las 22:38

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
Luis dice:

7 abril 2010 a las 3:06

wow! genial tut. muy util para proyectos de la uni!

saludos.
nax dice:

7 abril 2010 a las 22:22

@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
Ubuntero dice:

8 abril 2010 a las 6:11

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.