Dropdown update chart events

Dashboard Designer SharePoint 2013/2016, Office 365 versions
1

Hi,

I’ve set up a dropdown box to update the chart like here (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:


<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

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.

2

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:

el.html('<img alt="loading..." src="/_layouts/15/images/gears_anv4.gif" />'); processor.process(el);

3

I’ve set global variables inside like so:

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?

4

You can make a variable global, like so: