Como hacer graficas de pastel y de barras

Showcool · #1 (**permalink**) 26/07/2004, 10:04

Hola

Alguien sabe de algun script con el que pueda hacer graficas de pastel y barras...

saludos...

CreaTuSitio.com · #2 (**permalink**) 26/07/2004, 12:27

mira aqui:
http://members.tripod.com/jsplanet2000/chart.htm

Showcool · #3 (**permalink**) 26/07/2004, 13:13

pero no hay de pastel y algunos vinculos estan rotos!!!

CreaTuSitio.com · #4 (**permalink**) 26/07/2004, 23:31

El primer link de ese sitio, creo, es el que funciona.

Como alternativa, estos esta muy buenos para barras:
http://home.t-online.de/home/lutz.tautenhahn/diagram/
http://developer.netscape.com/docs/t...ascript/graph/

para torta es realmente muy dificil de hacer en javascript. Pero puedes hacerlo con un applet:
http://www.jfree.org/jfreechart/index.html

furoya · #5 (**permalink**) 26/08/2005, 13:22

Hola todos :

Leí varias veces preguntas como esta, por eso el asunto me quedó dando vueltas en la cabeza. Me parece más que lógico manejar el gráfico desde el servidor, lo que además permite mejores presentaciones; pero siempre me quedaron ganas de hacelo en forma local -sin usar Flash-, y no se me ocurría cómo.

Lo primero que recordé es que W98 usaba en la carpeta "Mi PC" un objeto que permitía ver en formato circular el porcentaje ocupado de cada disco. Aparcía en el panel izquierdo ... pero cuando se seleccionaba en el panel derecho; lo que me hizo suponer que debía estar integrado al sistema operativo, y no lo podría usar en un HTML. Ni lo intenté.

Después pensé en usar imágenes. Cien porciones de "torta" por cada color, elegidas con JS, no me entusiasmaron mucho.

Hace muy poco redescubrieron en estos foros ( XHTML o CSS ) el VML ( Vectorial Markup Language ), un lenguaje que permite "dibujar" en el documento, y que yo no usaba porque me complico con las fórmulas. Pero quizo el destino que me cruzara con una forma prediseñada -el arc- y cuando lo vi, inmediatamente me evocó a los gráficos circulares.

Busqué en este sitio si había algo parecido y no lo encontré ( yo no lo encontré, no estoy diciendo que no exista; si alguien lo hizo : por favor, ponga un enlace acá ); así que elegí uno de los temas ( éste ) para dejar el primero ( y seguramente único ) borrador.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">

<head><title>TORTA. </title>
<script language="javascript"> 
var p, g, t, mar, sW;
var acum = 0;
var cadaPorcion = "";

var diametro = 300; //TAMAÑO EN PX

var porciones=new Array()

//[PORCENTAJES DE TORTA, "COLOR FONDO", "COLOR TEXTO"]
porciones[0] = [10, "red", "white"];
porciones[1] = [20, "lime", "black"];
porciones[2] = [30, "blue", "white"];
porciones[3] = [15, "fuchsia", "white"];
porciones[4] = [25, "yellow", "black"];

var totalPorciones = porciones.length;

function sumaPorciones(){
var suma = 0;
var cadaGrado;
grados = new Array(totalPorciones);

for(p=0; p<totalPorciones; p++){
cadaGrado = porciones[p][0]*3.6; 
grados[p] = [cadaGrado]; 
suma += cadaGrado*1;
}

if(suma == 360)escribeTorta();
else alert("La suma de porcentajes no da 100%.")
}


