awenborn awenborn - 3 months ago 20
Javascript Question

Google Visualization Charts API - Changing Highlight Color of Explorer Function on Line Chart

I'm using the Google Visualization API to generate some charts on a webpage and want to make use of the 'Explorer' option to allow users to zoom in on areas of Line Charts.

The charts are working fine (see fiddle below) but I'd like to change the highlight color of the box created when dragging to zoom. The default is a very distinctive Google-ish Blue:

enter image description here

I've currently set the parameters of the Explorer object as detailed below, but the "Line Chart Reference" doesn't mention a property that can be set to change the highlight color, so how might I go about doing it? I tried delving into the 'loader.js' file but couldn't make any sense of what it was doing! Many thanks.

explorer: {
actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal',
keepInBounds: true,
maxZoomOut: 1,
maxZoomIn: 0.01,
}


Chart Fiddle

Answer

UPDATE:

I may have jumped the gun on the last update, it seems as though Mutation Events such as DOMNodeInserted have been deprecated for a while due to performance issues, so I've rewritten my previous solution using the more widely supported MutationObserver as shown below.

var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(data, options);

var observer = new MutationObserver(function(mutations) {
  for(var i=0; i<mutations.length; ++i) {
    for(var j=0; j<mutations[i].addedNodes.length; ++j) {
      if (mutations[i].addedNodes[j].getAttribute('fill') === '#0000ff') {
        mutations[i].addedNodes[j].setAttribute('fill', 'magenta');
      }
    }
  }
});
var config = { childList: true, subtree:true };
observer.observe(container, config);

CodePen using MutationObserver

ORIGINAL ANSWER:

Using whitehat's headstart, I've managed to crack this by using a jQuery listener for 'DOMNodeInserted' and modifying the fill (see pen at the bottom of this update).

Thanks again for the help!

var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);

$(container).on('DOMNodeInserted', changeExplorer);

function changeExplorer() {
  var rects = container.getElementsByTagName('rect');
  Array.prototype.forEach.call(rects, function(rect) {
    if (rect.getAttribute('fill') === '#0000ff') {
      rect.setAttribute('fill', 'magenta');
    }
  });
}

CodePen with custom Explorer Box Highlighting