CODEWITHSUNDEEP
chartsgoogle-visualizationpie-chart
kodave
kodave

Reputation: 1

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

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.

Upvotes: 0

Views: 491

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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
}

Upvotes: 1

Related Questions