I've been researching this problem all day long and no success. I have a google chart displaying some data, works just fine.
I've been working on somewhat more detailed graph including about dozen graph legend items. I wanted to display my legend below the graph so I set it's position to bottom. But the "ugly" pagination generated by charts is not really appealing to my manager. So I've hidden it and re-rendered the legend items below the graph without pagination with some custom javascripting(actually I saw the code from here http://jsfiddle.net/asgallant/6Y8jF/2/) var legend = document.getElementById('legend'); var lis = []; var total = 0; for (var i = 0; i < data.length; i++) { var legendValue = data[i]; if(legendValue.indexOf("PROVIDER") == -1){ // create the legend entry lis[i] = document.createElement('li'); lis[i].id = 'legend_' + legendValue; lis[i].className = 'legendary'; lis[i].innerHTML = '<div class="legendMarker" style="background-color:' + colors[i] + ';">' + legendValue + '</div>'; // append to the legend list legend.appendChild(lis[i]); } } So almost there with the same functionality as the actual graph legend, one thing missing though. When original google chart legend is hovered the item on the graph are highlighted as in this example : http://code.google.com/apis/ajax/playground/?type=visualization#chart_wrapper If you hover on Germany or USA the bar on the graph will be selected or highlighted. How do I trigger the same behavior from my list items? I've tried : function eventFire(el, etype){ if (el.fireEvent) { el.fireEvent('on' + etype); } else { var evObj = document.createEvent('Events'); evObj.initEvent(etype, true, false); el.dispatchEvent(evObj); } } $(document).on("hover", ".legendary", function(){ eventFire(document.getElementById('graphico'),'select'); eventFire(document.getElementById('graphico'),'onmouseover'); $("#graphico").trigger("onmouseover"); $("#graphico").trigger("select"); console.log("fired hover event"); }); I get "fired hover event" message in the firebug but nothing happens in my graph. I have the onmouseout event handler as well : google.visualization.events.addListener(ga_chart, 'onmouseover', function(e) { console.log("listening bruv"); }); It fires as well, is there a way to select something on your graph? I'm trying invoke any of these events which cause highlighting on the main graph : https://developers.google.com/chart/interactive/docs/gallery/piechart#Events Any ideas or comments would be really appreciated. -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/RlOADx7dl5kJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
