Making Columns in column graphs clickable

36 views
Skip to first unread message

Isaac Saenz

unread,
Jan 20, 2022, 11:02:37 AMJan 20
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

unread,
Jan 29, 2022, 2:21:19 AMJan 29
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.

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 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'); } } 
</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