Get Google Charts tooltips to display a string instead of a number

Question

I am using the an array of objects to create a piechart with Google Tables:

var sitesData = 
{title: "Practice Session", 
url: "https://app106.studyisland.com/cfw/test/practice-s…
gCount=9b1c6&qgList=bf1b20ed&appRnd=1519683586003", 
time: 3.157999999999999, 
seconds: " 3s"
}

I had to create a pie chart with the string value and time value, but I want the tooltips to display the seconds when they hover over the piechart. Below is my code:

function drawChart() {
    let data = new google.visualization.DataTable();
    data.addColumn('string', 'Title');
    data.addColumn('number', 'Time');

    for (let i = 0; i < sitesData.length; i++) {
        data.addRow([sitesData[i].title, sitesData[i].time]);
    }

    data.addColumn({type: 'string', role: 'tooltip'});
    for (let i = 0; i < sitesData.length; i++) {
        data.addRow([sitesData[i].seconds]);
    }

    let options = {
        tooltip: {isHtml: true},
        'title': 'Sites Logged',
        'width': 600,
        'height': 400,
        pieHole: 0.3
    };

    let chart = new 
 google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

I keep getting:

"Error: Row given with size different than 3 (the number of columns in the table)."

Any help would be appreciated.

Answer 1

the error is from the addRow method

the array passed to addRow must have the same number of values as there are columns in the data table...

in this case, a third column is added for the tooltip,
but only one value is given to addRow

data.addColumn({type: 'string', role: 'tooltip'});  // <-- third column
for (let i = 0; i < sitesData.length; i++) {
  data.addRow([sitesData[i].seconds]);  // <-- only one value, needs three
}

but you shouldn't need to loop twice, just add the tooltip column before the for loop...

// 3 columns
let data = new google.visualization.DataTable();
data.addColumn('string', 'Title');
data.addColumn('number', 'Time');
data.addColumn({type: 'string', role: 'tooltip'});

for (let i = 0; i < sitesData.length; i++) {
  // 3 values
  data.addRow([sitesData[i].title, sitesData[i].time, sitesData[i].seconds.toString()]);
}

otherwise, you can use method setValue for the tooltip,
if for some reason you need to loop twice...

let data = new google.visualization.DataTable();
data.addColumn('string', 'Title');
data.addColumn('number', 'Time');

for (let i = 0; i < sitesData.length; i++) {
  data.addRow([sitesData[i].title, sitesData[i].time]);
}

data.addColumn({type: 'string', role: 'tooltip'});
for (let i = 0; i < sitesData.length; i++) {
  data.setValue(i, 2, sitesData[i].seconds.toString());  // <-- use setValue instead
}