Forums

Need to call a jquery function to refresh a chart when block data is updated

Permalink
I have a custom block that allows users to enter data by month which is then rendered into a column chart using Google Charts. It was quite easy to get the chart to render from the data on page load.

My block's view.php is (minus the middle months to shorten the code):

<?php defined('C5_EXECUTE') or die(_("Access Denied.")) ?>
   <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Budget', 'Actual', 'NIAB'],
          ['Jan', <?php echo $ranijanbudget ?>, <?php echo $ranijanactual ?>, <?php echo $ranijanniab ?>],
          ['Feb', <?php echo $ranifebbudget ?>, <?php echo $ranifebactual ?>, <?php echo $ranifebniab ?>],
         ...
      <?php endif; ?>
       <?php if($ranidecbudget != 0) : ?>
          ['Dec', <?php echo $ranidecbudget ?>, <?php echo $ranidecactual ?>, <?php echo $ranidecniab ?>]
      <?php endif; ?>
        ]);
Viewing 15 lines of 23 lines. View entire code block.


Then the area for the block is in the theme like this:

<div id="Revenue-container">
  <div id="Revenue-data" class="view">
    <div class="name"><img src="http://d.vianow.com/x/images/Revenue.png" alt="" border="0">Revenue and Net Income</div>
     <?php $a = new Area('Revenue'); $a->display($c); ?>
    <div id="chart_div" style="width: 450px; height: 500px;"></div>
  </div>
</div>


And that works great on page load. But when I edit the block of course the jquery doesn't know to refresh. Ideally I would detect when the php finished updating on the page and would then trigger the jquery. But I can't figure out how to do that. The closest I can do is this in my auto.js file:

function ccmValidateBlockForm() {
   setTimeout(function() {
      drawChart();
   }, 3000);
    return false;
}


Which of course will fail if there is much delay in the php updating with the new values. I know there is a lag because anything under 1000 in the above code results in the refresh happening too early and using the old values.

Any ideas out there? I feel like it could be an ajax thing, but I haven't been able to wrap my head around the ajax examples online. Or maybe something triggering from $controller->view() or on_page_update, but I'm not really clear on exactly when those fire. I tried using a controller save block, but it was even earlier than the auto.js with no delay. Thanks in advance to anyone who can help me!
 
hutman replied on at Permalink Best Answer Reply
hutman
I'm not sure if this would work, but you could try putting this at the bottom of your view.php file:

<?php
global $c;
if ($c->isEditMode()) {
?>
<script type="text/javascript">
drawChart();
</script>
<?php
}
?>


That way if the page is in edit mode it calls the drawChart function when the block is displayed.
ccaron replied on at Permalink Reply
Awesome, that worked perfectly!