Hmmm...I would normally suggest using an "onmouseover" handler for that,
but the GeoCharts don't fire mouse events. I think if you use a
MutationObserver (or a DOMNodeInsertion event handler,
if MutationObserver is not available) to watch for changes to the legend's
container, and fix the legend position from that:
function fixLegend () {
// define an offset to move the legend by
var offset = {
x: 300,
y: 0
};
// get the legend elements
var rect = document.querySelector('#chart_div svg > g:nth-child(2) >
g:nth-child(3) rect');
var textNodes = document.querySelectorAll('#chart_div svg >
g:nth-child(2) > g:nth-child(3) g > text');
// get the width of the left text node, so we know how much we need to
adjust the positioning of the bar and right text node when we make text
changes
var wBase = textNodes[1].offsetWidth;
// convert the text node format to #.# million
for (var i = 0; i < textNodes.length; i++) {
var val = parseInt(textNodes[i].innerHTML.replace(/,/g, '')) /
1000000;
textNodes[i].innerHTML = val.toFixed(1) + ' million';
}
var wOffset = textNodes[1].offsetWidth - wBase;
// move the legend
rect.setAttribute('transform', 'translate(' + (offset.x + wOffset) + ',
' + offset.y + ')');
for (var i = 0; i < textNodes.length; i++) {
textNodes[i].setAttribute('transform', 'translate(' + (offset.x +
(i < 2 ? 0: wOffset)) + ', ' + offset.y + ')');
}
}
google.visualization.events.addListener(chart, 'ready', function () {
// fix the legend on ready
fixLegend();
// set up observer to watch for changes to the legend and readjust
var container = document.querySelector('#chart_div svg > g:nth-child(2)
> g:nth-child(3)');
// use a MutationObserver if it is available
if (typeof MutationObserver === 'function') {
var observer = new MutationObserver(function (m) {
fixLegend();
});
observer.observe(container, {
childList: true
});
}
// otherwise, use an event listener
else if (document.addEventListener) {
container.addEventListener('DOMNodeInserted', fixLegend);
}
else {
container.attachEvent('onDOMNodeInserted', fixLegend);
}
});
http://jsfiddle.net/asgallant/0vmdnm48/1/
On Thursday, August 7, 2014 10:53:57 AM UTC-4, Bryan Maloney wrote:
>
>
> 1: That's really cool.
> 2: When I mouseover, the legend jumps back to the lower left corner and
> loses all formatting improvements.
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
