Google Charts in Rails 3.1 Ajax Parcial

He estado trabajando con Google charts sin problemas, pero ahora llegué a un punto en el que necesito mostrar un gráfico dentro de un parcial renderizado por Ajax.Google Charts in Rails 3.1 Ajax Parcial

Obviamente no se muestra nada. Sé que tiene algo que ver con el activador de Java para construir el gráfico que no está activado, pero necesito ayuda con lo que necesito hacer ...

Actualmente tengo algo como esto (que no es Ajax) :

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Sales'); 
     data.addColumn('number', 'Expenses'); 
     data.addRows([ 
      ['2004', 1000, 400], 
      ['2005', 1170, 460], 
      ['2006', 660, 1120], 
      ['2007', 1030, 540] 
     ]); 

     var options = { 
      width: 400, height: 240, 
      title: 'Company Performance', 
      vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
     }; 

     var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

Fuente

2012-01-19 user1051849

en su página principal Guarde éstos (sin necesidad de cargar tablas de Google en el parcial):

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
</script>

en su parcial que tiene que hacer algo, como a continuación (suponiendo que el uso de jQuery). El punto es para ejecutar el código JS después se ha cargado el DOM que es lo que $ (function() {....}) no:

<div id="chart_div"></div> 
<script type="text/javascript"> 
    $(function() { 
    drawChart(); 
    }); 

    function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Sales'); 
    data.addColumn('number', 'Expenses'); 
    data.addRows([ 
     ['2004', 1000, 400], 
     ['2005', 1170, 460], 
     ['2006', 660, 1120], 
     ['2007', 1030, 540] 
    ]); 

    var options = { 
     width: 400, height: 240, 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
    } 
</script>

El uso de una biblioteca como jQuery le ahorrará muchas horas de incoherencias de navegadores para saber cuándo el dom está cargado correctamente.

Fuente

2012-05-02 02:48:57

Sustitución

google.setOnLoadCallback(drawChart);

con

$(function() { 
    drawChart(); 
});

hizo el truco para los parciales AJAX! Gracias por la ayuda, anteriormente el DOM se recargaba pero los gráficos no se estaban insertando.

Fuente

2012-05-18 21:02:57 JGuo

Google Charts in Rails 3.1 Ajax Parcial

Respuesta

Cuestiones relacionadas