How to add gradient color fill to the points of scatter plot using google Charts?

google.load("visualization", "1.1", {packages: ["corechart"]});

google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = [
    [0, 0, 0],  [1, 1, 0],   [2, 2, 1],
    [3, 3, 1],  [4, 4, 0],   [5, 5, 1],
    [6, 6, 0],  [7, 7, 1],   [8, 8, 0],
    [9, 9, 1],  [10, 10, 1], [11, 0, 0],
    [12, 5, 0], [13, 3, 0],  [14, 1, 1],
    [15, 5, 1], [16, 6, 0],  [17, 7, 1],
    [18, 3, 0], [19, 9, 1],  [20, 2, 1],
    [21, 2, 0], [22, 2, 1],  [23, 3, 0],
    [24, 4, 0], [25, 2, 0],  [26, 6, 1],
    [27, 2, 1], [28, 8, 0],  [29, 9, 1],
  ];
  data.forEach(function(e) {
    e[2] = e[2] ? 'fill-color: red' : 'fill-color: blue';
  });
  data.unshift(['Student ID', 'Probability', {'type': 'string','role': 'style'}]);

  var chartData = google.visualization.arrayToDataTable(data);
  var options = {
    title: 'Students\' Final Grades',
    width: 900,
    height: 500,
    axes: {
      y: {
        'Probability': {
          label: 'Probability'
        }
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(chartData, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

google.load("visualization", "1.1", {
  packages: ["corechart"]
});

google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = [
    [0, 0, 0],  [1, 1, 0],   [2, 2, 1],
    [3, 3, 1],  [4, 4, 0],   [5, 5, 1],
    [6, 6, 0],  [7, 7, 1],   [8, 8, 0],
    [9, 9, 1],  [10, 10, 1], [11, 0, 0],
    [12, 5, 0], [13, 3, 0],  [14, 1, 1],
    [15, 5, 1], [16, 6, 0],  [17, 7, 1],
    [18, 3, 0], [19, 9, 1],  [20, 2, 1],
    [21, 2, 0], [22, 2, 1],  [23, 3, 0],
    [24, 4, 0], [25, 2, 0],  [26, 6, 1],
    [27, 2, 1], [28, 8, 0],  [29, 9, 1],
  ];
    
  var cols = [['Student ID', 'Class 1', 'Class 2']];
  var rows = data.map(function(e) {
    return e[2] ? [e[0], null, e[1]] : [e[0], e[1], null];
  });

  var chartData = google.visualization.arrayToDataTable(cols.concat(rows));
  var options = {
    title: 'Students\' Final Grades',
    width: 900,
    height: 500,
    colors: ['#ac4142', '#6a9fb5'],
    vAxis: { title:'Probability'}
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(chartData, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>