function escribeTorta(){
var Contenedor = document.getElementById("contenedor");
Contenedor.style.width = diametro + "px";
Contenedor.style.height = diametro + "px";

for(g=0; g<totalPorciones; g++){
var sA = (acum*1); 
var eA = (grados[g][0] + acum*1); 
var sC = porciones[g][1];
sW = diametro*0.35;
mar = diametro*0.25;

cadaPorcion += '<v:arc id="arco'+g+'" arcsize="1" strokeweight="'+sW+'px" startangle="'+acum+'" endangle="'+(eA*1+2)+'" strokecolor="'+sC+'" class="porcion" style="width:'+diametro/2+'; height:'+diametro/2+'; margin:'+mar+'px; z-index:-1; " />\r\n'

cadaPorcion += '<span title="'+porciones[g][0]+'%" id="texto'+g+'" class="textos" style="color:'+porciones[g][2]+'">'+porciones[g][0]+'%</span>';

acum = eA; 
}

Contenedor.innerHTML = cadaPorcion;
setTimeout("ubicaTexto()" , 2000);
}

function ubicaTexto(){
for(t=0; t<totalPorciones; t++){

var elArco = document.getElementById("arco"+t);
var elTexto = document.getElementById("texto"+t);

var tTop = Math.floor( elArco.offsetTop - mar*0.25 + elArco.offsetHeight/2); 
var tLeft = Math.floor(elArco.offsetLeft - mar*0.25 + elArco.offsetWidth/2); 
var tSize = Math.floor((elArco.offsetHeight*elArco.offsetWidth)/diametro/4); 

elTexto.style.top = tTop + "px";
elTexto.style.left = tLeft + "px";
elTexto.style.fontSize = tSize + "px";
}
}

</script> 

