Help with clicking on chart to load a URL

23 views
Skip to first unread message

Steve Stout

unread,
Jun 23, 2011, 1:45:11 PM6/23/11
to Google Visualization API
Hi all,

I am trying to figure out how to make any click on a chart load a URL.
Just one URL for the entire chart, not different for each data point
as I see others have done.

I have a page with multiple tiny line charts with no details
displayed. Got this part working great. But I do need to make each
chart a clickable link to anther page where I will display a large
version of it with all the details.

I just have not had any luck finding an example of this on the site,
nor these forums.

My chart is generated with :
---------------

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Orders');
data.addRows(2);
data.setValue(0, 0, '');
data.setValue(0, 1, 5);
data.setValue(1, 0, '');
data.setValue(1, 1, 10);
var chart1 = new
google.visualization.LineChart(document.getElementById('chart_div1'));
chart1.draw(data, {width: 100, height: 20, legend: 'none',
fontSize: 0, chartArea: {width: 100, height: 20}, gridlineColor:
'#EFEFEF', backgroundColor: '#EFEFEF'});
}

---------------
And I have tried various ways to make the entire chart a link to
another URL.

I think that I need to so something like:

-------------

google.visualization.events.addListener(_dataTable, 'select',
mouseClickHandler);

function mouseClickHandler()
{
location.href = ('https://www.website.com/page.php?variable=1');
}

------------

But no luck.

Anyone have a good example I can check out?

Thanks!

Steve

asgallant

unread,
Jun 23, 2011, 3:00:51 PM6/23/11
to google-visua...@googlegroups.com
There is no explicit way to do so in the API, but you might be able to use jQuery to help you.  Add this at the end of your drawChart() function:

$("#chart_div1").children("iframe").contents().find("#chartArea").click(function () {
});

This works on the visualization playground, but I think there might be some cross-domain problems with using .contents() to get the contents of an iframe from another domain.  It's worth a try, anyway.


Steve Stout

unread,
Jun 24, 2011, 1:56:45 PM6/24/11
to Google Visualization API
This seems to do the trick with some quick testing today. I'll try it
out fully next week.

Thanks so much!! :)

Steve

On Jun 23, 12:00 pm, asgallant <drew_gall...@abtassoc.com> wrote:
> There is no explicit way to do so in the API, but you *might* be able to use
Reply all
Reply to author
Forward
0 new messages