Google line chart not reloading when I reload the div

问题

I am having issue with Google line chart API. When I reload the div, the line chart does not load again.

This is the code for line chart

<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.addRows(4);


         <?php 
            //gets line chart data
            echo $join;?>


        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 320, height: 250, title: ''});
  }

</script>

<h3>Sales History</h3>
    <table border="5" style="border-color: #3b6aa8;" >
        <tr>
            <td>
                <div id="chart_div" style="border: 1;border-color: green;"></div>
            </td>
        </tr>
</table>

code used to reload the div

<script type="text/javascript">
$(document).ready(function() {


$('#sliderform').submit(function() {

    bodyContent = $.ajax({
          url: "dashboardreload.php",
          global: false,
          type: "POST",
          data: ({year : $("#yearval").val(), month: $("#monthval").val(),day : $("#dayval").val(),
          year1 : $("#year1val").val(), month1: $("#month1val").val(),day1 : $("#day1val").val()
                    }),
          dataType: "html",
          async:false,
          success: function(msg){
           //alert('test');
          }
       }
    ).responseText;

    $('#dash').html(bodyContent);
    //confirm(bodyContent);
    return false;


    });

});
</script>

回答1:

so this might be the problem

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

even tho you are reloading this content the page still has these references loaded and there might not ever be a call to drawChart on the second time around because the google script isn't loading any new content

to get around this you might want to call the drawChart function yourself after having loaded the new content

success: function(msg){
   drawChart();
 }

maybe this will help. gl

回答2:

so im going to asume that the code

$('#dash').html(bodyContent);

is trying to reinsert the div into the page and you are fetching a new version from the server

the #dash element is not visible in your code here but i am assuming its a parent tag.

and this code is trying to refetch the page

bodyContent = $.ajax({
      url: "dashboardreload.php",
      global: false,
      type: "POST",
      data: ({
         year : $("#yearval").val(), month: $("#monthval").val(),day : $("#dayval").val(),
      year1 : $("#year1val").val(), month1: $("#month1val").val(),day1 : $("#day1val").val()
                }),
      dataType: "html",
      async:false,
      success: function(msg){
       //alert('test');
      }
   }
).responseText;

first of all in javascript you define a variable like this

var bodyContent = .....

you will run in to some truble otherwise with global scope

and secondly ajax calls are async the success method you have there is what gives you the response from the server when its rdy

success: function(bodyContent){
   $('#dash').html(bodyContent);
}

i hope this helps

来源：https://stackoverflow.com/questions/6067015/google-line-chart-not-reloading-when-i-reload-the-div

标签

javascript

google-visualization