<style>
v\:* { behavior: url(#default#VML); }
body{background-color:#808080; }
#contenedor{background:transparent; overflow:auto; position:relative;}
.porcion{position:absolute; top:0; left:0; background:transparent; antialias:true; }
.textos{position:absolute; top:-100px; background:transparent; z-index:100; font-weight:bold; }
</style>
</head>

<body onload="sumaPorciones()">
<h2>Crea gr&aacute;fico de torta.</h2>

<div id="contenedor"></div>

<br />
Muestra un gr&aacute;fico de porcentajes. Los valores tienen <tt>title</tt> y se les puede agregar <tt>mouseover</tt>.

</body>
</html>

Dos aclaraciones finales. Como podrán ver, más que una torta o pastel ( pie ), es una rosca o rosquilla ( donut ); no puedo hacer que llegue al centro sin que se deforme mal.
Por último, el VML es soportado hasta el momento sólo por Internet Explorer -seguramente sobre Windows-. Y no me extrañaría nada que alguien agregue aquí que lo hace con su propia versión, sin respetar el estandar.

saludos

furoya.

P.D. : El código está optimizado para IE5.5+; en anteriores, las letras se ven mal.
Si alguien sabe qué puede pasar, acepto sugerencias para que se vea en la mayoría de los IE+W. Gracias.

mario2005 · #6 (**permalink**) 29/08/2005, 11:11

Yo lo mejor que conozco para generar gráficos online es una libreria Java (no Javascript, para los no iniciados). El grafico se genera en el servidor y luego se retorna al navgador mediante servlets. Lo he usado, quizas es un poco complejo al principio, pero da muy buenos resultados.

http://sourceforge.net/projects/jfreechart

furoya · #7 (**permalink**) 20/10/2008, 16:37

Estoy seguro de que esto también lo han explicado en algún tema; pero como me hice un ejemplo para guardar, y después me acordé que ya había posteado algo aquí, aprovecho que ando por el foro y se los dejó

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>TORTA DE GOOGLE.</title>
<script type="text/javascript">
function TMP(){
var tiempo=new Date();
var yapaso = Math.floor(((tiempo.getHours() * 60) + tiempo.getMinutes()) * 100 / 1440);
var aunfalta = 100 - yapaso;

var relleno = '<object data="http://chart.apis.google.com/chart?cht=p3&chd=t:';

relleno += yapaso +','+ aunfalta;

relleno += '&chs=250x100&chl=Pasaron|Faltan&chco=333333" type="text/html"></object></body>';

document.getElementById("torta").innerHTML = relleno;
}
onload = TMP;
</script>
<style type="text/css">
body{color:#ffffff; background-color:#000000;}
div{float:left;}
object{height:150px; width:300px;}
h3{font-size:300%; font-weight:500;}
p{font-weight:bold; clear:both;}
strong{font-size:150%; font-weight:500;}
</style>
</head>
<body>
<h2>Lo que queda del d&iacute;a.</h2>
<p>Muestra un gr&aacute;fico de torta con el tiempo transcurrido desde las 0 horas y 
el que falta hasta la medianoche.</p>

<div id=torta></div><h3>*</h3>

<p><strong>*</strong> Homenaje a "<em>The Remains of the Day</em>" (1993) de James Ivory.</p>
</body>
</html>

Usa un servicio de Google para crear gráficos, y tiene algunas limitaciones. Creo que andaría mejor con PHP en vez de JS para los gráficos dinámicos. Habrá que probarlo.

vITTY · #8 (**permalink**) 23/10/2008, 11:54

furoya, tenes idea si se pueden extraer los gráficos de google analitycs por medio de la api de google?

furoya · #9 (**permalink**) 25/10/2008, 15:34

No. No tengo idea. Jamás lo usé.

Me parece que Google no da mucha info sobre el tema; acá está la lista completa

http://code.google.com/intl/es/more/

Empecé a hacer una búsqueda y apareció esto

http://trucosgoogleanalytics.com/ind...gle-analytics/

http://code.google.com/apis/analytic...sOverview.html

http://www.google.com/analytics/es-ES/

http://64.233.179.110/analytics/tour/index_es-ES.html

pero no sé si te sirve.

Aprovecho para dejar el enlace que está escondido en el código, por si alguien quiere estudiar más el asunto de los gráficos.

http://code.google.com/apis/chart/
http://code.google.com/intl/es/apis/chart/

sinyei · #10 (**permalink**) 30/11/2010, 11:57

h0la, yo he trabajado con la de barra(bar) y la de torta(pie) por medio de una base de datos en postgres

asi
archivo.php

<html>
<head>

<title>JSChart</title>

<script type="text/javascript" src="jscharts.js"></script>

</head>
<body>
<?php

$conexion=pg_connect("host=localhost port=5432 dbname=graficos password=gnulinux user=postgres") or die("Error al conecarse a la base de datos");

$sql="select * from compraproveedor";

$result=pg_exec($conexion,$sql);

$i=0;

?>

<div id="graph" align="center">Loading graph...</div>

<script type="text/javascript">
// ejercicio capturar los valores del arreglo desde una tabla de postgres con php

var myData = new Array(
<?php
while($compras=pg_fetch_array($result)){
$a[$i] = "['".$compras['droga']."', ".$compras['cantidad']."]";
$colores[$i] = "#0000FF";
$i++;
}
$tam=count($a);
$lim=$tam-1;
$i=0;
while($i<$lim){
echo $a[$i].", ";
$i++;
}
echo $a[$lim];

?>
);//lista de opciones

var colors = [
<?php
$i=0;
while($i<$lim){
echo "'".$colores[$i]."', ";
$i++;
}
echo "'".$colores[$lim]."'";

?>
]; //indica los colores a cada opcion de la barra

col=(myData.length+1)*100;

//alert(myData.length);
var myChart = new JSChart('graph', 'bar');
myChart.setDataArray(myData);
myChart.colorizeBars(colors);
myChart.setTitle('Balance de medicamentos mas comprados'); ///titulo de la grafica
myChart.setTitleColor('#8E8E8E');
myChart.setAxisNameX('Medicamentos');
myChart.setAxisNameY('Unidades');
myChart.setAxisColor('#C4C4C4');
myChart.setAxisNameFontSize(12);
myChart.setAxisNameColor('#999');
myChart.setAxisValuesColor('#777');
myChart.setAxisColor('#B5B5B5');
myChart.setAxisWidth(3);
myChart.setBarValuesColor('#2F6D99');
myChart.setBarOpacity(0.1);
myChart.setAxisPaddingTop(60);
myChart.setAxisPaddingBottom(40);
myChart.setAxisPaddingLeft(45);
myChart.setTitleFontSize(10);
myChart.setBarBorderWidth(0);
myChart.setBarSpacingRatio(50);
myChart.setBarOpacity(0.9);
myChart.setFlagRadius(6);

myChart.setTooltip(['Bicarbonato', 'Lo usan las abuelas para todo']);
myChart.setTooltip(['Rabano Yodado', 'Medicamento natural']);
myChart.setTooltip(['Aspirina', 'Sirve para todo']);
myChart.setTooltipPosition('nw');
myChart.setTooltipOffset(3);
myChart.setSize(col, 600);
myChart.setBackgroundImage('fondo.png');//colocar fondo
myChart.draw();
</script>

</body>
</html>

sinyei · #11 (**permalink**) 30/11/2010, 12:01

la clase JSChart no la puedo escribir porque es muy extensa asi que si la necesitas dejame tu correo y te la envio

furoya · #12 (**permalink**) 30/11/2010, 14:30

Una duda, sinyei, ¿a quién le estás respondiendo?
¿A Showcool, que preguntó en el 2004?
¿O a vITTY, que lo hizo en el 2008?

¿Y exactamente qué es eso que pusiste, que lleva una clase tan larga que no se puede escribir? Porque el Foro es de Javascript.
Ya se comentó que se puede hacer con lenguajes de servidor, pero es para otro tema. Acá tratamos de inventar métodos que se manejen con JS, aunque desde allí se traiga una API.

Si quieres hacer un aporte, a mi me parece bien, pero ten cuidado donde y sobre todo cuando posteas, porque resucitar un tema por una respuesta fuera de lugar no es muy buen negocio. Y capaz que nos cierran el tema.

Saludos
furoya

furoya · #13 (**permalink**) 03/12/2010, 13:22

Ya sé que debería esperar un poco más para postear este mensaje. Pero creo que sinyei no va a volver a explicar nada. Una pena, porque no hubiese estado mal que dijera "¡Uy, me equivoqué de mensaje y la respuesta era para otro!" (le creería, porque a mí me pasa seguido), o simplemente "No me fijé en las fechas...", qué sé yo, algo.

Aprovecho para explicar a quien no se haya dado cuenta , que esa "clase" que le falta es en realidad un escript; lo único que podía servir aquí ... y no lo publicó.
Supongo que no era más que un programa para 'dibujar' la torta con SVG, VML o canvas, según correspondiese. Y que ni siquiera lo había escrito él.

El ejemplo que puse en el mensaje #5 hace justamente eso, pero solamente con VML para Internet Explorer, porque se me ocurrió aprovechar los arc y no lo había visto en otro lado.
Para todos los demás navegadores se puede usar canvas, y para justificar que se haya levantaron el tema, me puse a trabajar en un ejemplo ... y como de costumbre, después de escribir el esqueleto, pensé que a estas alturas alguien ya lo debía haber hecho ¡si sinyei dice que tiene uno!.

Empecé a buscar y de todos los que encontré me quedé con éste

http://www.phpied.com/canvas-pie/

El ejemplo captura las porciones directamente de una tabla, lo que me parece práctico porque generalmente los gráficos se sacan de una tabla.
Lo que no me gustó es que usa colores aleatorios. Se supone que debe tomar los colores de una paleta que elegimos nosotros, para que —p.e.— si mostramos todos los meses año por año, a un mismo mes le corresponda un mismo color.

No creo que al autor le moleste, porque más que el crédito, estoy poniendo un enlace; así que me tomé el atrevimiento de cambiar ese detalle en esta versión.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Canvas donut</title>
<style type="text/css">
* {font-family: Arial;}
table {margin-left: 10px; font-weight: 900;}
td{padding: 5px;}
canvas{float: left; background-color: white;}
#lista {background-color: #ffffcc;}
</style>
</head>
<body>
<h2>Gráfico de Rosca. (Op, FF, Chr)</h2>

<canvas id="canvas" width="300" height="300"></canvas>

<table id="mydata">
<tr>   <th>Lang</th><th>Value</th> </tr>

<tr><td id="lista">JavaScript</td>  <td>100</td>  </tr>
<tr><td id="lista">   CSS</td>  <td>200</td>  </tr>
<tr><td id="lista">  HTML</td>  <td>300</td>  </tr>

<tr><td id="lista">   PHP</td>  <td> 50</td>  </tr>
<tr><td id="lista"> MySQL</td>  <td> 30</td>  </tr>
<tr><td id="lista">Apache</td>  <td> 10</td>  </tr>

<tr><td id="lista"> Linux</td>  <td> 30</td>  </tr>
</table>

<script type="text/javascript">
var center, radius;

window.onload = function() {

(function() { 

var data_table = document.getElementById('mydata');
var canvas = document.getElementById('canvas');
var td_index = 1;


var tds, data = [], color, colors = [], value = 0, total = 0;
var trs = data_table.getElementsByTagName('tr'); 
for (var i = 0; i < trs.length; i++) {
tds = trs[i].getElementsByTagName('td'); 

if (tds.length === 0) continue; 

value  = parseFloat(tds[td_index].innerHTML);
data[data.length] = value;
total += value;

color = getColor();
colors[colors.length] = color;
trs[i].style.backgroundColor = color;
}


if (typeof canvas.getContext === 'undefined') {
return;
}

var ctx = canvas.getContext('2d');
var canvas_size = [canvas.width, canvas.height];
radius = Math.min(canvas_size[0], canvas_size[1]) / 2;
center = [canvas_size[0]/2, canvas_size[1]/2];

var sofar = 0;
for (var piece in data) {

var thisvalue = data[piece] / total;

ctx.beginPath();
ctx.moveTo(center[0], center[1]);
ctx.arc(
center[0],
center[1],
radius,
Math.PI * (- 0.5 + 2 * sofar), 
Math.PI * (- 0.5 + 2 * (sofar + thisvalue)),
false
);

ctx.lineTo(center[0], center[1]); 
ctx.closePath();
ctx.fillStyle = colors[piece];

ctx.fill();


sofar += thisvalue; 
}

function getColor() {
var clr = paleta.shift()
return clr;
}

ujero(ctx);

})()

function ujero(ctx) {
ctx.beginPath();
ctx.arc(center[0],center[1],radius/3,0,7, false);
ctx.fillStyle = "white";
ctx.fill();
}
}

var paleta = ["red", "fuchsia", "lime", "green", "blue", "aqua", "yellow", "olive","teal", "navy", "silver", "maroon", "purple", "gray"]
   
</script>

</body>
</html>

Y por supuesto, también lo convertí de "torta" a "rosca"

.

Una duda. ¿es realmente tan difícil pasar variables JS con PHP? A menos que no las pase, entonces quizá haya que terminar en AJAX, porque con javascript directamente no creo que se pueda leer una base en un servidor ¿no?.

http://www.downloadjavascripts.com/l...5/Details.aspx

[edit]
Un detalle del ejemplo con VML : para que hoy funcione hay que reemplezar el DT

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

por

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Lo iba a cambiar ahí mismo, que es lo que corresponde para que nadie tenga que buscar los 'parches' de actualización por todo el tema, pero por alguna razón el editor no me deja.

[/edit]

palomasturbas · #14 (**permalink**) 31/01/2011, 18:01

Antes de proporcionarles el codigo, o bien el link los invito a que BUSQUEN BIEN me he encontrado varias paginas donde viene un codigo muy corto sin tanta basura como la k muestran y sencillo se nota que no saben buscar... ademas hay aplicaciones ya hechas que se puede ver su codigo fuente ya que esta hecho en javascript... pero he visto varios lugares donde tienen ejemplos en JSP, JAVASCRIPT, PHP entre otros... ya que si esperan ke alguien en algun momento lea el foro y les de una respuesta facil.. kiza suceda algun dia o kiza pasen años como esta okasion y no les sirva de nada los codigos...