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
}
});