Google Charts: manually set focus on column of data in Column Chart - google-visualization

Question

I am making a custom legend for a Google Charts ColumnChart. I would like it to have the same behavior as the native legend. The native legend has behavior on click and mouseover. When a legend key is clicked, the column of values is selected. I can do this in my custom legend by calling
myChartWrapper.getChart().setSelection([{column: 4}]);
When a legend key is moused over, the column of values gets an outline. I would like to trigger that same outline when mousing over the key in my custom legend.
Is there a way to set that focussed column similar to setting the selection?
I thought I might be able to do it by calling events.trigger(), but I can't get anything to happen at all with that. For example, these don't seem to do anything.
// did nothing:
google.visualization.events.trigger(myChartWrapper, 'select', [{column: 4}]);
// did nothing:
google.visualization.events.trigger(myChartWrapper.getChart(), 'onmouseover', [{column: 4}]);

Answer 1

attempt to cause focus appearance via event trigger
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Month', type: 'string'},
{label: 'Amount', type: 'number'}
],
rows: [
{c:[{v: 'April'}, {v: 279899811.34}]},
{c:[{v: 'May'}, {v: 205855811}]},
{c:[{v: 'June'}, {v: 10009811}]},
{c:[{v: 'July'}, {v: 79979811}]},
{c:[{v: 'August'}, {v: 175789911}]},
{c:[{v: 'September'}, {v: 99899811}]},
{c:[{v: 'October'}, {v: 149899811}]},
{c:[{v: 'November'}, {v: 80899811}]},
{c:[{v: 'December'}, {v: 60899811}]},
{c:[{v: 'January'}, {v: 225899811}]},
{c:[{v: 'February'}, {v: 148899811}]},
{c:[{v: 'March'}, {v: 150899811}]}
]
});
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: dataTable,
options: {
legend: {
position: 'bottom'
},
vAxis: {
format: 'short'
}
}
});
google.visualization.events.addOneTimeListener(chartWrapper, 'ready', function () {
// mouseover for custom div
document.getElementById('hover_div').addEventListener('mouseover', function () {
// trigger onmouseover for chart, pass props
google.visualization.events.trigger(chartWrapper.getChart(), 'onmouseover', {
'column': 1,
'row': null,
'test': 'over'
});
}, false);
// mouseout
document.getElementById('hover_div').addEventListener('mouseout', function () {
google.visualization.events.trigger(chartWrapper.getChart(), 'onmouseout', {
'column': 1,
'row': null,
'test': 'out'
});
}, false);
// chart event listeners
google.visualization.events.addListener(chartWrapper.getChart(), 'onmouseover', function (props) {
document.getElementById('msg_div').innerHTML = JSON.stringify(props);
});
google.visualization.events.addListener(chartWrapper.getChart(), 'onmouseout', function (props) {
document.getElementById('msg_div').innerHTML = JSON.stringify(props);
});
});
chartWrapper.draw();
},
packages:['controls', 'corechart']
});
#hover_div {
background-color: magenta;
border: 1px solid lime;
color: cyan;
height: 200px;
text-align: center;
width: 200px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="hover_div">HOVER THIS DIV</div>
<div id="msg_div"></div>

Answer 2

Here's a hacky way to highlight bars in a bar chart. It's not a proper solution because it doesn't trigger the chart's native highlight. Instead, it's a way to create your own highlight by manipulating the stroke of the rects with jQuery. I approximated the highlight by setting the stroke to be 2px and grey. The actual highlight appears to be a blur effect with svg. To enhance the highlighting, I applied a slight transparency to the rects themselves.
On mouseover, I get the set of rects for all the bars, and then the subset for the particular column. It turned out to be tricky to get the right set of rects on mouseover, because the user might have selected a bar. When you select a bar with the mouse (i.e., click on it), the rect for it moves around, so you have to select the rects anew each time you mouseover. Plus selecting adds another rect for the white outline, which needs to be filtered out.
For the custom legend, I used colors from the Google Charts palette, which you get here.
I didn't add the part that would trigger a selection on clicking the legend. For that, I will follow this method.
The solution also only works with bar charts. You'd have to do something else with line charts, or other types. So the value of this solution may be limited.
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(draw_chart);
function draw_chart() {
// Create DataTable object from DataTable constructor or arrayToDatable()
var data = new google.visualization.DataTable({"rows":[{"c":[{"v":"Sacramento"},{"v":97},{"v":79},{"v":67},{"v":100}]},{"c":[{"v":"Montpelier"},{"v":96},{"v":74},{"v":32},{"v":96}]},{"c":[{"v":"Juneau"},{"v":24},{"v":44},{"v":54},{"v":64}]},{"c":[{"v":"Montgomery"},{"v":26},{"v":69},{"v":51},{"v":56}]},{"c":[{"v":"Little Rock"},{"v":87},{"v":69},{"v":78},{"v":41}]}],"cols":[{"type":"string","id":"cities","label":"cities"},{"type":"number","id":"A","label":"A"},{"type":"number","id":"B","label":"B"},{"type":"number","id":"C","label":"C"},{"type":"number","id":"D","label":"D"}]});
// Add formatters, if any
// Create ChartWrapper
var my_chart = new google.visualization.ChartWrapper({
"containerId": "chart_id",
"dataTable": data,
"chartType": "ColumnChart",
"options": {"bar": {"groupWidth": 67}, "chartArea": {"width": 440, "top": 20, "height": 295, "left": 60}, "height": 375, "width": 500, "fontSize": 12, "legend": "none"}
});
var bar_rect_set;
var num_rows = 5;
var num_cols = 4;
var num_series = num_rows * num_cols;
var parent_g;
function get_bar_rect_set() {
// get all the rects in the parent except for the white outline rects
// on selected bars, if any.
bar_rect_set = parent_g.find('rect[fill!="#ffffff"]');
}
google.visualization.events.addOneTimeListener(my_chart, 'ready', function () {
// Get an initial collection of the bar rects, along with their parent.
// Hereafter, get the bar rects with the method above.
// get all rects three layers down, including gridlines and axis
var g_set_1 = $("svg g g g rect");
// slice out the gridlines at the beginning and the axis line at the end
bar_rect_set = g_set_1.slice(g_set_1.length - num_series - 1, g_set_1.length - 1);
parent_g = $(bar_rect_set[0]).parent();
});
my_chart.draw();
function highlight_bars(series_num) {
if (series_num > num_cols - 1) {
return false;
}
get_bar_rect_set();
var start_index = series_num * num_rows;
var end_index = start_index + num_rows;
var series_g_set = bar_rect_set.slice(start_index, end_index)
var styles = {'stroke-width': "1.5px", "stroke": "#AAAAAA", "opacity": .8};
series_g_set.css(styles);
}
function remove_highlight() {
var styles = {'stroke-width': "0", "opacity": 1};
bar_rect_set.css(styles);
}
$("#legend tr").each(function(index, row) {
$(row).mouseover(function() {
highlight_bars(index);
}).mouseout(function() {
remove_highlight();
});
});
}
.color_bar {
width:24px;
height:12px;
margin-right:5px;
vertical-align:middle;
}
#legend td {
font-size:12;
height:19px;
font-family:"Arial";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<table id="legend">
<tr>
<td><div class='color_bar' style="background-color:#3366cc"></div></td>
<td>A</td>
</tr>
<tr>
<td><div class='color_bar' style="background-color:#dc3912"></div></td>
<td>B</td>
</tr>
<tr>
<td><div class='color_bar' style="background-color:#ff9900"></div></td>
<td>C</td>
</tr>
<tr>
<td><div class='color_bar' style="background-color:#109618"></div></td>
<td>D</td>
</tr>
</table>
<div id="chart_id" ></div>