2

Intento obtener el dataUrl ( algo similar a lo que hace esta pagina link ) de un grafico generado con Google Charts y guardar este en una variable, el grafico lo genero de la siguiente manera:

    var result;
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Ciudad', 'Poblacion'],
        ['Tulua', 12312 ],
        ['Bogota', 22222 ]
      ]);

      var options = {
        title: "Max Poblacion",
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.PieChart(chart_div);

      
      google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        console.log(chart.getImageURI());
        result = chart.getImageURI();
      });
      
      chart.draw(data, options);
  }
console.log(result);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart_div'></div>

puedo mostrar lo que necesito pero no logro guardarla en una variable, pues al intentar hacerlo esta me muestra que esta indefinida.

¿ Es necesario mostrar el grafico en un div para obtener el dataUrl chart.getImageURI() de este?

1 respuesta 1

2

El problema es que tienes una Condición de Carrera: el console.log(result) se está ejecutando antes de que se llene la variable con el dataUrl.

Coloca el console.log(result) en la línea siguiente a result = chart.getImageURI(); y verás que si se está guardando la variable. También puedes probar con esto:

setTimeout(function(){console.log(result)}, 3000)

Ahora, supongo que lo que necesitas es hacer algo después de que el gráfico se genere, como enviar la imagen via ajax al servidor, o mostrarla en una nueva ventana, etc. para esto, debes llamar a la función que ejecute esa operación desde dentro del evento ready del chart:

google.visualization.events.addListener(chart, 'ready', function () {
  chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
  console.log(chart.getImageURI());
  result = chart.getImageURI();
  enviarAlServidor(result);//En este punto ya tienes el valor en la variable.
});

Actualización

Como indica @rnd, no es realmente una Condición de Carrera, porque por definición esta se refiere al acceso a un recurso compartido desde diferentes procesos/hilos, y Javascript maneja las llamadas asíncronas (eventos, setTimeout...) en un único hilo (el loop de eventos): el evento ready de chart no se disparará, al menos, hasta que haya concluido la función drawChart.

4
  • Claro ya entiendo, mira y hay alguna manera de retornar el result con un return o algo así return = result;en ves de utilizar una función, he intentado pero no he tenido éxito.
    – Alan
    el 7 sep. 2016 a las 17:36
  • 1
    No hay forma de hacer un race condition en javascript pues tiene un solo thread (a menos que uses Workers) por lo que no puede ser ese el nombre del problema, aqui la cosa es que es una solicitud asincronica, eso es todo. saludos! el 7 sep. 2016 a las 20:55
  • 1
    @AlanPatiño no es posible, el evento ready se disparará después de que la función drawChart haya terminado, así que la forma retornar el resultado sería llamando a una función una vez que haya terminado.
    – Roimer
    el 8 sep. 2016 a las 11:53
  • Cierto @rnd, el efecto al menos en este caso es parecido, pero no es correcto decir que fue un Race Condition. Ya corregí la explicación, Gracias!
    – Roimer
    el 8 sep. 2016 a las 11:55

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.