Gilson Gilbert Gilson Gilbert -4 years ago 132
HTML Question

Coloring Cells Google Chart - Scatter Chart

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download