I am currently working on Google Chart using ASP.NET and connecting it to the database (SQL Server). But I have a problem when trying to customize the tool tip.
Here's Header Code:
<script src="js/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('1.1', { 'packages': ['bar'] });
</script>
<script type="text/javascript">
$(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'sample_page.aspx/GetChartData',
data: '{}',
success: function (response) {
drawchart(response.d); // calling method
},
error: function () {
alert("Error Loading Data");
}
});
})
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
// Instantiate and draw our chart, passing in some options
var chart = new google.charts.Bar(document.getElementById('BarChartsDIV'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'customer');
data.addColumn('number', 'percent_submitted')
data.addColumn({type: 'string', role: 'tooltip'});
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].customer,
{ v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted+ '%'},'TEST TOOL TIP']);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
chart.draw(view,
{
tooltip: { isHtml: true},
title: "",
legend: { position: 'none' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: '' }, // Top x-axis.
},
y: {
0: { label: '' } //Side y-axis
}
},
bar: { groupWidth: '70%' },
});
}
</script>
Unfortunately, the tool tip doesn't work. Only the Customer Name and the Percentage display on the tool tip.
Sample Generated Chart
unfortunately, Column Roles, including tooltips, don't work with Material charts, only Core
Material --> packages: ['bar'] + google.charts.Bar
Core --> packages: ['corechart'] + google.visualization.BarChart
you can use the following configuration option to get Core close to the look & feel of Material
theme: 'material'
note 1: when using a tooltip column, all of the tooltip content must be provided, it doesn't append anything to the default tooltip
see following working snippet...
google.charts.load('current', {
callback: function () {
// simulate data
dataValues = [
{
customer: 'Customer A',
percent_submitted: 10
},
{
customer: 'Customer B',
percent_submitted: 20
},
{
customer: 'Customer C',
percent_submitted: 30
},
];
drawchart(dataValues);
},
packages: ['corechart']
});
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
// Instantiate and draw our chart, passing in some options
var chart = new google.visualization.BarChart(document.getElementById('BarChartsDIV'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'customer');
data.addColumn('number', 'percent_submitted')
data.addColumn({type: 'string', role: 'tooltip'});
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].customer,
{ v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '%'},
dataValues[i].customer + '\nTEST TOOL TIP\n' + dataValues[i].percent_submitted + '%']);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
chart.draw(view,
{
theme: 'material',
tooltip: { isHtml: true},
title: "",
legend: { position: 'none' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: '' }, // Top x-axis.
},
y: {
0: { label: '' } //Side y-axis
}
},
bar: { groupWidth: '70%' },
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div>
note 2: for HTML tooltips to work, you must include a column property
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
see following working snippet...
google.charts.load('current', {
callback: function () {
// simulate data
dataValues = [
{
customer: 'Customer A',
percent_submitted: 10
},
{
customer: 'Customer B',
percent_submitted: 20
},
{
customer: 'Customer C',
percent_submitted: 30
},
];
drawchart(dataValues);
},
packages: ['corechart']
});
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
// Instantiate and draw our chart, passing in some options
var chart = new google.visualization.BarChart(document.getElementById('BarChartsDIV'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'customer');
data.addColumn('number', 'percent_submitted')
// include column property for html tooltips
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].customer,
{ v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '%'},
// need to include own styling as well
'<div class="ggl-tooltip">' + dataValues[i].customer + '<div>TEST TOOL TIP</div><div>' + dataValues[i].percent_submitted + '%</div></div>']);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
chart.draw(view,
{
theme: 'material',
tooltip: { isHtml: true},
title: "",
legend: { position: 'none' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: '' }, // Top x-axis.
},
y: {
0: { label: '' } //Side y-axis
}
},
bar: { groupWidth: '70%' },
});
}
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 12pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
padding-top: 6px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div>
note 3: as for Material charts, they show the formatted value (f:) by default, so you could add a bit of text there, or at the end of the column headings, which would be for all rows
see following working snippet...
google.charts.load('current', {
callback: function () {
// simulate data
dataValues = [
{
customer: 'Customer A',
percent_submitted: 10
},
{
customer: 'Customer B',
percent_submitted: 20
},
{
customer: 'Customer C',
percent_submitted: 30
},
];
drawchart(dataValues);
},
packages: ['bar']
});
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
// Instantiate and draw our chart, passing in some options
var chart = new google.charts.Bar(document.getElementById('BarChartsDIV'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'customer');
data.addColumn('number', 'percent_submitted \n OTHER TOOLTIP TEXT FOR ALL ROWS')
for (var i = 0; i < dataValues.length; i++) {
data.addRow([dataValues[i].customer,
{ v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted + '% TEST TOOL TIP'}]);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
chart.draw(view,
{
tooltip: { isHtml: true},
title: "",
legend: { position: 'none' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: '' }, // Top x-axis.
},
y: {
0: { label: '' } //Side y-axis
}
},
bar: { groupWidth: '70%' },
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div>
note 4: although not recommended, it is possible to modify the tooltip manually via SVG DOM, when the chart's 'ready' event fires...
I need to give credit to Catherine Manzo on the Google Charts Form for figuring this out. Remove focusTarget from the chart Options and bingo!!
Catherine Manzo said: I finally went back and compared the html code
for my new charts with ones made over the summer, when the tooltip
worked. I realized there was an extra attribute in the newer code
(focusTarget) and when I deleted it, the tooltip function began
working again! The attribute to delete is highlighted in the code
below:
chart.opts = {title:"Company Performance",titlePosition:"out",focusTarget:"default",colors:['#66CDAA','#E0FFFF'],pointShape:"circle",hAxis: {format:"$ #,###.##",textPosition:"default",title:"In Thousands",slantedText:true,viewWindowMode:"default"},tooltip:{isHtml:false}};
Adding to note.
note 5:
You can only modify tooltip if you use google.visualization like so:
new google.visualization.LineChart(divChart).draw(dataTable,options);
Not google.charts:
new google.charts.Line(divChart).draw(dataTable,options);
But, make sure to include theme: 'material' in the options of google.visualization to modernize the theme.
