Link on interactive google Chart

eric akle

unread,

Jul 28, 2011, 5:52:41 PM7/28/11

to Google Visualization API

How can i put a hyper link on my Line chart ?
I want to put a hyper link on each point
is that possible
if yes how can i do it?
Thanks for your help

Roni Biran

unread,

Jul 28, 2011, 6:02:55 PM7/28/11

to google-visua...@googlegroups.com

It is possible. All you have to do is add a listener to the 'select' event

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

eric akle

unread,

Jul 28, 2011, 6:07:30 PM7/28/11

to Google Visualization API

hi Biran
Please can you give me an example
that will be helpful
Thank you

On Jul 28, 3:02 pm, Roni Biran <roni.bi...@gmail.com> wrote:
> It is possible. All you have to do is add a listener to the 'select' event
>

asgallant

unread,

Jul 29, 2011, 8:22:35 AM7/29/11

to google-visua...@googlegroups.com

Do you want a link opened when someone clicks a data point, or do you want a link added to the popup?

If you want a link opened on click, after you call draw() on your chart object, add an event listener for the "select" event and use js to direct your navigation from there:

// assuming you have a chart object called "chart"

google.events.addListener(chart, 'select', function () {

// whatever you want, ex:

window.location.href = "http://target.web.site/";

});

If you want the popups to have links in them, you need to set the formatted values of your data. Either call the dataTable method #setFormattedValue for each point, or set your values and formatted values in object notation when you build your dataTable:

// assuming you have a dataTable object called "data"

data.setValue(0,1,{v: 6, f: '<a href="http://target.web.site">This is a link for value 6</a>'});

asgallant

unread,

Dec 28, 2012, 11:14:15 AM12/28/12

to google-visua...@googlegroups.com

That code snippet is missing the "visualization" keyword in google.visualization.events...

google.visualization.events.addListener(chart, 'select', function() {

// whatever you want, ex:

window.location.replace("http://www.google.com")
});

is what you need. I accidentally left that out of code, my mistake.

On Friday, December 28, 2012 1:37:03 AM UTC-5, Chia Wei Han wrote:

Hi, I have added what you recommended but its not working..

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Visit'],
['January', 0],
['February', 1],
['March', 3],
['April', 1],
['May', 2],
['June', 0],
['July', 5],
['August', 3],
['September', 1],
['October', 2],
['November', 0],
['December', 2]
]);

var options = {
title: 'Number of visits'
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

chart.draw(data, options);

google.events.addListener(chart, 'select', function () {
// whatever you want, ex:

window.location.replace("www.google.com")
});
}

</script>
</head>
<body>
<div id="chart_div" style="width: 1200px; height: 500px;"></div>
</body>
</html>

Reply all

Reply to author

Forward