Aanpassen datatabel

We halen de data binnen als een array vanuit de Sheet.
Hierna maken we er een datatable van met de juiste formaatzettings.

De arrayToDataTable laat je toe om de labels en rol van een kolom te bepalen.
We voegen hier aan iedere kolom de mogelijkheid toe om deze als tooltip te gebruiken, waardoor we door eenvoudig die kolom te kiezen ook dit als Tooltip kunnen weergeven.

Opmerking:
De kolommen die geen strings bevatten kunnen op deze wijze niet als tooltip dienen!
Wil je de Grade als tooltip gebruiken, dien je een custom tooltip te maken.

Vermits wij een custom tooltip willen maken, dienen we de gegevens ervan samen te brengen.
Je hebt dus geen andere mogelijkheid dan alle data te overlopen en deze in een extra tooltip kolom te plaatsen.
dataArray.addColumn({role: 'tooltip', type: 'string', p: {html: true}});

We stellen het formaat op html in. De kolom wordt achteraan aan de datatable toegevoegd en draagt hierdoor het nummer 5 (ons voorbeeld).

Voor het aanmaken van de data loop je door alle data van de datatabel.
Waardes, kolom titels en formaten kan je recupereren om zo een nieuwe HTML string te maken.

Met setValue plaats je deze nieuwe HTML sting in de nieuwe tooltip kolom per record.

// create dataArray for dashboard with extra info for tooltip

var dataArray = google.visualization.arrayToDataTable([

[ {label: 'Titel', id: 'year', type :'string',role: 'tooltip'},

{label: 'Omschrijving', id: 'Omschrijving', type :'string',role: 'tooltip'},

{label: 'Key', id: 'Key', type :'string',role: 'tooltip'},

{label: 'ParentKey', id: 'ParentKey', type :'string',role: 'tooltip'},

{label: 'Grade', id: 'Grade', type :'number',role: 'tooltip'}

]])

for (r=1; r< data.length-1; r++){ //populate table with data from Report

dataArray.addRow(data[r])

};

// HTML tooltip column 5

dataArray.addColumn({role: 'tooltip', type: 'string', p: {html: true}});

for (var i = 0; i < dataArray.getNumberOfRows(); i++) {

var titel_val = dataArray.getValue(i, 0);

var grade_val = dataArray.getValue(i, 4);

var grade_text = grade_val.toString() + '%'

var tooltip = '<div class="ggl-tooltip" style="text-align:left;">' +

titel_val + '<div style="text-align:left;">' +

dataArray.getColumnLabel(1) + ': ' +

dataArray.getFormattedValue(i, 1) + '</div><div style="text-align:left;">' +

dataArray.getColumnLabel(4) + ': ' +

grade_text + '</div></div>';

dataArray.setValue(i, 5, tooltip);

}

Chartwrapper HTML activeren en tooltip kiezen

Hier wordt het toegepast op een PieChart, waarbij normaal de tooltip de kolom 0 toont met kolom 4 en nog een percentatge wat niet de grade is, maar de verdeling van de selectie.

Via View selecteren we dat de Chart wordt opgebouwd met de gegevens uit kolom 0(titel) en kolom 4(grade) en als laatste voegen we hieraan de tooltip kolom 5 toe.

'view': {columns : [0,4,5]},

In de options plaatsen we de tooltip setting:
'tooltip': {isHtml: true},

Met de draw dashboard koppelen we de herwerkte datatabel aan de grafieken en sliders.

// Create a line chart, passing some options

var lineChart = new google.visualization.ChartWrapper({

'chartType': 'PieChart',

'containerId': 'piechart-div',

'view': {columns : [0,4,5]},

'options': {

// 'width': 400,

'height': 400,

'title': 'Report',

'pieSliceText': 'value',

'pieSliceTextStyle':{color: "black"},

'tooltip': {isHtml: true},

// 'legend': 'right',

}

});

......

dashboard.draw(dataArray);