Mark February 2016

Google charts formatter not modifying tooltip

i am trying to create a line chart using google charts libraries.

The data contains, date (x axis), number (col 1), number (col 2), float (col 3).

I want to display two decimals on the 3rd column tooltip while keeping its y axis 0 to 100, this is my current code (running here https://jsfiddle.net/uqh56hsu/1/):

google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Hours');
  data.addColumn('number', 'col1');
  data.addColumn('number', 'col2');
  data.addColumn('number', 'percent');

  data.addRows([
[new Date(1454950800*1000),0,0,0],[new Date(1454947200*1000),0,0,0],[new Date(1454943600*1000),2,0,0.00],[new Date(1454940000*1000),24,1,4.17],[new Date(1454936400*1000),12,1,8.33],[new Date(1454932800*1000),64,4,6.25],[new Date(1454929200*1000),176,11,6.25],[new Date(1454925600*1000),142,7,4.93],[new Date(1454922000*1000),114,7,6.14],[new Date(1454918400*1000),0,0,0],[new Date(1454914800*1000),0,0,0],[new Date(1454911200*1000),0,0,0],[new Date(1454907600*1000),0,0,0],[new Date(1454904000*1000),0,0,0],[new Date(1454900400*1000),0,0,0],[new Date(1454896800*1000),0,0,0],[new Date(1454893200*1000),0,0,0],[new Date(1454889600*1000),0,0,0],[new Date(1454886000*1000),0,0,0],[new Date(1454882400*1000),0,0,0],[new Date(1454878800*1000),0,0,0],[new Date(1454875200*1000),0,0,0],[new Date(1454871600*1000),180,10,5.56],      ]);

  var formatter = new google.visualization.NumberFormat({
                fractionDigits: 2,
                suffix: '%'
  });
  formatter.format(data, 3);

  var options = {
    width: 900,
    height: 500,
            backgroundColor: '#f1f1f1',
            colors: ['#ff851b', '#03a9f4', '#8dc859'],
            dateFormat: 'H',
            vAxes:[
                { titleTextStyle: {color: '#FF0000'}},
                   

Answers


WhiteHat February 2016

The format is being set in the vAxes option, which was overriding the formatter...

Just set the format to --> format: '#,##0.00\'%\''

No need for a formatter here...

google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Hours');
  data.addColumn('number', 'col1');
  data.addColumn('number', 'col2');
  data.addColumn('number', 'percent');

  data.addRows([
    [new Date(1454950800*1000),0,0,0],
    [new Date(1454947200*1000),0,0,0],
    [new Date(1454943600*1000),2,0,0.00],
    [new Date(1454940000*1000),24,1,4.17],
    [new Date(1454936400*1000),12,1,8.33],
    [new Date(1454932800*1000),64,4,6.25],
    [new Date(1454929200*1000),176,11,6.25],
    [new Date(1454925600*1000),142,7,4.93],
    [new Date(1454922000*1000),114,7,6.14],
    [new Date(1454918400*1000),0,0,0],
    [new Date(1454914800*1000),0,0,0],
    [new Date(1454911200*1000),0,0,0],
    [new Date(1454907600*1000),0,0,0],
    [new Date(1454904000*1000),0,0,0],
    [new Date(1454900400*1000),0,0,0],
    [new Date(1454896800*1000),0,0,0],
    [new Date(1454893200*1000),0,0,0],
    [new Date(1454889600*1000),0,0,0],
    [new Date(1454886000*1000),0,0,0],
    [new Date(1454882400*1000),0,0,0],
    [new Date(1454878800*1000),0,0,0],
    [new Date(1454875200*1000),0,0,0],
    [new Date(1454871600*1000),180,10,5.56]
  ]);

  var options = {
    width: 900,
    height: 500,
    backgroundColor: '#f1f1f1',
    colors: ['#ff851b', '#03a9f4', '#8dc859'],
    dateFormat: 'H',
    vAxes:[
      {
        titleTextStyle: {color: '#FF0000'}
      },
      {
        titleTextStyle: {
   

Post Status

Asked in February 2016
Viewed 2,102 times
Voted 9
Answered 1 times

Search




Leave an answer