The problem is that you are loading the "barchart" package instead of the
"corechart" package. "barchart" is old and deprecated, so you shouldn't
use it. Change your google.load call to this:
google.load('visualization', '1', {packages: ['corechart']});
See it working here: http://jsfiddle.net/asgallant/9n7p9/. Also, since
your chart is so large, you might want to set the chartArea options to make
better use of the space: http://jsfiddle.net/asgallant/9n7p9/1/. You might
also want to consider using a filter of some kind (like a
StringFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#stringfilter>,
NumberFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#numberrangefilter>,
or
CategoryFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#categoryfilter>)
to make it easier for your users to find the data they are interested in,
rather than scanning a huge chart.
On Monday, March 3, 2014 5:32:12 PM UTC-5, Stuart D wrote:
>
> Hello there,
>
> I am pretty new to Google Charts, so I am a bit lost. I am trying to setup
> a bar chart that when a user hovers over a certain bar a custom tool tip
> comes up, which is based on a column in good spreadsheet.
>
> The Spreadsheet has a whole bunch of columns but as indicated in the query
> below column A is a Name, Column CO is a dollar amount, and column D is the
> tooltip data. But whenever I hover over the bars I just get the default
> tool tip.
>
> The url of the chart is here :
> http://stuartduncan.ca/highchartest/test.html
>
> And the code is here :
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
> <title>
> Google Visualization API Sample
> </title>
> <script type="text/javascript" src="//www.google.com/jsapi"></script>
> <script type="text/javascript">
> google.load('visualization', '1', {packages: ['barchart']});
> </script>
> <script type="text/javascript">
> var visualization;
>
> function drawVisualization() {
> // To see the data that this visualization uses, browse to
> // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
> var query = new google.visualization.Query(
> '
> https://docs.google.com/spreadsheet/pub?key=0AjzReSa2qEsadG1HV0k5ZHVncGx0NDFrTkx4cENlRHc'
> );
>
> // Apply query language.
> query.setQuery('SELECT A,CO,D ORDER BY CO DESC');
>
> // Send the query with a callback function.
> query.send(handleQueryResponse);
> }
>
> function handleQueryResponse(response) {
> if (response.isError()) {
> alert('Error in query: ' + response.getMessage() + ' ' +
> response.getDetailedMessage());
> return;
> }
>
>
> var data = response.getDataTable();
>
> data.setColumnProperty(2, 'role', 'tooltip');
>
> visualization = new
> google.visualization.BarChart(document.getElementById('visualization'));
> visualization.draw(data, {legend: 'bottom'});
> }
>
>
> google.setOnLoadCallback(drawVisualization);
> </script>
> </head>
> <body style="font-family: Arial;border: 0 none;">
> <div id="visualization" style="height: 3000px; width: 1200px;"></div>
> </body>
> </html>
>
>
> I can't seem to figure out what I am doing wrong.
>
> Thanks for any help.
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
