Ver Mensaje Individual
  #10 (permalink)  
Antiguo 30/11/2010, 11:57
sinyei
 
Fecha de Ingreso: octubre-2010
Mensajes: 12
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Como hacer graficas de pastel y de barras

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>