[SOLUCIONADO] Google Visualization Api "Chart Editor"

arturo1019 · #1 (**permalink**) 23/11/2011, 10:59

Bueno que tal amigos del foro agradezco demasiado su atencion brindada y colaboracion a nosotros los novatos haha

Bueno mi problema es el siguiente:

Estoy desarrollando una web usando php (no es que yo sea el gran master en php jeje ) la verdad sé muy poco aún de este lenguaje apenas estoy aprendiendo lo básico.

Hace poco me encontré con las "Google Visualization Api Charts" estos gráficos creados por los servidores de Google automáticamente y que además con dinámicos.

Estoy interesando (muy interesado jeje) en este gráfico en peculiar: http://code.google.com/apis/ajax/playground/?type=visualization#chart_editor

Su código de fuente éste:

<!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: ['charteditor']});
</script>
<script type="text/javascript">
var wrapper;

function init() {
wrapper = new google.visualization.ChartWrapper({
dataSourceUrl: 'https://spreadsheets.google.com/spreadsheet/tq?key=tnxuU73jT7eIL-aZke85e3A&pub=1&range=A1:E13',
containerId: 'visualization',
chartType: 'LineChart'
});
wrapper.draw();
}

function openEditor() {
// Handler for the "Open Editor" button.
var editor = new google.visualization.ChartEditor();
google.visualization.events.addListener(editor, 'ok',
function() {
wrapper = editor.getChartWrapper();
wrapper.draw(document.getElementById('visualizatio n'));
});
editor.openDialog(wrapper);
}

google.setOnLoadCallback(init);

</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<input type='button' onclick='openEditor()' value='Open Editor'>
<div id='visualization' style="width:600px;height:400px">
</body>
</html>

Es un gráfico con posibilidad de editarse simplemente presionando un botón puedes elegir entre gráfico de barras, columnas, pastel, etc etc.

La cosa esque quiero conectarlo con mi base de datos mysql por medio de php, es decir que los datos los obtenga de mi base de datos mysql directamente usando consultas y todo eso.

La cosa es que ese gráfico obtiene sus datos de las google "spreedsheets" las cuales no me agradan en lo absoluto, pues son como hojas de calculo de excel públicas de donde la gráfica agarra la información.

Alguna idea o código que puedan facilitarme para conectar con mi base de datos y usar esa gráfica sería inmensamente agradecido amigos

De antemano muchas gracias y saludos a todos los del foro !

Rappa · #2 (**permalink**) 23/11/2011, 13:21

Mira, si colocas la url que se le asigna a la variable dataSourceUrl en el explorador, te aprece esto:

Código Javascript:

Ver originalgoogle.visualization.Query.setResponse({"version":"0.6","status":"ok","sig":"565811536","table":{"cols":[{"id":"A","label"
:"Month","type":"string","pattern":""},{"id":"B","label":"2008","type":"number","pattern":"#0.###############"},{"id":"C",
"label":"2009","type":"number","pattern":"#0.###############"},{"id":"D","label":"2010","type":"number","pattern":"#0.####
###########"},{"id":"E","label":"10-Years 
Average","type":"number","pattern":"#0.###############"}],"rows":[{"c":[{"v":"Jan"},{"v":145.0,"f":"145"},{"v":156.0,"f":"
156"},{"v":160.0,"f":"160"},{"v":149.2,"f":"149.2"}]},{"c":[{"v":"Feb"},{"v":251.0,"f":"251"},{"v":201.0,"f":"201"},{"v":2
45.0,"f":"245"},{"v":250.3,"f":"250.3"}]},{"c":[{"v":"Mar"},{"v":173.0,"f":"173"},{"v":210.0,"f":"210"},{"v":201.0,"f":"20
1"},{"v":211.3,"f":"211.3"}]},{"c":[{"v":"Apr"},{"v":59.0,"f":"59"},{"v":87.0,"f":"87"},{"v":90.0,"f":"90"},{"v":73.5,"f":
"73.5"}]},{"c":[{"v":"May"},{"v":7.0,"f":"7"},{"v":0.0,"f":"0"},{"v":4.0,"f":"4"},{"v":5.3,"f":"5.3"}]},{"c":[{"v":"Jun"},
{"v":0.0,"f":"0"},{"v":0.0,"f":"0"},{"v":0.0,"f":"0"},{"v":0.5,"f":"0.5"}]},{"c":[{"v":"Jul"},{"v":0.0,"f":"0"},{"v":2.0,"
f":"2"},{"v":0.0,"f":"0"},{"v":0.7,"f":"0.7"}]},{"c":[{"v":"Aug"},{"v":0.0,"f":"0"},{"v":0.0,"f":"0"},{"v":0.0,"f":"0"},{"
v":0.2,"f":"0.2"}]},{"c":[{"v":"Sep"},{"v":11.0,"f":"11"},{"v":15.0,"f":"15"},{"v":21.0,"f":"21"},{"v":12.3,"f":"12.3"}]},
{"c":[{"v":"Oct"},{"v":7.0,"f":"7"},{"v":33.0,"f":"33"},{"v":25.0,"f":"25"},{"v":26.2,"f":"26.2"}]},{"c":[{"v":"Nov"},{"v"
:37.0,"f":"37"},{"v":41.0,"f":"41"},{"v":63.0,"f":"63"},{"v":40.3,"f":"40.3"}]},{"c":[{"v":"Dec"},{"v":122.0,"f":"122"},{"
v":101.0,"f":"101"},{"v":99.0,"f":"99"},{"v":111.1,"f":"111.1"}]}]}});

Si logras que tus páginas devuelvan los datos con este formato, solo alcanza con colocar dicha url en la variable que te mencioné arriba.

arturo1019 · #3 (**permalink**) 15/02/2012, 13:00

muchas gracias logre hacer eso que me comentaste cree una pagina que devuelve los datos en ese formato especifico de google haciendo uso de un script que me encontre en la web si alguien mas esta interesado en ese archivo con gusto se los facilito mi correo es -correo borrado- por si alguien mas ha batallado con esto

Rappa · #4 (**permalink**) 16/02/2012, 04:53

Bueno, me alegro que haya funcionado