CODEWITHSUNDEEP
google-visualization
Uaf Fairbanks
Uaf Fairbanks

Reputation: 63

Google chart tooltips

I am using google spreadsheet to feed to my Column chart. To get the single columns to be a different color I used sort of a hack by setting values to 0 on opposite columns in the spreadsheet for each column in the chart. This gave me the the difference in color I needed for each column in the chart. The issue I am now having is the tooltips do not work for each column and was wondering how I can implement to work correctly in my code.

google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var visualization;

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=0AjlSK7_zXoNHdDhrU2xiaHVIQmR1WldYZm1yMTNkM3c&pub=1');

    // Apply query language statement.


    // 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();
     // set the 3rd column to the "tooltip" role
    data.setColumnProperty(3, 'role', 'tooltip');
    visualization = new google.visualization.ColumnChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'none', colors:['blue','red'],is3D:'True', isStacked:'true'});
  }

google.setOnLoadCallback(drawVisualization);

Upvotes: 3

Views: 2087

Answers (1)

jmac
jmac

Reputation: 7128

Option A:

Adjust your underlying data so that you have 4 columns instead of 3, with the same values in column 2 (after the first set of data) as you have in your current column 3 (with the tooltip). Use the setColumnProperty() on the new columns 2 and 4 as tooltip.

Option B:

Copy your tooltip column 3 in Javascript to Column 2 (after the first data set) using insertColumn(), this should have the same effect as Option A. You will have to loop through to copy over the values, or otherwise add the same data via javascript.

Upvotes: 1

Related Questions