Dropdown update chart events

by annlee » Fri Jan 15, 2016 10:42 pm

Hi,

I've set up a dropdown box to update the chart like here (http://www.spchart.com/demo/helpdesk-dashboard). If I manually change the dropdown box, it works.

However, when I have a function that triggers the change function via jQuery, the chart won't update.

So this is my html and jquery function:

Code: Select all

<a href="#" id="updateCity">Change</a>

<select id="municipality">
  <option value="Metro">All</option>
  <option value="Anmore">Anmore</option>
  <option value="Burnaby">Burnaby</option>
  <option value="Coquitlam">Coquitlam</option>
  <option value="Vancouver">Vancouver</option>
  <option value="Surrey">Surrey</option>
</select>

$(document).ready(function(e){
    $("#updateCity").on('click', function() {
        $('#municipality').val('Vancouver').trigger('change');
    });
});


Inside my advanced tab
Code: Select all
handlers.finish = function(data, logger, processor, el) {
  logger.debug('Data is processed: ', data);

  if (processor && !processor.subscribed) {
   $(document).on('change','#municipality',function(e){
            el.empty().html('<img alt="loading..." src="/_layouts/15/images/gears_anv4.gif" />');
            processor.process(el);
        });      
        processor.subscribed = true;
    }
 
  return true;
}


Again, when I manually change the dropdown, the chart updates. But when I use jquery to trigger the change event, it doesn't.

Please help. Thanks.
annlee
 
Posts: 35
Joined: Thu Oct 08, 2015 3:25 pm

by Rostislav » Wed Jan 20, 2016 11:59 am

Inside handlers.finish make the processor and the el variables global (put them in a namespace for security's sake). Then whenever you need to programmatically redraw the chart call the process function yourself:

Code: Select all
el.html('<img alt="loading..." src="/_layouts/15/images/gears_anv4.gif" />');
processor.process(el);
User avatar
Rostislav
 
Posts: 61
Joined: Fri Oct 09, 2015 10:51 am

by annlee » Wed Jan 20, 2016 5:41 pm

I've set global variables inside like so:

Code: Select all
handlers.finish = function(data, logger, processor, el) {
  var processor_global = processor;
  var el_global = el;
}


But, in my script editor on the page, processor_global, and el_global are undefined. Is there a way to set the processor and el variables so my script outside of the dashboard webpart can see?
annlee
 
Posts: 35
Joined: Thu Oct 08, 2015 3:25 pm

by Rostislav » Thu Jan 21, 2016 10:29 am

You can make a variable global, like so:
window.processor_global = processor;
User avatar
Rostislav
 
Posts: 61
Joined: Fri Oct 09, 2015 10:51 am


Return to Dashboard Designer for SharePoint 2013