I am using angular directive for google charts How do i enable legend selection
i.e. If i click on any legend on left, it should toggle legend data on the chart
When i use a normal AreaChart or LineChart i get a function
agc-on-select="functionName(selectedItems)" which returns me the array of selection.
But in case of BubbleChart i don't get anything.
Thanks in advance.
Here is FIDDLE demo example
Javascript
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Provider Bid', 'DFP Base', 'Provider', 'Revenue'],
['0', 0.0, 0.0, 'Unknown', 26.5],
['2', 0.0, 0.0, 'Legend 1', 12.88],
['4', 0.0, 0.0, 'Legend 2', 105.55],
['11', 0.0, 0.0, 'Legend 3', 441.05],
['19', 0.0, 0.0, 'Legend 4', 213.55],
['2', 0.0, 0.0, 'Legend 1', 1.65],
['19', 0.0, 0.0, 'Legend 4', 2.64],
['0', 0.8, 0.3, 'Unknown', 110],
['2', 0.8, 0.0, 'Legend 1', 131.6],
['4', 0.8, 0.0, 'Legend 2', 637.68],
['11', 0.8, 0.0, 'Legend 3', 1975.16],
['19', 0.8, 0.0, 'Legend 4', 985.48],
['2', 0.8, 0.0, 'Legend 1', 391.37],
['4', 0.8, 0.0, 'Legend 2', 299.45],
['11', 0.8, 0.0, 'Legend 3', 1969.2],
['19', 0.8, 0.0, 'Legend 4', 3140.41],
['0', 1.3, 0.3, 'Unknown', 22.75],
['2', 1.3, 0.0, 'Legend 1', 37.25],
['4', 1.3, 0.0, 'Legend 2', 70.97],
['11', 1.3, 0.0, 'Legend 3', 138.18],
['19', 1.3, 0.0, 'Legend 4', 101.75],
['2', 1.3, 0.0, 'Legend 1', 426.32],
['4', 1.3, 0.0, 'Legend 2', 82.44],
['11', 1.3, 0.0, 'Legend 3', 1470.45],
['19', 1.3, 0.0, 'Legend 4', 1193.6],
['2', 1.3, 0.0, 'Legend 1', 446.49],
['4', 1.3, 0.0, 'Legend 2', 16.14],
['11', 1.3, 0.0, 'Legend 3', 1800.23],
['19', 1.3, 0.0, 'Legend 4', 425.57],
['0', 1.8, 0.3, 'Unknown', 18.25],
['2', 1.8, 0.0, 'Legend 1', 26.57],
['4', 1.8, 0.0, 'Legend 2', 53.84],
['11', 1.8, 0.0, 'Legend 3', 115.13],
['19', 1.8, 0.0, 'Legend 4', 76.38],
['2', 1.8, 0.0, 'Legend 1', 264.38],
['4', 1.8, 0.0, 'Legend 2', 79.57],
['11', 1.8, 0.0, 'Legend 3', 834.74],
['19', 1.8, 0.0, 'Legend 4', 734.89],
['2', 1.8, 0.0, 'Legend 1', 744.86],
['4', 1.8, 0.0, 'Legend 2', 25.41],
['11', 1.8, 0.0, 'Legend 3', 2493.54],
['19', 1.8, 0.0, 'Legend 4', 929.74],
['2', 1.8, 0.0, 'Legend 1', 778.59],
['4', 1.8, 0.0, 'Legend 2', 20.85],
['11', 1.8, 0.0, 'Legend 3', 2660.98],
['19', 1.8, 0.0, 'Legend 4', 463.41],
['0', 10.3, 0.3, 'Unknown', 0.5],
['4', 10.3, 0.0, 'Legend 2', 0.74],
['2', 10.3, 0.0, 'Legend 1', 1.54],
['4', 10.3, 0.0, 'Legend 2', 2.77],
['11', 10.3, 0.0, 'Legend 3', 4.17],
['19', 10.3, 0.0, 'Legend 4', 9.71],
['2', 10.3, 0.0, 'Legend 1', 3.99],
['4', 10.3, 0.0, 'Legend 2', 1.19],
['11', 10.3, 0.0, 'Legend 3', 14.1],
['19', 10.3, 0.0, 'Legend 4', 2.47],
['11', 10.3, 0.0, 'Legend 3', 20.2],
['19', 10.3, 0.0, 'Legend 4', 5.5],
['11', 10.3, 0.0, 'Legend 3', 10.05],
['2', 10.3, 0.0, 'Legend 1', 9.01],
['11', 10.3, 0.0, 'Legend 3', 30.42],
['19', 10.3, 0.0, 'Legend 4', 6.8],
['2', 10.3, 0.0, 'Legend 1', 14.21],
['11', 10.3, 0.0, 'Legend 3', 24.63],
['19', 10.3, 0.0, 'Legend 4', 5.24],
['2', 10.3, 0.0, 'Legend 1', 3.2],
['11', 10.3, 0.0, 'Legend 3', 25.85],
['19', 10.3, 0.0, 'Legend 4', 10.09],
['2', 10.3, 0.0, 'Legend 1', 10.92],
['11', 10.3, 0.0, 'Legend 3', 19.16],
['19', 10.3, 0.0, 'Legend 4', 17.82],
['2', 10.3, 0.0, 'Legend 1', 8.58],
['11', 10.3, 0.0, 'Legend 3', 21.26],
['19', 10.3, 0.0, 'Legend 4', 12.73],
['2', 10.3, 0.0, 'Legend 1', 19.47],
['11', 10.3, 0.0, 'Legend 3', 37.55],
['19', 10.3, 0.0, 'Legend 4', 23.48],
['2', 10.3, 0.0, 'Legend 1', 5.39],
['11', 10.3, 0.0, 'Legend 3', 31.77],
['19', 10.3, 0.0, 'Legend 4', 20.96],
['11', 10.3, 0.0, 'Legend 3', 39.84],
['19', 10.3, 0.0, 'Legend 4', 124.56],
['11', 10.3, 0.0, 'Legend 3', 62.18],
['11', 10.3, 0.0, 'Legend 3', 82.21],
['11', 10.3, 0.0, 'Legend 3', 28.54],
['19', 10.3, 0.0, 'Legend 4', 7.49],
['11', 10.3, 0.0, 'Legend 3', 22.94],
['19', 10.3, 0.0, 'Legend 4', 7.88],
['11', 10.3, 0.0, 'Legend 3', 33.04],
['11', 10.3, 0.0, 'Legend 3', 53.06],
['11', 10.3, 0.0, 'Legend 3', 64.68],
['11', 10.3, 0.0, 'Legend 3', 48.49],
['2', 10.8, 0.8, 'Legend 1', 0.97],
['4', 10.8, 0.0, 'Legend 2', 1.32],
['11', 10.8, 0.0, 'Legend 3', 0.63],
['19', 10.8, 0.0, 'Legend 4', 0.69],
['2', 10.8, 0.0, 'Legend 1', 2.15],
['11', 10.8, 0.0, 'Legend 3', 6.16],
['11', 10.8, 0.0, 'Legend 3', 14.18],
['2', 10.8, 0.0, 'Legend 1', 9.1],
['11', 10.8, 0.0, 'Legend 3', 9.31],
['19', 10.8, 0.0, 'Legend 4', 2.09],
['2', 10.8, 0.0, 'Legend 1', 11.24],
['11', 10.8, 0.0, 'Legend 3', 7.94],
['19', 10.8, 0.0, 'Legend 4', 2.87],
['2', 10.8, 0.0, 'Legend 1', 3.2],
['11', 10.8, 0.0, 'Legend 3', 16.22],
['19', 10.8, 0.0, 'Legend 4', 9.62],
['4', 10.8, 0.0, 'Legend 2', 3.64],
['11', 10.8, 0.0, 'Legend 3', 3.73],
['2', 10.8, 0.0, 'Legend 1', 16.96],
['19', 10.8, 0.0, 'Legend 4', 12.15],
['11', 10.8, 0.0, 'Legend 3', 23.03],
['2', 10.8, 0.0, 'Legend 1', 5.42],
['11', 10.8, 0.0, 'Legend 3', 15.92],
['11', 10.8, 0.0, 'Legend 3', 5.68],
['19', 10.8, 0.0, 'Legend 4', 47.15],
['11', 10.8, 0.0, 'Legend 3', 18.95],
['11', 10.8, 0.0, 'Legend 3', 13.44],
['11', 10.8, 0.0, 'Legend 3', 21.72],
['11', 10.8, 0.0, 'Legend 3', 15.4],
['11', 10.8, 0.0, 'Legend 3', 8.24],
['19', 10.8, 0.0, 'Legend 4', 8.29],
['11', 10.8, 0.0, 'Legend 3', 69.44],
['11', 10.8, 0.0, 'Legend 3', 18.34],
['11', 10.8, 0.0, 'Legend 3', 19.47],
['4', 11.3, 0.3, 'Legend 2', 0.48],
['2', 11.3, 0.8, 'Legend 1', 3.22],
['4', 11.3, 0.8, 'Legend 2', 2.14],
['11', 11.3, 0.8, 'Legend 3', 9.46],
['19', 11.3, 0.8, 'Legend 4', 5.78],
['2', 11.3, 0.8, 'Legend 1', 6.77],
['11', 11.3, 0.8, 'Legend 3', 18.53],
['19', 11.3, 0.8, 'Legend 4', 2.39],
['2', 11.3, 0.8, 'Legend 1', 3.84],
['11', 11.3, 0.8, 'Legend 3', 30.97],
['19', 9.3, 0.3, 'Legend 4', 14.15],
['2', 9.3, 0.3, 'Legend 1', 8.67],
['11', 9.3, 0.3, 'Legend 3', 52.32],
['19', 9.3, 0.3, 'Legend 4', 5.11],
]);
var options = {
title: 'test',
hAxis: {title: 'X Axis'},
vAxis: {title: 'y Axis'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="series_chart_div" style="width: 900px; height: 500px;"></div>
Google chart consider the elements in first row except 0 index as the legends,
in case of bubble chart there are two types of legends one is based on color variation and other as unique value of index 3 in you case.
But in both cases the callback on selectedItems does not work as it is still considering the row 0 headings as legends, that's why it not working.
Try this:
Make your own legend by calculating unique of index 3 and mark
legend: {
position: 'none'
},
in options and use custom legends instead that way you will get you own events.