Google visualization API - Bar Chart / Line Chart - Custom Tooltip

Question

How to format the tooltip text of Google Visualization Api based Line and Bar Charts.

I want custom text and images in the tooltip. Thanks

Answer 1

Just drop this code into Google's Visualization playground as an example I'm using bar chart and editing the text of the tooltip:

function drawVisualization() {
    data = new google.visualization.DataTable()
    data.addColumn('string', 'Date');
    data.addColumn('number');
    data.addColumn({type:'string',role:'tooltip'});
    data.addRow();
    base = 10;
    data.setValue(0, 0, 'Datapoint1');
    data.setValue(0, 1, base++);
    data.setValue(0, 2, " This is my tooltip1 ");

    data.addRow();
    data.setValue(1, 0, 'Datapoint2');
    data.setValue(1, 1, base++);
    data.setValue(1, 2, "This is my second tooltip2");

    // Draw the chart.
    var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {legend:'none', width:600, height:400});
}

Answer 2

Paste this at: https://code.google.com/apis/ajax/playground/?type=visualization#simple_dashboard

  function drawVisualization() {
    // Prepare the data
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Donuts eaten');
    data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});

    data.addRows([
      ['Sven', 16, createCustomHTMLContent('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnV6emFCNN90Nt-HQcd_x5umqdoSpagUp5fwOqc5QYnVpEHHF8', 16)],
      ['Kurt', 46, createCustomHTMLContent('http://173.199.167.192/customavatars/avatar296423_1.gif', 46)],
      ['Sofie', 27, createCustomHTMLContent('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbv9ijKCwG3eJS9uUTxPzJ5F8zqYRAA5uRkyfz5lniC7TN8t96', 27)],
      ['Lisa', 29, createCustomHTMLContent('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQLZSgX1oDVc5psdBdqzG8oU-1vqTEIMXw-FDvoSLOg0oJ-0VLv', 29)],
      ['Lajla', 19, createCustomHTMLContent('http://static3.depositphotos.com/1001992/155/i/950/depositphotos_1550168-Portrait-of-a-beauty-young-female-face.jpg', 19)],
      ['Elsa', 38, createCustomHTMLContent('http://os1.i.ua/3/2/10725917_2535e604.jpg', 38)],    
    ]);

     function createCustomHTMLContent(flagURL, totalEaten) {
       return '<div style="padding:5px 5px 5px 5px;">' +
        '<img src="' + flagURL + '" style="width:75px;height:50px"/><br/>' +
        '<table>' +
        '<tr>' +
        '<td><img src="http://2.bp.blogspot.com/-hPs6JLOBj4I/UTBQWNhHFaI/AAAAAAAABOQ/LROTO_TAYRQ/s72-c/donat-makanan-lemak-trans.jpg" style="width:25px;height:25px"/><td/>' +
        '<td><b>' + totalEaten + '<b/><td/>' +
        '<tr/>' +     
        '<table/>' +
        '<div/>';
     }

    // Define a slider control for the 'Donuts eaten' column
    var slider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'control1',
      'options': {
        'filterColumnLabel': 'Donuts eaten',
        'ui': {'labelStacking': 'vertical'}
      }
    });

    // Define a pie chart
    var piechart = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart1',
      'options': {
        'width': 600,
        'height': 300,
        'legend': 'bottom',
        'tooltip': {
          'isHtml': true
        },     
        'pieSliceText': 'value'
      }
    });

    // Create the dashboard.
    new google.visualization.Dashboard(document.getElementById('dashboard')).
      // Configure the slider to affect the piechart
      bind(slider, piechart).
      // Draw the dashboard
      draw(data);
  }

Answer 3

Here you have some examples with tooltips

Link

So there is example with column chart:

    function drawChart() {
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn('string', 'Country');
      // Use custom HTML content for the domain tooltip.
      dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
      dataTable.addColumn('number', 'Gold');
      dataTable.addColumn('number', 'Silver');
      dataTable.addColumn('number', 'Bronze');

      dataTable.addRows([
        ['USA', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg', 46, 29, 29), 46, 29, 29],
        ['China', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
        ['UK', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
      ]);

      var options = {
        title: 'London Olympics Medals',
        colors: ['#FFD700', '#C0C0C0', '#8C7853'],
        // This line makes the entire category's tooltip active.
        focusTarget: 'category',
        // Use an HTML tooltip.
        tooltip: { isHtml: true }
      };

      // Create and draw the visualization.
      new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
    }

    function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
      return '<div style="padding:5px 5px 5px 5px;">' +
          '<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
          '<table id="medals_layout">' + '<tr>' +
          '<td><img         src="http://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
  '<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
  '<td><img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
  '<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
  '<td><img src="http://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
  '<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
    }e

Answer 4

There seems to be some details on how to do this here

http://code.google.com/apis/chart/interactive/docs/examples.html

Scroll down to the bottom, its the last example.