Toolip Qtip with google chart table

Question

Toolip Qtip with google chart table

64 Views Asked by Jean-Philippe SANTOS DE JESUS At 23 July 2018 at 17:09

I would like to display in the tooltip the contents of column 2 which is not displayed.

This is my sample:

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type='text/javascript' src='assets/js/qtip.js'></script>
<link type="text/css" rel="stylesheet" href="assets/css/qtip.css" />

<script type='text/javascript'>
 google.load('visualization', '1', {packages:['table']});
 google.setOnLoadCallback(drawTable);

// start chart
function drawTable() {
 var data = new google.visualization.DataTable();

// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');

// add data
data.addRows([
 ['Mike',{v: 10000, f: '$10,000'}, {v: 10, f: '$10'},true],
 ['Jim', {v:8000, f: '$8,000'},{v:8, f: '$8'}, false],
 ['Alice', {v: 12500, f: '$12,500'}, {v: 12, f: '$12'},true],
 ['Bob', {v: 7000,f: '$7,000'},{v: 7,f: '$7'}, true],
 ['Sourav',{v: 7000,f: '$9,000'},{v: 7,f: '$9'}, true],
 ['Sunil', {v: 7000,f: '$16,000'}, {v: 7,f: '$16'},true],
 ['Vinod', {v: 7000,f: '$19,000'}, {v: 7,f: '$19'},true]

 ]);

var table = new google.visualization.Table(document.getElementById('table_div'));

// loo in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
 for (var j = 0; j < data.getNumberOfColumns(); j++) {
  var formattedValue = data.getFormattedValue(i, j);

  if(j==1){
   var y=j+1;
   var form2=data.getFormattedValue(i, y);

   console.log(i,j,formattedValue,form2);

   data.setFormattedValue(i, j, '<span title=' + '"' + formattedValue + '"' + '>' + formattedValue + '</span>');
  }
 }
}

google.visualization.events.addListener(table, 'ready', function () {

 $('span').qtip();

});
var view = new google.visualization.DataView(data);
view.setColumns([0,1,3]); 

table.draw(view, {allowHtml: true});
}
</script>
</head>

<body>
<div id='table_div'></div>

</body>
</html>

I can not display the content of form2 in the tooltip. I think the problem comes from the setFormatedValue method but I can not find a solution. I'm trying to set up this code as an alternative that the google chart table have no tooltip

Can someone help me?

Thanks

Original Q&A

There are 1 best solutions below

**WhiteHat** · Accepted Answer · 2018-07-23T17:19:10.387000

replace the loop with the following...

// loop in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
  var formattedValue = data.getFormattedValue(i, 1);
  var tooltipValue = data.getFormattedValue(i, 2);
  data.setFormattedValue(i, 1, '<span title="' + tooltipValue + '">' + formattedValue + '</span>');
}

see following working snippet...

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="assets/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
<script type='text/javascript' src='assets/js/qtip.js'></script>
<link type="text/css" rel="stylesheet" href="assets/css/qtip.css" />

<script type='text/javascript'>
 google.load('visualization', '1', {packages:['table']});
 google.setOnLoadCallback(drawTable);

// start chart
function drawTable() {
 var data = new google.visualization.DataTable();

// add columns
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');

// add data
data.addRows([
 ['Mike',{v: 10000, f: '$10,000'}, {v: 10, f: '$10'},true],
 ['Jim', {v:8000, f: '$8,000'},{v:8, f: '$8'}, false],
 ['Alice', {v: 12500, f: '$12,500'}, {v: 12, f: '$12'},true],
 ['Bob', {v: 7000,f: '$7,000'},{v: 7,f: '$7'}, true],
 ['Sourav',{v: 7000,f: '$9,000'},{v: 7,f: '$9'}, true],
 ['Sunil', {v: 7000,f: '$16,000'}, {v: 7,f: '$16'},true],
 ['Vinod', {v: 7000,f: '$19,000'}, {v: 7,f: '$19'},true]

 ]);

var table = new google.visualization.Table(document.getElementById('table_div'));

// loop in table
for (var i = 0; i < data.getNumberOfRows(); i++) {
  var formattedValue = data.getFormattedValue(i, 1);
  var tooltipValue = data.getFormattedValue(i, 2);
  data.setFormattedValue(i, 1, '<span title="' + tooltipValue + '">' + formattedValue + '</span>');
}

google.visualization.events.addListener(table, 'ready', function () {

 $('span').qtip();

});
var view = new google.visualization.DataView(data);
view.setColumns([0,1,3]); 

table.draw(view, {allowHtml: true});
}
</script>
</head>

<body>
<div id='table_div'></div>

</body>
</html>

Toolip Qtip with google chart table

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-VISUALIZATION

Related Questions in QTIP2

Trending Questions

Popular # Hahtags

Popular Questions