重新加载然后刷新相同的函数jquery

Question

In my PHP application I'm using 2 php files.

1. chart.php - Page contains a google chart.

   <div id="chart_div" style="height:100%;width:100%">
   </div>
   
   <script type="text/javascript">
     google.charts.load('current', {'packages':['bar']});
     google.charts.setOnLoadCallback(drawStuff);
   
     function drawStuff() {
       var data = new google.visualization.arrayToDataTable([
         ['Opening Move', 'Percentage'],
         ["King's pawn (e4)", 44],
         ["Queen's pawn (d4)", 31],
         ["Knight to King 3 (Nf3)", 12],
         ["Queen's bishop pawn (c4)", 10],
         ['Other', 3]
       ]);
   
       var options = {
         title: 'Chess opening moves',
         width: 900,
         legend: { position: 'none' },
         chart: { title: 'Chess opening moves',
                  subtitle: 'popularity by percentage' },
         bars: 'horizontal', // Required for Material Bar Charts.
         axes: {
           x: {
             0: { side: 'top', label: 'Percentage'} // Top x-axis.
           }
         },
         bar: { groupWidth: "90%" }
       };
   
       var chart = new google.charts.Bar(document.getElementById('chart_div'));
       chart.draw(data, options);
           google.visualization.events.addListener(chart, 'select', selectHandler);
     };
   
     function selectHandler() {
        window.location.href = "chart.php";
     }
   </script>
   

2. index.php - Home page where I'm including chart.php in a div

<div style="width:40%">
require_once 'chart.php';
</div>

On clicking the chart in index.php page , it will call selectHandler() and redirect to chart.php.

The issue is, the chart in chart.php (after redirecting from index.php) is showing in small size similar to the chart display in index.php. Once I refreshes the chart.php it will display the chart in correct size.

Is there any function in jquery to refresh a page by reloading other than using location.reload().

Can anyone help me to fix this issue? Thanks in advance.

Answer 1

try redrawing the chart,
use an inline function on your select handler,
so you can still access your chart, data, and options.

google.visualization.events.addListener(chart, 'select', function () {
  window.location.href = "chart.php";
  chart.draw(data, options);
});