Why does Google chart's tooltips don't fully work in specific case?

user_1214872 0
Viewed 42

I'm using the html tool tips, and it's weird because only specific point show the tool tip correctly.

I'm using html tool tips with this configuration :

   var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number', 'Activités');
        dataTable.addColumn('number', 'Niveau 1');
        dataTable.addColumn('number', 'Niveau 2');
        dataTable.addColumn('number', 'Niveau 3');      
        dataTable.addColumn({type: 'string', role: 'tooltip', p:{html:true}});   

    var options = {
            title: 'Activités journalières par niveau de difficulté',
            hAxis: {title: "Activités", titleTextStyle: {color: '#333'},gridlines:{interval: 1}},
            vAxis: {title: 'Progression en %'},
            tooltip: {isHtml : true},
            explorer: {actions :['dragToZoom','rightClickToReset' ]},
            interpolateNulls: true,
            animation:{duration : 2000, easing:'inAndOut', startup : true}
           
       
        };

Here is the datas sent to addRows (sorry, not wonderfully formatted ), just have a look on the last level (niveau):

    1,
    20,
    NaN,
    NaN,
    Rubrique: < b > La proportionnalité < /b><br/ > Progression: < b > 20.00 % < /b><br/ > Temps: < b > 120 secondes < /b><br/ > Date: < b > 16.07 .2020 < /b><br/ > ,
    2,
    20,
    NaN,
    NaN,
    Rubrique: < b > La proportionnalité < /b><br/ > Progression: < b > 20.00 % < /b><br/ > Temps: < b > 120 secondes < /b><br/ > Date: < b > 16.07 .2020 < /b><br/ > ,
    3,
    60,
    NaN,
    NaN,
    Rubrique: < b > La proportionnalité < /b><br/ > Progression: < b > 60.00 % < /b><br/ > Temps: < b > 120 secondes < /b><br/ > Date: < b > 16.07 .2020 < /b><br/ > 

....... LAST LEVEL:
    3,
    NaN,
    NaN,
    60,
    Rubrique: < b > La proportionnalité < /b><br/ > Progression: < b > 60.00 % < /b><br/ > Temps: < b > 120 secondes < /b><br/ > Date: < b > 16.07 .2020 < /b><br/ >

The tooltip only show up on hover when the precedent value is not null (Like the last level)

What must be inserted for example here:

3,
    60,
    NaN, ???
    NaN, ???
Rubrique: < b > La proportionnalité < /b><br/ > Progression: < b > 60.00 % < /b><br/ > Temps: < b > 120 secondes < /b><br/ > Date: < b > 16.07 .2020 < /b><br/ >

I tried '', null, 'null'. Doesn't work

Thanks for your help :-)

google-visualization charts tooltip
1 Answers

if the value is null, there is no point to display, and thus no tooltip to display.

but the part you may be missing, is that the tooltip column role is only applied to the column it follows.
so if you want a tooltip for every series in the data table,
then you would need three tooltip columns.

see What are roles?...

...column roles apply to the 'data' column preceding it, whether it is immediately before it or before the first of a consecutive group of role columns. For example, you could have two columns following a 'data' column, one for 'tooltip' and one for 'annotation'.

in the example posted, the tooltip will only be displayed for column 'Niveau 3'

if you want a tooltip for each series, the data table would need two more columns...

var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('number', 'Activités');
    dataTable.addColumn('number', 'Niveau 1');
    dataTable.addColumn({type: 'string', role: 'tooltip', p:{html:true}});   
    dataTable.addColumn('number', 'Niveau 2');
    dataTable.addColumn({type: 'string', role: 'tooltip', p:{html:true}});   
    dataTable.addColumn('number', 'Niveau 3');      
    dataTable.addColumn({type: 'string', role: 'tooltip', p:{html:true}});
user_50907710
Related