CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Hitesh
Hitesh

Reputation: 3498

Loop Google Chart Data Rows

I have my data in the below format, below is just a sample

var data = google.visualization.arrayToDataTable([
      ['Medium', 'Expenses'],
      ['Twitter',      400],
      ['Facebook',      460],
      ['Youtube',       1120],
      ['Instagram',      540]
]);

I want to loop through the records and give appropriate color to each platform. I know it can be done for columns like below:

var view = new google.visualization.DataView(data);
var colors = [];
for (var i = 1; i < view.getNumberOfColumns(); i++) {
  switch (view.getColumnLabel(i)) {
      case "Twitter":
         colors = colors.concat(["#26CEFF"]);
         break;
}

I provide this to the chart in options as below:

var options = {
    colors: colors
}
var chart = new google.visualization.PieChart(Div);
chart.draw(view, options);

But I am unable to loop through the rows to do the same functionality. Help appreciated.

Note: I cannot add the color property while creating the datatable. I have to do the functionality after creating the view or datatable only.

Upvotes: 1

Views: 3158

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

for a pie chart, you can loop using --> data.getNumberOfRows()
build the colors array based on the value of the first column --> Medium

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Medium', 'Expenses'],
    ['Twitter', 400],
    ['Facebook', 460],
    ['Youtube', 1120],
    ['Instagram', 540]
  ]);
  
  var colors = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    switch (data.getValue(i, 0)) {
      case 'Twitter':
        colors.push('#26CEFF');
        break;

      case 'Facebook':
        colors.push('blue');
        break;

      case 'Youtube':
        colors.push('red');
        break;

      case 'Instagram':
        colors.push('green');
        break;
    }
  }

  var options = {
    colors: colors
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

for column or bar charts, the colors option won't work.
if there is only one series --> 'Expenses'

instead, need to use a 'style' role in the data table / view.

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Medium', 'Expenses'],
    ['Twitter', 400],
    ['Facebook', 460],
    ['Youtube', 1120],
    ['Instagram', 540]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      var color;

      switch (dt.getValue(row, 0)) {
        case 'Twitter':
          color = '#26CEFF';
          break;

        case 'Facebook':
          color = 'blue';
          break;

        case 'Youtube':
          color = 'red';
          break;

        case 'Instagram':
          color = 'green';
          break;
      }

      return color;
    },
    type: 'string',
    role: 'style'
  }]);

  var options = {
    legend: 'none'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);

  chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions