Google Charts Timeline Highlight Many Bars On Mouseover
I'm currently working on some data visualization. For the visualization I am using Google Charts Timeline embedded within Dashboard (which implements functionality of zooming on x-
Solution 1:
when assigning chart events to chart wrappers...
you have to wait for the 'ready' event on the wrapper,
then listen for the event on wrapper.getChart()
see following example...
as for highlighting multiple entries,
here I try to trigger the onmouseover on the other rows,
the event is fired but the rows aren't highlighted
I thought about using setSelection instead, but for a Timeline chart...
only one entity can be selected at any given moment
only other option would be to modify the svg directly but not recommended you would need to log all the colors, including the highlight colors, or try to provide your own
this example highlights all the Thomas Jefferson rows
google.charts.load('current', {
callback: function () {
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var dashControl = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 3,
'ui': {
'chartType': 'ScatterChart',
'chartOptions': {
'height': 70,
'chartArea': {
width: '80%',
height: '80%'
},
'hAxis': {
'baselineColor': 'none'
}
},
'chartView': {
'columns': [3, 4]
},
minRangeSize: 12*60*60*1000
}
}
});
var dashChart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'chart',
'options': {
'chartArea': {
width: '80%',
height: '80%'
},
hAxis: {
format: 'dd.MM HH:mm'
}
},
'view': {
'columns': [0, 1, 2, 3, 4]
}
});
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: "string", id: "", "role": "tooltip", "p" : { "role" : "tooltip" ,'html': true} });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', 'some tooltip content', newDate(1789, 3, 30), newDate(1797, 2, 4) ],
[ 'President', 'John Adams', 'some tooltip content', newDate(1797, 2, 4), newDate(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', 'some tooltip content', newDate(1801, 2, 4), newDate(1809, 2, 4) ],
[ 'Vice President', 'John Adams', 'some tooltip content', newDate(1789, 3, 21), newDate(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', 'some tooltip content', newDate(1797, 2, 4), newDate(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', 'some tooltip content', newDate(1801, 2, 4), newDate(1805, 2, 4)],
[ 'Vice President', 'George Clinton', 'some tooltip content', newDate(1805, 2, 4), newDate(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', 'some tooltip content', newDate(1789, 8, 25), newDate(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', 'some tooltip content', newDate(1790, 2, 22), newDate(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', 'some tooltip content', newDate(1794, 0, 2), newDate(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', 'some tooltip content', newDate(1795, 7, 20), newDate(1800, 4, 12)],
[ 'Secretary of State', 'Charles Lee', 'some tooltip content', newDate(1800, 4, 13), newDate(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', 'some tooltip content', newDate(1800, 5, 13), newDate(1801, 2, 4)],
[ 'Secretary of State', 'Levi Lincoln', 'some tooltip content', newDate(1801, 2, 5), newDate(1801, 4, 1)],
[ 'Secretary of State', 'James Madison', 'some tooltip content', newDate(1801, 4, 2), newDate(1809, 2, 3)]
]);
google.visualization.events.addListener(dashChart, 'ready', function () {
google.visualization.events.addListener(dashChart.getChart(), 'onmouseover', function (e) {
Array.prototype.forEach.call(document.getElementById(dashChart.getContainerId()).getElementsByTagName('rect'), function(bar) {
if (bar.getAttribute('fill') === '#f4b400') {
bar.setAttribute('fill', '#f7cb4d')
}
});
});
google.visualization.events.addListener(dashChart.getChart(), 'onmouseout', function (e) {
Array.prototype.forEach.call(document.getElementById(dashChart.getContainerId()).getElementsByTagName('rect'), function(bar) {
if (bar.getAttribute('fill') === '#f7cb4d') {
bar.setAttribute('fill', '#f4b400')
}
});
});
});
dashboard.bind(dashControl, dashChart);
dashboard.draw(dataTable);
},
packages:['controls', 'corechart', 'timeline']
});<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="dashboard"><divid="chart"style="height: 200px;"></div><divid="control"></div></div>Solution 2:
with a little bit of tweaking using jQuery I was able to achieve my goal. just posting this for future reference or possible google'rs
google.charts.load('current', {
callback: function () {
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var dashControl = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 3,
'ui': {
'chartType': 'ScatterChart',
'chartOptions': {
'height': 70,
'chartArea': {
width: '80%',
height: '80%'
},
'hAxis': {
'baselineColor': 'none'
}
},
'chartView': {
'columns': [3, 4]
},
minRangeSize: 12*60*60*1000
}
}
});
var dashChart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'chart',
'options': {
'chartArea': {
width: '80%',
height: '80%'
},
hAxis: {
format: 'dd.MM HH:mm'
}
},
'view': {
'columns': [0, 1, 2, 3, 4]
}
});
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: "string", id: "", "role": "tooltip", "p" : { "role" : "tooltip" ,'html': true} });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', 'some tooltip content', newDate(1789, 3, 30), newDate(1797, 2, 4) ],
[ 'President', 'John Adams', 'some tooltip content', newDate(1797, 2, 4), newDate(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', 'some tooltip content', newDate(1801, 2, 4), newDate(1809, 2, 4) ],
[ 'Vice President', 'John Adams', 'some tooltip content', newDate(1789, 3, 21), newDate(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', 'some tooltip content', newDate(1797, 2, 4), newDate(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', 'some tooltip content', newDate(1801, 2, 4), newDate(1805, 2, 4)],
[ 'Vice President', 'George Clinton', 'some tooltip content', newDate(1805, 2, 4), newDate(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', 'some tooltip content', newDate(1789, 8, 25), newDate(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', 'some tooltip content', newDate(1790, 2, 22), newDate(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', 'some tooltip content', newDate(1794, 0, 2), newDate(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', 'some tooltip content', newDate(1795, 7, 20), newDate(1800, 4, 12)],
[ 'Secretary of State', 'Charles Lee', 'some tooltip content', newDate(1800, 4, 13), newDate(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', 'some tooltip content', newDate(1800, 5, 13), newDate(1801, 2, 4)],
[ 'Secretary of State', 'Levi Lincoln', 'some tooltip content', newDate(1801, 2, 5), newDate(1801, 4, 1)],
[ 'Secretary of State', 'James Madison', 'some tooltip content', newDate(1801, 4, 2), newDate(1809, 2, 3)]
]);
google.visualization.events.addListener(dashChart, 'ready', function () {
var original_rect_color;
var new_rect_color;
google.visualization.events.addListener(dashChart.getChart(), 'onmouseover', function (e) {
var original_rect = $("div#dashboard div#chart g rect").filter(function(){return $(this).attr('style') == 'display: none;'})[0];
var temp_original_color = $(original_rect).attr('fill');
if(temp_original_color!=original_rect_color)
{
$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == new_rect_color}).each(function(){
$(this).attr('fill',original_rect_color);
});
}
original_rect_color = temp_original_color;
var original_rect_x = $(original_rect).attr('x');
var original_rect_y = $(original_rect).attr('y');
new_rect_color = $($("div#dashboard div#chart g rect").filter(function(){return $(this).attr('x') == original_rect_x && $(this).attr('y') == original_rect_y})[1]).attr('fill');
$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == original_rect_color}).each(function(){
$(this).attr('fill',new_rect_color);
});
});
google.visualization.events.addListener(dashChart.getChart(), 'onmouseout', function (e) {
$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == new_rect_color}).each(function(){
$(this).attr('fill',original_rect_color);
});
});
});
dashboard.bind(dashControl, dashChart);
dashboard.draw(dataTable);
},
packages:['controls', 'corechart', 'timeline']
});<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="dashboard"><divid="chart"style="height: 200px;"></div><divid="control"></div></div>
Post a Comment for "Google Charts Timeline Highlight Many Bars On Mouseover"