How to add rowCount in tooltip of google charts - angularjs

Question

I am using google chart to display my data on screen. Data is aggregated using using one of the column as shown below...
var dataGroup = google.visualization.data.group(
data, // data table
[0], // group by column
[
{ // aggregation column
column: 1,
type: 'number',
aggregation: google.visualization.data.avg
}
]
);
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataGroup, $scope.getOptionsForChart());
Now what I want to do is add row count in tooltip.
THanks in advance.

Answer 1

there are no standard options for adding information to the tooltip,
you must replace the entire tooltip with your own custom one...
two things must be in place to use custom html tooltips...
1) must use the following chart option...
tooltip: {
isHtml: true
}
2) the tooltip column must have the following property...
p: {html: true}
see following working snippet...
an aggregation column is added for the count
then a DataView is used to convert the count column to a tooltip column
however, when using a DataView, for some reason the html column property is ignored
so when the chart is drawn, convert the DataView back to a DataTable,
chart.draw(view.toDataTable(), ...
this will allow the chart to recognize the column property...
google.charts.load('current', {
callback: function () {
var datastring = '{"PerformanceData" : [{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"}]}';
var jsonData = JSON.parse(datastring);
var chartData = [];
// load chart data
jsonData.PerformanceData.forEach(function (row, rowIndex) {
// column headings
var columns = Object.keys(row);
if (rowIndex === 0) {
chartData.push(columns);
}
// row values
var chartRow = [];
columns.forEach(function (column, colIndex) {
var chartCell = row[column];
if (colIndex > 0) {
chartCell = parseFloat(chartCell);
}
chartRow.push(chartCell);
});
chartData.push(chartRow);
});
var data = google.visualization.arrayToDataTable(chartData);
// group data
var dataGroup = google.visualization.data.group(
data, // data table
[0], // group by column
[
{ // average
column: 1,
type: 'number',
aggregation: google.visualization.data.avg,
label: data.getColumnLabel(1)
},
{ // count
column: 1,
type: 'number',
aggregation: google.visualization.data.count
}
]
);
var view = new google.visualization.DataView(dataGroup);
view.setColumns([0, 1, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
return '<div class="tooltip">' +
'<div><span>' + dt.getValue(row, 0) + '</span></div>' +
'<div><span>' + dt.getColumnLabel(1) + ' (avg): </span>' + dt.getValue(row, 1) + '</div>' +
'<div><span>Row Count: </span>' + dt.getValue(row, 2) + '</div>' +
'</div>';
},
p: {html: true}
}]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
// use group data to draw chart
chart.draw(view.toDataTable(), {
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
.tooltip {
font-size: 12pt;
padding: 8px;
}
.tooltip div {
padding: 4px;
}
.tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>