30/11/2010, 11:57
|
| | 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> |