Google Combo chart - scatterplot and line - how to customise scatterplot tooltip

'XXX' below shows where I would like custom tooltip to be used - it should actually display a name from a row of data - 'XXX' is used to make the problem stand out here. This works fine on standard scatterplot but not on combo chart. Combo version displays default tooltip.

What am I missing?

Charts currently look like this...image link

`

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

        
    google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();

  data.addColumn('number', 'others_average');
  data.addColumn('number', '');
  // A column for custom tooltip content
  data.addColumn({
    type: 'string',
    role: 'tooltip',
  });

  data.addRows([
   
      
      
        <?php
        $wa_startindex = 0;
        $i=0;     
        while(!$chart->atEnd()) {
          $wa_startindex = $chart->Index;
        ?>
            

            [<?php echo($chart->getColumnVal("others_average")); ?>, <?php echo($chart->getColumnVal("band")); ?>, 'XXX']   

            <?php if($i<($chart->TotalRows)) echo ',';?>
            
        <?php
            $i++;
          $chart->moveNext();
        }
        $chart->moveFirst(); //return RS to first record
        unset($wa_startindex);
        unset($wa_repeatcount);
        ?>  
      
      
      
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    label: 'y1=x',
    type: 'number',
    calc: function (dt, row) {
      return dt.getValue(row, 0)
    }
  }]);

  var options = {
    seriesType: 'scatter',
    series: {
      1: {
        type: 'line'
      }
    },
     hAxis: {title: 'Average Band (other courses)', direction:-1,  viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
          vAxis: {title: '<?php echo($chart->getColumnVal("course_title")); ?> Band', direction:-1,  viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
          legend: 'none'  
      
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}
        
        
        
    </script>

`

I don't find the google charts hard to modify for use with PHP/MySQL data - problem just seems to be with the combo chart implmentation..

You should also include the tooltip column (column #2) in the DataView: view.setColumns([0, 1, 2, {....

google.charts.load('current', {
    callback: drawChart,
    packages:['corechart']
});

function drawChart() {
    var data = new google.visualization.DataTable();
    
    data.addColumn('number', 'others_average');
    data.addColumn('number', '');
    // A column for custom tooltip content
    data.addColumn({
        type: 'string',
        role: 'tooltip',
    });
    
    data.addRows([
        [1, 2, 'xxx1'],
        [2, 5, 'xxx2'],
        [3, 1, 'xxx3'],
        [4, 3, 'xxx4'],
        [5, 2, 'xxx5']
    ]);
    
    var view = new google.visualization.DataView(data);
     view.setColumns([0, 1, 2, {
      label: 'y1=x',
      type: 'number',
      calc: function (dt, row) {
        return dt.getValue(row, 0)
      }
    }]);
    
     var options = {
        seriesType: 'scatter',
        series: {
          1: {
            type: 'line'
          }
         },
        hAxis: {title: 'Average Band (other courses)', direction:-1,  viewWindow: { min: 1, max: 5 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
        vAxis: {title: '... Band', direction:-1,  viewWindow: { min: 1, max: 9 }, ticks: [1,2,3,4,5,6,7,8,9], viewWindowMode: "explicit"},
        legend: 'none'
        
    };
    
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(view, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div">
</div>