A dica do Google Chart Tool não funciona
Atualmente, estou trabalhando no Google Chart usando o ASP.NET e conectando-o ao banco de dados (SQL Server). Mas tenho um problema ao tentar personalizar a dica de ferramenta.
Aqui está o código do cabeçalho:
<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>
Infelizmente, a dica da ferramenta não funciona. Somente o Nome do cliente e a Porcentagem são exibidos na dica da ferramenta.