CODEWITHSUNDEEP
javascriptgoogle-visualization
Erica Van Uitregt
Erica Van Uitregt

Reputation: 13

Google calendar chart number format in tooltip

I have a google charts calendar that I want to format the numbers in the tooltip to be in the following pattern: #,###.

I have tried the following:

function drawCalendar(){
    var data = new google.visualization.DataTable();
    data.addColumn("date","Date");
    data.addColumn("number","Users");
    data.addRows(calendarArray);
    var formatter = new google.visualization.NumberFormat({pattern:"#,###"});
    formatter.format(data,1);
}

I use the Google Visualization API Reference Number format specification (as used in the above code) for pie, bar and geo charts and it works fine. I can't figure out why this isn't working.

The chart is rendering, but without the formatted number, for example: January 19, 2016: 19394 - Google chart calendar tooltip with the formatted number.

Am I using the wrong function? Is there something special for the Calendar chart to do number format?

Upvotes: 1

Views: 790

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

You're not doing anything wrong, it just doesn't work for the Calendar chart.
The default tooltip appears to ignore formatted values.

Regardless, a custom tooltip can be provided.
Here, I use a view to add tooltips for each row.
Which simply returns the default formats for each column.

I also add tooltip: { isHtml: false } to the options. (default is true)
Otherwise, the tooltip has no padding, smaller font, etc...

A formatter could be used to change the patterns, if the default doesn't suffice...

google.charts.load('44', {
  callback: drawChart,
  packages: ['calendar']
});

function drawChart() {
  var calendarArray = [
    [ new Date(2012, 3, 13), 37032],
    [ new Date(2012, 3, 14), 38024],
    [ new Date(2012, 3, 15), 38024],
    [ new Date(2012, 3, 16), 38108],
    [ new Date(2012, 3, 17), 38229],
    [ new Date(2013, 9,  4), 38177],
    [ new Date(2013, 9,  5), 38705],
    [ new Date(2013, 9, 12), 38210],
    [ new Date(2013, 9, 13), 38029],
    [ new Date(2013, 9, 19), 38823],
    [ new Date(2013, 9, 23), 38345],
    [ new Date(2013, 9, 24), 38436],
    [ new Date(2013, 9, 30), 38447]
  ];

  var data = new google.visualization.DataTable();
  data.addColumn("date", "Date");
  data.addColumn("number", "Users");
  data.addRows(calendarArray);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (viewData, row) {
      return viewData.getFormattedValue(row, 0) + ': ' +
             viewData.getFormattedValue(row, 1);
    },
    type: 'string',
    role: 'tooltip'
  }]);

  var options = {
    height: 350,
    tooltip: {
      isHtml: false
    },
    width: 1000
  };

  var chart = new google.visualization.Calendar(
    document.getElementById('calendar_basic')
  );
  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>

Upvotes: 1

Related Questions