Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Google Visualization Api "Chart Editor"

Estas en el tema de Google Visualization Api "Chart Editor" en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/11/2011, 09:59
 
Fecha de Ingreso: noviembre-2011
Mensajes: 3
Antigüedad: 7 años, 10 meses
Puntos: 1
Pregunta Google Visualization Api "Chart Editor"

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 !
  #2 (permalink)  
Antiguo 23/11/2011, 12:21
Avatar de Rappa  
Fecha de Ingreso: noviembre-2011
Ubicación: Montevideo, Uruguay
Mensajes: 80
Antigüedad: 7 años, 11 meses
Puntos: 13
Respuesta: Google Visualization Api "Chart Editor"

Mira, si colocas la url que se le asigna a la variable dataSourceUrl en el explorador, te aprece esto:
Código Javascript:
Ver original
  1. google.visualization.Query.setResponse({"version":"0.6","status":"ok","sig":"565811536","table":{"cols":[{"id":"A","label"
  2. :"Month","type":"string","pattern":""},{"id":"B","label":"2008","type":"number","pattern":"#0.###############"},{"id":"C",
  3. "label":"2009","type":"number","pattern":"#0.###############"},{"id":"D","label":"2010","type":"number","pattern":"#0.####
  4. ###########"},{"id":"E","label":"10-Years
  5. Average","type":"number","pattern":"#0.###############"}],"rows":[{"c":[{"v":"Jan"},{"v":145.0,"f":"145"},{"v":156.0,"f":"
  6. 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
  7. 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
  8. 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":
  9. "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"},
  10. {"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,"
  11. 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"},{"
  12. 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"}]},
  13. {"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"
  14. :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"},{"
  15. 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.
__________________
Drugs and alcohol are not the answer
Unless you are asking what i'm doing this weekend
  #3 (permalink)  
Antiguo 15/02/2012, 12:00
 
Fecha de Ingreso: noviembre-2011
Mensajes: 3
Antigüedad: 7 años, 10 meses
Puntos: 1
Respuesta: Google Visualization Api "Chart Editor"

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

Última edición por caricatos; 16/04/2013 a las 11:08 Razón: petición del autor
  #4 (permalink)  
Antiguo 16/02/2012, 03:53
Avatar de Rappa  
Fecha de Ingreso: noviembre-2011
Ubicación: Montevideo, Uruguay
Mensajes: 80
Antigüedad: 7 años, 11 meses
Puntos: 13
Respuesta: Google Visualization Api "Chart Editor"

Bueno, me alegro que haya funcionado
__________________
Drugs and alcohol are not the answer
Unless you are asking what i'm doing this weekend

Etiquetas: api, chart, google, html, mysql
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:10.