Google Charts in Rails 3.1 Ajax parziale

Ho lavorato con i grafici di Google senza problemi, ma ora sono arrivato a un punto in cui ho bisogno di visualizzare un grafico all'interno di un parziale reso da Ajax.Google Charts in Rails 3.1 Ajax parziale

Ovviamente non sta mostrando nulla. So che è qualcosa a che fare con il trigger Java per costruire il grafico non attivato, ma ho bisogno di aiuto con esattamente quello che devo fare ...

Attualmente ho qualcosa di simile (non 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>

fonte

2012-01-19 user1051849

nella pagina principale di mantenere queste (non c'è bisogno di caricare Google Charts nel parziale):

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

nella tua parziale è necessario fare qualcosa di simile qui di seguito (a patto di utilizzare jQuery). Il punto è quello di eseguire il codice js dopo il DOM è stato caricato, che è quello che $ (function() {....}) non:

<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>

Utilizzando una libreria come jQuery vi farà risparmiare molte ore di incongruenze dei browser per sapere quando il dom è stato caricato correttamente.

fonte

2012-05-02 02:48:57

Sostituzione

google.setOnLoadCallback(drawChart);

con

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

ha fatto il trucco per le parziali AJAX! Grazie per l'aiuto, in precedenza il DOM si stava ricaricando ma i grafici non venivano inseriti.

fonte

2012-05-18 21:02:57 JGuo

Google Charts in Rails 3.1 Ajax parziale

risposta

Problemi correlati