CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Khan
Khan

Reputation: 31

Google Bar Chart data preparation -- Group by Column

I am trying to create a google chart from the below data.

        Year        Product Value
        2015            A     10
        2015            B     20
        2016            C     30
        2016            D     40

Is this the right data for my google chart, using arrayToDataTable function, but not getting the desired output. I want Product as the legends, Year as the xAxis value and the value should define the bars. Thanks

Upvotes: 1

Views: 1687

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

each chart type has a specific data format you can check

typically, for most chart types, all columns after the first should be a number

unless you're using annotations, tooltips, or some other role

as such, the data would need to look similar to... 

      ['Year', 'A', 'B', 'C', 'D'],
      ['2015', 10, 20, null, null],
      ['2016', null, null, 30, 40],

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'A', 'B', 'C', 'D'],
      ['2015', 10, 20, null, null],
      ['2016', null, null, 30, 40],
    ]);

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

to transpose the data from sql server into the format preferred by the chart,
first create a data view, with calculated columns for each unique product

then aggregate the view, grouping on year, using the group() method

use the aggregated data table to draw the chart

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    // raw table data
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Product', 'Value'],
      [2015, 'A', 10],
      [2015, 'B', 20],
      [2016, 'C', 30],
      [2016, 'D', 40]
    ]);

    // format year as string
    var formatYear = new google.visualization.NumberFormat({
      pattern: '0000'
    });
    formatYear.format(data, 0);

    // create data view
    var view = new google.visualization.DataView(data);

    // init column arrays
    var aggColumns = [];

    // use formatted year as first column
    var viewColumns = [{
      calc: function (dt, row) {
        return dt.getFormattedValue(row, 0);
      },
      label: data.getColumnLabel(0),
      type: 'string'
    }];

    // build view & agg column for each product
    data.getDistinctValues(1).forEach(function (product, index) {
      // add view column
      viewColumns.push({
        calc: function (dt, row) {
          if (dt.getValue(row, 1) === product) {
            return dt.getValue(row, 2);
          }
          return null;
        },
        label: product,
        type: 'number'
      });

      // add agg column
      aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index + 1,
        label: product,
        type: 'number'
      });
    });

    // set view columns
    view.setColumns(viewColumns);

    // agg view by year
    var group = google.visualization.data.group(
      view,
      [0],
      aggColumns
    );

    // draw chart
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(group);
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 2

Related Questions