ayuda script

jcros84 · #1 (**permalink**) 13/06/2010, 03:40

Buenas soy nuevo en el foro y necesito que me ayuden. Estoy haciendo una aplicación en vb y quiero mostrar unos gráficos con los datos de la BD. He visto la herramienta de google de CHARt y me ha gustado bastante. Pro mi idea es la siguiente. mediante un HTML si lo ejecutas te muestra el grafico en el explorador y hasta ahi todo correcto ya lo tengo montado. Pero me gustaria mostrar varios Graficos en un mismo html. No tengo ni idea de este codigo asi que aqui estoy.

Ejemplo:



<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var raw_data = [['Austria', 1336060, 1538156, 1576579, 1600652, 1968113, 1901067],
['Belgium', 3817614, 3968305, 4063225, 4604684, 4013653, 6792087],
['Czech Republic', 974066, 928875, 1063414, 940478, 1037079, 1037327],
['Finland', 1104797, 1151983, 1156441, 1167979, 1207029, 1284795],
['France', 6651824, 5940129, 5714009, 6190532, 6420270, 6240921],
['Germany', 15727003, 17356071, 16716049, 18542843, 19564053, 19830493]];

var years = [2003, 2004, 2005, 2006, 2007, 2008];

data.addColumn('string', 'Year');
for (var i = 0; i < raw_data.length; ++i) {
data.addColumn('number', raw_data[i][0]);
}

data.addRows(years.length);

for (var j = 0; j < years.length; ++j) {
data.setValue(j, 0, years[j].toString());
}
for (var i = 0; i < raw_data.length; ++i) {
for (var j = 1; j < raw_data[i].length; ++j) {
data.setValue(j-1, i+1, raw_data[i][j]);
}
}

// Create and draw the visualization.
new google.visualization.ColumnChart(document.getEleme ntById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
hAxis: {title: "Year"}}
);
}

google.setOnLoadCallback(drawVisualization);
</script>

</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>

Si este código lo ejecutan en el explorador les mostrara un grafico de barras. Me gustaria saber como poder añadir un nuevo grafico por ejemplo el mismo que aparezca dos veces pero cambiando los datos y series. Como indico donde quiero que se posicione etc..

Con este ejemplo podria empezar a funcionar.

Muchas gracias por su ayuda y disculpen si este no es el sitio correcto para mi pregunta.

mortiprogramador · #2 (**permalink**) 13/06/2010, 09:54

Hola
Bueno, pues podrías hacer otro gráfico luego que instancias al primero, por ej así

Código Javascript:

Ver original//aqui arriba todo tu código y luego esto antes de la llave (}) final 
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization2')).
draw(data,
{title:"New char",
width:600, height:400,
hAxis: {title: "Year"}}
);
//cierre final (es decir, cierre de la función como tal)
}

y en el html agregas otro div

Código HTML:

Ver original<div id="visualization2" style="width: 600px; height: 400px;"></div>

y en este caso uso los mismos datos, pero pues sería generar otros arrays con otros datos, y que se ejecute las funciones de data.addRows y data.setValues con los nuevos arrays

En cuanto a la posición, pues puedes darle posición a los divs en el estilo, usando margin e incluso padding si necesitas, y te recomendaría que uses un css para eso
saludos