Tengo que mencionar que este ejemplo lo hice en base a un comentario publicado por emmanuel levin,
El mencionaba como pasar datos por medio de JQUERY y datos que ingresara un usuario. Pero lo que hice en el ejemplo fue pasar los datos de un formulario (pequeño) por medio de JS.
El resultado se vería así:
Como funciona, pues el usuario ingresa un nombre y una cantidad de horas (basandonos en los ejemplos anteriores de trabajadores y horas trabajadas), y al presionar sobre crear grafica manda por medio de la url y post los datos de los campos al archivo php donde se crea la grafica y la regresa en forma de imagen, la imagen la creamos con js y la insertamos en un div.
Cabe mencionar que es un ejemplo muy sencillo pero en base a este puedes expirmentar mandando arreglos por post para que puedas ver mas datos y no solo uno (que caso una grafica para un usuario).
NOTA: Antes de avanzar al codigo es importante que te informe que no voy a explicar sobre la gráfica por que eso ya esta en la otra entrada. Si no lo has visto te recomiendo que la cheques antes de hacer este ejemplo para que le entiendas mejor
http://easy-codigo.blogspot.mx/2012/06/graficas-con-jpgraph.html
OK ahora si vamos al código(la parte divertida):
archivo html: grafica.html
<HTML>
<HEAD>
<TITLE>Graficas</TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script>
function cargar(){
var nombre= document.getElementById('nombre').value;
var horas= document.getElementById('horas').value;
var url="graficas.php?nom="+nombre+"&hrs="+horas;
fi = document.getElementById('grafica');
var imagen = document.createElement('img');
imagen.src=url
fi.appendChild(imagen);
}
</script>
</HEAD>
<BODY>
<table>
<tr>
<td>Nombre</td>
<td><input type="text" id="nombre" /></td>
</tr>
<tr>
<td>Horas</td>
<td><input type="text" id="horas" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Crear grafica" onclick="cargar()">
</td>
</tr>
</table>
<div id="grafica">
</div>
</BODY>
</HTML>
y un boton "Crear grafica" que al momento de hacer click va a ejecutar la funcion "cargar()".
Creamos tambien un div "grafica" en el cual vamos a cargar la imagen creada.
la funcion cargar():
declaramos 3 variables nombre , horas y url.
Lo primero que hace la funcion es buscar los elementos por medio de su Id y el valor que tengan (osea el texto) lo va a guardar en las variables.
Por lo que la variable nombre va a ser igual a lo que el usuario haya ingresado en el campo de texto nombre y la variable horas lo que haya ingresado en el campo de horas.
La variable url va a ser igual a la ruta donde se encuantre el archivo php donde se crea la grafica. En este ejemplo yo tengo el archivo php en la misma carpeta donde tengo el archivo html, pero de no ser asi tiene que ir toda la ruta. Además le estoy agregando las variables "nom" y "hrs" que son las que va a leer el archivo php, pasados por medio de POST.
nom va a ser igual a la variable nombre y hrs va ser igual a la variable horas.
"graficas.php?nom=" + nombre + "&hrs=" + horas;
nota: recuerden que con el signo + se concatenan las variables en js.
fi va a ser igual al div graficas.
Y por ultimo vamos a declarar una variable imagen que la vamos a crear desde js por medio de la linea
document.createElement('img'); y le vamos a pasar a su atributo src la variable url (la ruta).
Una vez creada la imagen la vamos a insertar dentro del div graficas desde la linea:
fi.appendChild(imagen);
Archivo PHP.
Nota: Nos vamos a basar en el archivo php visto en el primer ejemplo si no lo has visto por favor checa primero ese ejemplo.
En el archivo PHP lo unico que va a cambiar es que vamos a declarar dos variables nombre y horas y por medio de GET va a tomar el valor de nom y hrs (pasados desde html).
$nombre = $_GET["nom"]; y $horas= $_GET["hrs"];
Y le vamos a pasar estos datos a los arreglos $datos =array($horas) y $labels=array($nombre)
quedaria de la siguiente manera:
<?php
require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_bar.php');
$nombre=$_GET["nom"];
$horas=$_GET["hrs"];
// Creamos el grafico
$datos=array($horas);
$labels=array($nombre);
$grafico = new Graph(500, 400, 'auto');
$grafico->SetScale("textint");
$grafico->title->Set("Ejemplo de Grafica");
$grafico->xaxis->title->Set("Trabajadores");
$grafico->xaxis->SetTickLabels($labels);
$grafico->yaxis->title->Set("Horas Trabajadas");
$barplot1 =new BarPlot($datos);
// Un gradiente Horizontal de morados
$barplot1->SetFillGradient("#BE81F7", "#E3CEF6", GRAD_HOR);
// 30 pixeles de ancho para cada barra
$barplot1->SetWidth(30);
$grafico->Add($barplot1);
$grafico->Stroke();
?>
Ahora cuando presionen sobre el botón Cargar Gráfica la imagen con la grafica se va a generar, y sin refrescar la página.
---------------------------------------------------------------------------------------------------------------
ACTUALIZACIÓN
Gracias a un comentario de nuestro amigo Edward Vasquez que encontro una falla, al darle n número de clicks se generaba la imagen sin quitar la anterior, y me comenta que como podemos solucionar ese error. Cabe mencionar que se pueden usar otras formas así que sientase libres de comentar si tienen otra idea. La solución que yo ofrezco es hacer otra función en java script ala que vamos a llamar antes de imprimir la gráfica en el div.
sería la función limpiar(); y quedaría así.
function limpiar(){
var d = document.getElementById('grafica');
while (d.hasChildNodes())
d.removeChild(d.firstChild);
}
function cargar(){
var nombre= document.getElementById('nombre').value;
var horas= document.getElementById('horas').value;
var url="graficas.php?nom="+nombre+"&hrs="+horas;
/*aqui mandamos llamar la función que limpia*/
limpiar();
/*despues creamos la grafica*/
fi = document.getElementById('grafica');
var imagen = document.createElement('img');
imagen.src=url
fi.appendChild(imagen);
}
Y despues desde la función que ya expliqué anterirmente que es cargar(); la vamos a mandar llamar antes de crear la gráfica.
------------------------------------------------------------------------------------------------------------
Listo es muy sencillo como les comentaba ahora pueden experimentar mandando arreglos por medio del POST tanto en las horas como en los nombres para generar graficas con más de un dato.
Espero que este ejemplo les sea de utilidad. No duden en dejar sus comentarios, quejas sugerencias y dudas, yo trataré de darle respuesta lo más pronto posible.
"Programar no tiene que ser tan difícil como parece...."
Este comentario ha sido eliminado por el autor.
ResponderEliminarmmm bueno alcance a leer tu comentario nates de que lo eliminaras :( pero como quiera te comento que puedes checar el otro tutorial en el que se cargan los datos a la grafica por medio de una consulta y mezclandolos tal vez funcione lo que necesites saludos y gracias por pasar por el blog me da gusto que te haya servido..
EliminarExelente tu tutorial me sacaste de un apuro Guru!!!
ResponderEliminarExelente aporte.
Gracias!! que bueno que te sirvio Saludos!!
Eliminaramigo hice el ejemplo y todo fino pero hay un detalle que cuando das al boton generar se genera la grafica y alli todo bien , pero le vuelves a dar N veces al boton y salen tantas graficas como hallas dado al boton como se podria corregir ese aspecto?
ResponderEliminarHola disculpa que te conteste apenas pero ya cargue la actulización aquí mismo con una solución para ese detalle. Muchas gracias por pasar al Blog y comentar este error. saludos y que te encuntres bien aaa Soy Amiga!! :)
EliminarDisculpa estaba probando tu codigo pero no me muestra la grafica solo me muestra la imagen como un enlace roto, si me puedes ayudar a arreglarlo te lo agradecere :)
ResponderEliminarLo primero es que les de a las variables del archivo php un valor y lo corras de manera independiente. si al correr el php te genera la gráfica entonces nos pasamos al archivo html.
EliminarAhí lo primero que tienes que revisar es que le estes pasando la ruta correctamente.
Si ya me funciono, lo que pasa es que no me generaba la gráfica como dijiste pero ya lo arregle y me funciona de maravilla. Muchas gracias :)
EliminarQue bien ya que lo pudiste solucionar!! Gracias a ti por pasar por el blog!! saludos..
Eliminarya puse la ruta y aun asi me sale cortado
EliminarBuenos días Ary Lugo estoy en busca de como llenar un array de js con los datos de una tabla html y me encontré con este blog, que es muy bueno por cierto, no se si puedas ayudarme con este problema ya lo he intentado pero no lo logro, de antemano gracias :)
ResponderEliminarBuen día
checa este ejeplo haber si es lo que necesitas http://easy-codigo.blogspot.mx/2013/06/manejo-de-tablas-1-html-y-js.html
EliminarHola que bueno que pasas por aqui mmm.. dame más datos.
ResponderEliminarpor datos de una tabla te refieres a texto en sus celdas o a datos de campos de texto (una especia de formulario).
Alguien que me ayude, estoy jalando los valores mediante un arreglo, de una base de datos, para lo cual quiero que si comparo 2 campos c1 y c1, si c1 > c2 entonces la barra sea de un color, pero en caso contrario, el color sea otro... no lo logro haceer... les dejo el codigo
ResponderEliminarconnect_errno)
{
echo "FALLO AL TRATAR DE CONECTAR CON LA BASE DE DATOS";
}
//consultita
$result = $mysqli->query("SELECT idind, vr, s1, s2, a1, a2 from testrafilycob");
$idind = array();
$vr = array();
$s1 = array();
$s2 = array();
$a1 = array();
$a2 = array();
$i = 0;
$j=0;
$grafico = new Graph(1800,1200,'auto');
$grafico -> SetScale("textlin");
$grafico -> title -> Set ("GRAFICA IMSS DELEGACION GUERRERO");
$grafico->xaxis->SetTickLabels($idind);
$grafico -> yaxis -> title -> Set ("VALOR DE REFERENCIA VR");
$grafico -> xaxis -> title -> Set ("INDICADORES");
while($row=$result->fetch_assoc())
{
$idind[$i]=$row['idind'];
$s2[$i]=$row['s2'];
$s1[$i]=$row['s1'];
$vr[$i]=$row['vr'];
$a1[$i]=$row['a1'];
$a2[$i]=$row['a2'];
$i++;
}
$barplot1 = new BarPlot($s1);
$i=0;
while($i<24)
{
if ($s1[$i] > $vr[$i])
{
//verde
$grafico -> Add($barplot1);
$barplot1 -> SetFillColor("#00CC00");
$barplot1 -> SetWidth(25);
$barplot1 -> value -> Show();
}
else
{
//AMARILLO
$grafico -> Add($barplot1);
$barplot1 -> SetFillColor("#FFFF00");
$barplot1 -> SetWidth(25);
$barplot1 -> value -> Show();
}
$i++;
}
$grafico -> Stroke();
?>
hola me parece chido en la forma en la que graficas, digamos que en vez de mandar una variable, quisiera mandar un arreglo. digamos tengo definido mi arreglo asi
ResponderEliminar$array2 = array("uno", "dos", "tres", "cuatro");
$array3 = array(1,2,3,4);
y al momento de mandarlo con tu script me llegue a la otra pagina donde crea la imagen.
como seria hay, tu script sirve para mandar el arreglo?,
puedes hacer un implode para convertir tu arreglo en una sola variable detxto cuyos valores pueden estar separados por comas o guiones medios y mandarlo una vez en el archivo donde generes la grafica vuelve a convertir esa variable a arreglo con un explode.
Eliminarhola de nuevo soy el anonimo de arriba je :P mira pro medio de un form mando dos arreglos al codigo tuyo para crear la grafica y sale bien, lo malo es que me sale en otra hoja, algo que no quiero tu tienes un codigo en javascript para que aparezca en la misma pagina lo he visto, pero la pregunta es por que no me funciona en un form ??
ResponderEliminarprobablemente te redirecciona por que así funciona el form en el action redirecciona a la página que hayas indicado lo que puedes hacer en en el action cargar una función de ajax como en los otros ejemplos y ahí cargar la imagen.
Eliminaren tu codigo de javascript mandas variables, como mandarias arreglos, si se puede saber
Eliminarconcatena el arreglo es una variable de texto. :
Eliminarvar frutas = ["Platano", "Naranja", "Manzana", "Mango"];
var energia = frutas.join();
energía sería igual a:
energia=Platano,Naranja,Manzana,Mango
El separado por default es una coma (,), pero uedes utilizar cualquier seperador en frutas.join(seprador);
esta variable la mandas y en donde lo resibas solo los vuelves a separar
hola a ver si me pueden ayudar en esta duda, actualmente paso las variables con ajax para que en un div se cargue el grafico, el problema es que al incrementarse los valores en la base de datos no cambian losvalores del grafico, o sea me sigue saliendo la imágen con los datos anteriores y tengo que refrescar la pagina donde se encuentra el div y volver a ejecutar la consulta para que aparezca el grafico con los datos nuevos
ResponderEliminarhola disculpa para html la entrada del formulario esta exelente pro mi pregunta es si puedo usar elo mismo para hacerlo con php???
ResponderEliminarhola, buen aporte,
ResponderEliminartengo una duda y espero q puedan resolvermela, tengo que hacer una grafica en php, pero los valores que tengo que pasar los obtengo en otro fichero php, ¿como paso esos datos al php de la grafica?, xq si pongo require('nombredelotroarchivo.php') me da error y no me sale la grafica...
gracias
Saludos muy buen aporte pero yo tengo un problema si lo meto dentro de un form no me genera la grafica a que se debe esto ?
ResponderEliminarAmiga hola por que me sale la imagen rota ?
ResponderEliminarPuede ser que le estas pasando mal las rutas de la liberia, o le estas pasando mal la ruta a la imagen. Saludos
Eliminaramiga necesito ayuda yo ya no te entendi esa parde donde explicas lo de
ResponderEliminarfi va a ser igual al div graficas.
Y por ultimo vamos a declarar una variable imagen que la vamos a crear desde js por medio de la linea
document.createElement('img'); y le vamos a pasar a su atributo src la variable url (la ruta).
Una vez creada la imagen la vamos a insertar dentro del div graficas desde la linea:
fi.appendChild(imagen);
si me pudieras ayudar te lo agradecere
amiga enserio necesito de tu ayuda como hago eso de la imagen donde explicas lo de la url
ResponderEliminarHola, lo que hacemos en la variable url es mandar llamar el archivo php donde tenemos el código para la creación de la gráfica y le pasamos como parametros el nombre y las horas que estamos tomando del formulario
Eliminarvar url="graficas.php?nom="+nombre+"&hrs="+horas;
nom y hrs es el nombre que tu le quieras dar a las variabs que vas a tomar como get y nombre y horas son las variables que contienen el texto de los inputs que estan en el html ok.
esta parte ?nom="+nombre+"&hrs="+horas; es el paso de parametros por medio de GET si no conoces muy bien este tema dale una buscada en google hay mucha información.
Bueno ya en el archivo php vamos a tomar esos valores(nom y hrs) que le estamos mandando, como ya te comentama por medio del GET.
el script va a hacer lo suyo (si aun no entiendes bien como funciona el código de la grafica dale una checada a los primeros tutoriales.).
el atributo src de la imagen (variable URL) va a ser igual a la ruta de tu archivo php.
=) muchas gracias amiga sabes demasiado es bueno saber que existe gente como tu que comparte su conocimiento gran aporte me has ayudado demaciado
EliminarMuchas Gracias por entrar al blog y me da mucho gusto saber que te ayudaron los ejemplos. Saludos!!! :D
EliminarHola Ary Lugo, Gracias de antemano por el código explicada, ya realicé mis pruebas y el gráfico se me genera, la duda es como un comentario de arriba, en donde con formulario no se me genera la gráfica y sin formulario si. Saludos
ResponderEliminarHola, estoy tratando de cargar la grafica a partir de dos arreglos, estos arreglos los genero en el php donde tengo mi codigo, los paso a una funcion de js y de alli los envio por la url hasta el archivo que genera la grafica, el problema es que me aparece el error 25070 que dice "que alguno de los contiene datos no numericos" entonces asumo que es la forma en la que lo estoy enviando, ¿hay alguna manera particular de hacerlo?
ResponderEliminar