Coloring Cells Google Chart - Scatter Chart

Question

I am using google charts in one of my project. I need to color a set of cells in the google scatter chart using the following code.

I am using google.visualization.arrayToDataTable for processing data.

Following is my code

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

<script type="text/javascript">
google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'X', type: 'number'},
        {label: 'Low', type: 'number'},
        {label: 'High', type: 'number'},
        {label: 'Y', type: 'number'}
      ],
      rows: [
        {c:[{v: 3}, {v: 3.5}, null, null]},
        {c:[{v: 4}, {v: 5.5}, null, null]},
        {c:[{v: 4}, {v: 5}, null, null]},
        {c:[{v: 6.5}, {v: 7}, null, null]},
        {c:[{v: 8}, {v: 12}, null, null]},
        // begin cell color
        {c:[{v: 10}, null, {v: 10}, {v: 10}]},
        {c:[{v: 11}, null, {v: 10}, {v: 10}]},
        {c:[{v: 20}, null, {v: 10}, {v: 10}]},
      ]
    });

    var options = {
      legend: 'none',
      hAxis: {
        ticks: [0, 5, 10, 15, 20],
        title: 'Age'
      },
      height: 400,
      isStacked: true,
      series: {
        // low
        1: {
          color: 'transparent',
          type: 'area',
          visibleInLegend: false
        },

        // high
        2: {
          areaOpacity: 0.6,
          color: '#A5D6A7',
          type: 'area',
          visibleInLegend: false
        }
      },
      seriesType: 'scatter',
      title: 'Age vs. Weight comparison',
      vAxis: {
        ticks: [0, 5, 10, 15, 20],
        title: 'Weight'
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);
  },
  packages:['corechart']
});
</script>

Please help me fixing this

Answer 1

use a ComboChart with two stacked area series to color the cells

the bottom area will be 'transparent'

use null in the data where the rows do not coincide...

---

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'X', type: 'number'},
        {label: 'Low', type: 'number'},
        {label: 'High', type: 'number'},
        {label: 'Y', type: 'number'}
      ],
      rows: [
        {c:[{v: 3}, {v: 3.5}, null, null]},
        {c:[{v: 4}, {v: 5.5}, null, null]},
        {c:[{v: 4}, {v: 5}, null, null]},
        {c:[{v: 6.5}, {v: 7}, null, null]},
        {c:[{v: 8}, {v: 12}, null, null]},
        // begin cell color
        {c:[{v: 10}, null, {v: 10}, {v: 10}]},
        {c:[{v: 11}, {v: 14}, {v: 10}, {v: 10}]},
        {c:[{v: 20}, null, {v: 10}, {v: 10}]},
      ]
    });

    var options = {
      legend: 'none',
      hAxis: {
        ticks: [0, 5, 10, 15, 20],
        title: 'Age'
      },
      height: 400,
      isStacked: true,
      series: {
        // low
        1: {
          color: 'transparent',
          type: 'area',
          visibleInLegend: false
        },

        // high
        2: {
          areaOpacity: 0.6,
          color: '#A5D6A7',
          type: 'area',
          visibleInLegend: false
        }
      },
      seriesType: 'scatter',
      title: 'Age vs. Weight comparison',
      vAxis: {
        ticks: [0, 5, 10, 15, 20],
        title: 'Weight'
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

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