CODEWITHSUNDEEP
tooltipgoogle-visualization
Andre Moura
Andre Moura

Reputation: 15

Google Chart Tooltip with Percentage

My chart is very simple and is something like this:

function drawVisualization() {

  var data = google.visualization.arrayToDataTable([
    ['week', 'rate'],
    ['1',   0.156],
    ['2',   0.232],
    ['3',   0.446],
    ['4',   0.832],
    ['5',   0.702],
    ['6',   0.773],
    ['7',   0.842],
    ['8',   0.413],
    ['9',   0.278],
    ['10',   0.323],
    ['11',   0.312],
    ['12',   0.309],
    ['13',   0.134],
    ['14',   0.137]
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 1}}
          );
}

​

But I have NO IDEA how to format the data column to show as a pecentage in the tooltip. Can you guys give a hand?

Upvotes: 0

Views: 3808

Answers (2)

Jean-Francois Picard
Jean-Francois Picard

Reputation: 1

Add a column like this

{role: 'tooltip'}

I had the same problem and fixed it.

See for yourself!

Upvotes: 0

asgallant
asgallant

Reputation: 26340

Use a NumberFormatter:

var formatter = new google.visualization.NumberFormat({pattern: '#%'});
formatter.format(data, 1); // format column 1

You may also want to format the y-axis:

vAxis: {
    maxValue: 1,
    format: '#%'
}

Upvotes: 5

Related Questions