Making Columns in column graphs clickable
104 views
Skip to first unread message
Isaac Saenz
Jan 20, 2022, 11:02:37 AM1/20/22
to Google Visualization API
Hey, i would like to know if there's a way to make the columns in the column graphs have independent links. thanks
Ray Thomas
Jan 29, 2022, 2:21:19 AM1/29/22
to Google Visualization API
Yes there is. It's not very well documented, if at all - I couldn't find it. But looking through the documentation for getSelection() at https://developers.google.com/chart/interactive/docs/reference#visgetselection I thought I saw a way this could be done. The URLs can come from the data or from the code, I used a switch statement. Both methods work for several types of chart, but not all for all of them.
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawURLViz);
function drawURLViz() {
var queryString = encodeURIComponent('SELECT A,B,C ORDER BY A LIMIT 5');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=0&headers=1&tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var URLData = response.getDataTable();
var URLView = new google.visualization.DataView(URLData);
URLView.setColumns([0, 1]);
var URLChart = new google.visualization.BarChart(document.getElementById('URL-chart'));
URLChart.draw(URLView);
// Add the event handler and processing
google.visualization.events.addListener(URLChart, 'select', URLHandler);
function URLHandler(e) {
var selection = URLChart.getSelection();
var URLPizza=URLData.getFormattedValue(selection[0].row,2);
window.open(URLPizza,'_blank');
}
}
I use Google Sheets as a data source. These examples use the one at https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/edit#gid=0
Method 1 - Switch Statement
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSwitchViz);
function drawSwitchViz() {
var queryString = encodeURIComponent('SELECT A,B ORDER BY A LIMIT 5');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1tswaWUAbeBijHq4o505w0h7TmbD-qGhR3jBactcbGq0/gviz/tq?gid=0&headers=1&tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var switchData = response.getDataTable();
var switchChart = new google.visualization.ColumnChart(document.getElementById('switch-chart'));
switchChart.draw(switchData);
// Add the event handler and processing
google.visualization.events.addListener(switchChart, 'select', switchHandler);
function switchHandler(e) {
var selection = switchChart.getSelection();
var switchPizza=switchData.getFormattedValue(selection[0].row,0);
switch (switchPizza) {
case 'Boscaiola':
window.open('https://it.wikipedia.org/wiki/Boscaiola','_blank');
case 'Bufalina':
window.open('https://en.wikipedia.org/wiki/Buffalo_mozzarella','_blank');
case 'Caprese':
window.open('https://en.wikipedia.org/wiki/Caprese_salad','_blank');
case 'Capricciosa':
window.open('https://en.wikipedia.org/wiki/Pizza_capricciosa','_blank');
case 'Carbonara':
window.open('https://en.wikipedia.org/wiki/Carbonara','_blank');
}
}
}
</script>
Method 2 - URLs in data
</script>
I made a page to show both methods working. That can be found at http://brisray.com/google-charts/clickable.htm
Reply all
Reply to author
Forward
0 new messages