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

Question

Basically I want to make a scatter plot of a data set with three series : (1) for x (2) for y (3) a third series which takes only 0 and 1.

I want the point with 3rd series value = 0 to appear as red while blue for the rest of the points.

I am using Google Charts, they had a color fill option in https://developers.google.com/chart/image/docs/gallery/scatter_charts but this is deprecated and is no longer used. Can anyone provide the required commands to do the same.

Answer 1

If I read your question correctly, you aren't trying to show the 3rd series and are just trying to set the color of the point based on that value. If that is correct, you can do something like this:

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>

https://developers.google.com/chart/interactive/docs/points
I'm not sure how this is related to a gradient though.

---

edit:

After taking a second look, it seems as though you want to reformat your data into 3 columns, Student Id, Class 1, Class 2, then assign colors via options.

Each column after the first will be a label:

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>

Answer 2

Take a look here.

Not sure if i understood your question right, but you can use the 'colors' option.

var options = {
    colors: ['blue', 'blue', 'red']
};