Run the google.charts.load more than once after postback

[Darren Leo Wood]

How do I run the https://www.gstatic.com/charts/loader.js  google.charts.load with each post back ?

It runs and displays my char initially, but then the user can turn the visibility of the panel the chart is on off and  on. After that post back that makes it invisible the chart is not loaded again when the panel is visible . How can I force this to happen when I want it to.

I am using ASP.NET and C#

[SJW]

I experienced a similar issue when using jQuery-UI .tabs()

Charts don't draw properly when not visible. To counteract, I moved the draw() functionality to the tabs() change handler in jQuery. Not sure how you can replicate in ASP.NET though

e.g.

$( function() {


 $( "#tabs" ).tabs({
   activate: function( event, ui ) {
     $('#activeTab').val($("#tabs").tabs('option', 'active'));
 
     // DataChart #1 - On Time Perf LINE CHART
     var on_time_chart = new google.visualization.DataTable();
     on_time_chart.addColumn('string', 'Advisor');
     on_time_chart.addColumn('number', 'On Time %');
     on_time_chart.addColumn({type: 'number', role: 'annotation'});
     on_time_chart.addRows(data);
     var chart = new google.visualization.LineChart(document.getElementById('on_time_perf_chart'));
     var options = {
       width: '100%',
       height: 300,
       chartArea: {left:75, top:10, width:'80%', height:150},
       pointSize: 4,
       legend: {title: 'On Time%', position: 'bottom'},
       hAxis: {slantedText: 1, slantedTextAngle:50},
       vAxis: {title: '%'}
     };
     chart.draw(on_time_chart, google.charts.Line.convertOptions(options));
   },
   active: <?php echo (isset($_POST) && !empty($_POST['activeTab'])?$_POST['activeTab']:2 ); ?>
 });

});