Google Visualizations JS Library - Events questions: clickable row Labels area? How to un-focus clicked bar
Two questions.
I would like to add a click event specifically to the left-end row label for a TimeLine chart. Is that possible? (I didn't see it in the Timeline list of Events.)
I do have a click-event coded up for the color-bar area. I was a bit confused by the results of the click event - it was showing only the Row element populated. I thought the color-bar would be the 'cell' of the dataTable, and have both the Row and Column populated. And thus was hoping that the row-label object would have a click event that returned just the Row index. I would like to have different events triggered for each of the two items.
2nd, once the user has clicked on a color-bar, that element stays in focus. If they click it again, nothing happens. How do I de-focus it, or rather just make it so that subsequent clicks also call the click event?
(I have tried adding chart.setSelection(null,null) in my Click handler, but that just got me in an infinite loop, where it was running my click handler again, upon the SetSelection().)
Here's a JS Fiddle showing the chart, and it's click events. (Row-label clicking not figured out yet, of course.) https://jsfiddle.net/t9yfe2jm/
<head>
<style>
body {
height: 95%;
}
.chart-height {
height: 100%;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
google.visualization.events.addListener(chart, 'select', myClickHandler);
dataTable.addColumn({ type: 'string', id: 'TaskGroup' });
dataTable.addColumn({ type: 'string', id: 'bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows( [
["Admin", "Test ABC ABC", " • Test ABC ABC", new Date (2021, 10, 6), new Date (2021, 10, 15)]
, ["CAD", "#1 TEST", " • #1 - TEST", new Date (2021, 10, 7), new Date (2021, 10, 8)]
, ["Field", "Field work - TEST TEST", " • Field work - TEST", new Date (2021, 10, 6), new Date (2021, 10, 10)]
, ["CAD", "2 TEST TEST", " • 2 - TEST TEST", new Date (2021, 10, 11), new Date (2021, 10, 14)]
, ["Admin", "Test ITEM 1", " • Test ITEM 1", new Date (2021, 10, 6), new Date (2021, 10, 10)]
, ["Field", "Test part 2", " • Field Test part 2", new Date (2021, 10, 13), new Date (2021, 10, 15)]
, ["Field", "Test Part 3", " • Field Test Part 3", new Date (2021, 10, 14), new Date (2021, 10, 17)]
]);
chart.draw(dataTable);
function myClickHandler(){
var selection = chart.getSelection();
var message = '';
var selectedValue = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
message += '{row:' + item.row + ',column:' + item.column + '}';
} else if (item.row != null) {
message += '{row:' + item.row + '}';
selectedValue = item.row;
} else if (item.column != null) {
message += '{column:' + item.column + '}';
selectedValue = item.column;
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected ' + selectedValue + '\nValue = ' + dataTable.getValue(selectedValue,0) + '|' + dataTable.getValue(selectedValue,1) );
}
}
</script>
</head>
<body>
<div class="chart-height" id="chart_div"></div>
</body>
</html>
from Recent Questions - Stack Overflow https://ift.tt/3F49Skb
https://ift.tt/3HgpJyb
Comments
Post a Comment