CODEWITHSUNDEEP
javascriptjquerygoogle-visualization
Studento919
Studento919

Reputation: 635

Average line for current data in a Google ComboChart

Hi guys am currently using a combo chart, and am trying to get an average of all values and show a line on the chart to represent the average for each agent.

I have done some digging and there was one resource that I did try to use but it was throwing up errors and I have struggled to find a solution for this.

Below is a JSFiddle example of how my chart looks but I need an average line for all the values for each agent and displayed an average line across for each agent.

JSFiddle

And below is the JS code for the JS Fiddle:

jQuery(function($) {
  google.charts.load('current', {
    callback: drawChartAverage,
    packages: ['corechart']
  });

  function drawChartAverage() {
    var result = [
      ['Agents', 'Minutes'],
      ['1', 44],
      ['2', 22],
      ['3', 11],
      ['4', 34]];
    var options = {
      title: 'Average Minutes cross Agents',
      vAxis: {
        title: 'Minutes'
      },
      hAxis: {
        title: 'Agent'
      },
      seriesType: 'bars',
      series: {
        1: {
          type: 'line'
        }
      }
    };
    var chartdata = new google.visualization.arrayToDataTable(result);
    var chartAvg = new google.visualization.ComboChart(document.getElementById('chartAvg'));
    chartAvg.draw(chartdata, options);
  }
})

I need it to look something like the example I have attempted to use but no joy in doing so.

But at gives you an idea of what am trying to do!

Upvotes: 1

Views: 1431

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

Using the examples provided...

google.charts.load('44', {
  callback: drawChartAverage,
  packages: ['corechart']
});

function drawChartAverage() {
  var result = [
    ['Agents', 'Minutes'],
    ['1', 44],
    ['2', 22],
    ['3', 11],
    ['4', 34]
  ];
  var chartdata = new google.visualization.arrayToDataTable(result);

  // Create a DataView that adds another column which is all the same (empty-string) to be able to aggregate on.
  var viewWithKey = new google.visualization.DataView(chartdata);
  viewWithKey.setColumns([0, 1, {
      type: 'string',
      label: '',
      calc: function (d, r) {
          return ''
      }
  }])

  // Aggregate the previous view to calculate the average. This table should be a single table that looks like:
  // [['', AVERAGE]], so you can get the Average with .getValue(0,1)
  var group = google.visualization.data.group(viewWithKey, [2], [{
      column: 1,
      id: 'avg',
      label: 'average',
      aggregation: google.visualization.data.avg,
      'type': 'number'
  }]);

  // Create a DataView where the third column is the average.
  var dv = new google.visualization.DataView(chartdata);
  dv.setColumns([0, 1, {
      type: 'number',
      label: 'average',
      calc: function (dt, row) {
          // round average up / down
          return Math.round(group.getValue(0, 1));
      }
  }]);

  var options = {
    title: 'Average Minutes cross Agents',
    vAxis: {
      title: 'Minutes'
    },
    hAxis: {
      title: 'Agent'
    },
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    }
  };

  var chartAvg = new google.visualization.ComboChart(document.getElementById('chartAvg'));
  chartAvg.draw(dv, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chartAvg"></div>

Upvotes: 3

Related Questions