google charts, tooltip replace column value

Question

I'm using a combo chart from the google graph api (combo chart type). I want to add custom tooltips to add information about each point in the graph, but one of the value is replaced by the tooltip.

Here a very similar example graphic: adding tooltip to graphs

Supposing that I'm using that graph. In my case, the value 106 (for the year 2011), is replaced by Growth 14% (the tooltip value)

Here the code that generates the data:

function gcomboChart () {

var data = new google.visualization.DataTable();

var dataVal =
[
 ["January",37903,655396,3411359,"Tooltip January"],
 ["February",33813,559595,3035931,"Tooltip February"],
 ["March",54073,725638,4561690,"Tooltip March"]
];

data.addColumn('string','month');
data.addColumn('number','Value1');
data.addColumn('number','Value2');
data.addColumn('number','Value3');
data.addColumn({type:'string', role:'tooltip'});

data.addRows(dataVal);
return(data);
}


//Here the code that generates the graph:


function drawChartComboChartID14cc19be5eef() {
var data = gcomboChart();
 var options = { focusTarget: 'category'};

options["allowHtml"] = true;
options["seriesType"] = "bars";
options["series"] = {0: {targetAxisIndex:1,type:"line"}};
options["series"] = {0: {targetAxisIndex:2,type:"line"}};
options["vAxes"] = [{title:'Left Axis',format:'#,###',titleTextStyle:{color: 'orange'},textStyle:{color: 'orange'},textPosition:'out'},
{title:'Right Axis',format:'#,###',titleTextStyle:{color: 'blue'},textStyle:{color: 'blue'},textPosition:'out'}];
options["width"] =   1000;
options["height"] =    600;
options["pointSize"] =      9;


    var chart = new google.visualization.ComboChart(
    document.getElementById('ComboChart'));
    chart.draw(data,options);

}

If you use the code, you'll see that the value of the third variable (Value3), is overwritten by the tooltip. I don't know hoy to get rid of that problem. I want to show the three values of 'Value1-3' plus the tooltip

Can you please give me a hand? Thanks!

Answer 1

Tooltips by default will replace the tooltip for that data point. It will not add an additional tooltip. To get around this, you need to add an additional series, and format the tooltip manually within that data value. You can then hide it from the legend, and have it display all nice as follows:

Here is the code:

function gcomboChart () {

  var data = new google.visualization.DataTable();

  //{v: x, f: y} allows you to set a manual format for each data point
  var dataVal =
      [
        ["January",37903,655396,3411359,{v: 0, f:"Tooltip January"}],
        ["February",33813,559595,3035931,{v: 0, f:"Tooltip February"}],
        ["March",54073,725638,4561690,{v: 0, f:"Tooltip March"}]
      ];

  data.addColumn('string','month');
  data.addColumn('number','Value1');
  data.addColumn('number','Value2');
  data.addColumn('number','Value3');
  // Changed to standard data rather than tooltip role
  data.addColumn('number','');

  data.addRows(dataVal);
  return(data);
}


//Here the code that generates the graph:


function drawVisualization() {
  var data = gcomboChart();
  var options = { focusTarget: 'category'};

  options["allowHtml"] = true;
  options["seriesType"] = "bars";
  // the below line makes sure the tooltip is not shown in the legend
  options["series"] = {0: {targetAxisIndex:0,type:"line"},3: {visibleInLegend:false}};
  options["vAxes"] = [{title:'Left Axis',format:'#,###',titleTextStyle:{color: 'orange'},textStyle:{color: 'orange'},textPosition:'out'},
                      {title:'Right Axis',format:'#,###',titleTextStyle:{color: 'blue'},textStyle:{color: 'blue'},textPosition:'out'}];
  options["width"] =   1000;
  options["height"] =    600;
  options["pointSize"] =      9;


  var chart = new google.visualization.ComboChart(
    document.getElementById('visualization'));
  chart.draw(data,options);

}

^{Note: I should have switched series 3 to a line as well so that it doesn't push the bars over one. Change the series setting as follows to make it look nicer: options["series"] = {0: {targetAxisIndex:0,type:"line"},3: {visibleInLegend:false,type:"line"}};}