Dropdown update chart events


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>

    $("#updateCity").on('click', function() {

Inside my advanced tab

handlers.finish = function(data, logger, processor, el) {
  logger.debug('Data is processed: ', data);

  if (processor && !processor.subscribed) {
            el.empty().html('<img alt="loading..." src="/_layouts/15/images/gears_anv4.gif" />');
        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.

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);

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?

You can make a variable global, like so: