CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
user3267847
user3267847

Reputation: 143

Google Charts Trailing Zero

I have a google chart that I am using https://developers.google.com/chart/

but can't seem to get the tooltip to display trailing zeros!

I tried formatting the data as in #.# but if there is an even number it doesn't display the decimal!

Ie my data is:77.6,77.1,77.0,66.9 in the tooltip though the 77.0 shows as 77

I would want to show 77.0 in the tooltip.

I confirmed that the data is coming in as 77.0, so google must be parsing it out.

I don't want to use a custom annotation either, because I like the way the stock tooltip looks.

Any ideas?

Upvotes: 1

Views: 632

Answers (1)

WhiteHat
WhiteHat

Reputation: 61255

to display trailing zeroes, the format must include 0 instead # (which hides zeroes) 

'#,##0.00'

the tooltip will display the formatted value by default,
format the column to change the tooltip 

var formatNumber = new google.visualization.NumberFormat({
  pattern: '#,##0.00'
});
formatNumber.format(data, 1);

see following working snippet... 

google.charts.load('current', {
  callback: drawTable,
  packages:['corechart']
});

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0, 77.0],
    [1, 77.1],
    [2, 77.2],
    [3, 77.3],
    [4, 77.4],
    [5, 77.5]
  ]);

  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0.00'
  });
  formatNumber.format(data, 1);

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    pointSize: 8
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

UPDATE

a number is just a number, it has no format
passing 77 vs. 77.0 makes no difference to the google data table

as mentioned above, the tooltip will display the formatted value of the cell value

each cell in the data table has a value property (v:) and formatted value property (f:)

when loading the data, you can pass just the value... 

data.addRows([
  [0, 77.0],
  ...
]);

or you can use object notation, to pass both value and formatted value,
here a number formatter would not be needed

data.addRows([
  [0, {v: 77.0, f: '77.0'}],
  ...
]);

however, when passing just the value,
the data table uses a default format to show on the tooltip
this default format does not match what you want
which is why you must use a number formatter,
which sets the formatted value for all rows in the column

note: the following options only affect the axis labels, not the tooltip... 

vAxis.format
hAxis.format

Upvotes: 1

Related Questions