javascript - Google Charts in Rails 3.1 Ajax Partial

I've been working with Google charts with no problems but I've now got to a point where I need to display a chart inside of an Ajax-rendered partial.

Obviously nothing is showing. I know it's something to do with the Java trigger to build the chart not being activated, but I need some help with exactly what it is I need to do...

Currently I have something like this (non-Ajax):

 <html>
  <head>
    <script type="text/javascript" src=""></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>

I've been working with Google charts with no problems but I've now got to a point where I need to display a chart inside of an Ajax-rendered partial.

Obviously nothing is showing. I know it's something to do with the Java trigger to build the chart not being activated, but I need some help with exactly what it is I need to do...

Currently I have something like this (non-Ajax):

 <html>
  <head>
    <script type="text/javascript" src="https://www.google./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>

Share Improve this question edited Jan 19, 2012 at 14:45 Bo Persson 92.5k31 gold badges153 silver badges209 bronze badges asked Jan 19, 2012 at 14:27 user1051849 2,3375 gold badges27 silver badges44 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

In your main page keep these (no need to load google charts in the partial):

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

In your partial you need to do something like below (assuming you use jQuery). The point is to execute the js code after the dom is loaded which is what $(function() {....}) does:

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

Using a library like jQuery will save you many hours of browsers inconsistencies for knowing when the dom is properly loaded.

Replacing

google.setOnLoadCallback(drawChart);

with

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

did the trick for the AJAX partials! Thanks for the help, previously the DOM was reloading but the charts weren't getting inserted.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Google Charts in Rails 3.1 Ajax Partial - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)