Google charts custom tooltips in linecharts works only with focustarget: category

Question

I am using PHP / mongodb / javascript to build my Google Charts Line charts. In php I made one column as role tooltip (last but one column). Right now I am seeing default tooltip which is X-axis (Date) and Y-axis (Value). But I want to show Date, Value and an additional info (Image version) in tooltip. With the tooltip column, it is supposed to override the default tooltip but it is not happening.

If I add focusTarget: category in options, I am able to see Date, Value and Image version but for the whole category, I do not want this. I just want to see Date, Value and Image version for that point that I click or hover.

From google documentation FocusTarget: "datum" seem to be what I was looking for. When i do that, again I only see the default tooltip.

basically the one and only time default tooltip is overriden with custom tooltip is when i use focustarget : category.

Not sure what I am missing.

$table         = array();
$table['cols'] = array(
    array('label' => 'Date','type' => 'date')
); 

array_push($table['cols'], array('type' => 'string', 'role' => "tooltip"));
array_push($table['cols'], array('label' => 'Label', 'type' => 'string'));

$numCols = count($table['cols']) - 1;
$numColsMinus1 = count($table['cols']) - 2;

From database, values go into array

$rows[$row_index]['c'][$numColsMinus1]['v'] = $r["image_ver"];
$rows[$row_index]['c'][$col_index]['v'] = $r[$datatype];
$rows[$row_index]['c'][$numCols]['v'] = $label; 

Below is Google ChartWrapper

var chart = new google.visualization.ChartWrapper({
       'chartType': 'LineChart',
       'containerId': 'chart_div',
       'options': {
         'interpolateNulls': 'true',
         'curveType': 'false',
         'animation':{
           'duration': 1000,
           'easing': 'inAndOut'
         },
      'titleTextStyle':{ 'fontName': "Verdana", 'fontSize': 15, 'bold': 'false', 'italic': 'false' },
        'tooltip': {
            'textStyle': { 'fontName': "Arial", 'fontSize': 14, 'italic': 'false' },
             //'isHtml': 'true'     
             //'trigger' : 'selection',
             //'trigger' : 'both',
             //'trigger' : 'focus'
             //'legend' : 'none'
      },
        "focusTarget": "category",
        //"focusTarget": "datum",
        //"focusTarget": "",
        //"focusTarget": "series",
    'chartArea': {'height': '85%', 'width': '70%'},
         'hAxis': {'slantedText': false, 'maxAlternation': 1, 'viewWindowMode': 'pretty'},
         'allowHtml': 'true',
         'legend': {'allowHtml': 'true',
                    'textStyle': {fontSize: 11}},
         'pointSize': 3
       }
 });

Answer 1

Most of the role columns apply to the nearest left neighbor data column, as indicated here in the Google Charts documentation . If you want a custom tooltip for all the lines in your LineChart, you'll have to add a role column for each. I don't think you'll need to bother with focusTarget.