CODEWITHSUNDEEP
javascriptjsonchartsgoogle-visualization
Wendel Rodrigues
Wendel Rodrigues

Reputation: 137

Generate multiple donut charts from a dataset with Google Chart

I have this chart made using jChartFX.

enter image description here

Here is the code to generate this chart:

$scope.funcTypePersonQuantity = function() {
  $http.get($scope.UrlData).success(function(data, status) {
    var res = angular.fromJson(data);
    res = angular.fromJson(res.result[0]);

    var crosstabSuport = new cfx.data.CrosstabDataProvider();
    crosstabSuport.setDataSource(res);
    crosstabSuport.getRows().setHeading("PERSON");
    crosstabSuport.getColumns().setHeading("TYPE");
    crosstabSuport.setValueName("QUANTITY");
    chart1.setDataSource(crosstabSuport);

    var crosstabSuport2 = new cfx.data.CrosstabDataProvider();
    crosstabSuport2.setDataSource(res);
    crosstabSuport2.getRows().setHeading("TYPE");
    crosstabSuport2.getColumns().setHeading("PERSON");
    crosstabSuport2.setValueName("QUANTITY");
    chart2.setDataSource(crosstabSuport2);
  });
};

I wonder if it's possible to do the same with Google Chart. I generated several charts (pizza, donuts, bar, etc) but individually. I need to automatically generate multiple charts from a dataset that comes in jSON, as injChartsFX.

This is the structure of the data in jSON:

{
  "cols": [
    {"id":"type","label":"Type","pattern":"","type":"string"},
    {"id":"persons","label":"Person","pattern":"","type":"string"},
    {"id":"quantity","label":"Quantity","pattern":"","type":"number"}
  ], 
  "rows": [
    {"c":[{"v":"Type 1","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 1","f":null},{"v":"Person 2","f":null},{"v":229,"f":null}]},
    {"c":[{"v":"Type 1","f":null},{"v":"Person 3","f":null},{"v":354,"f":null}]},
    {"c":[{"v":"Type 2","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
    {"c":[{"v":"Type 2","f":null},{"v":"Person 2","f":null},{"v":149,"f":null}]},
    {"c":[{"v":"Type 2","f":null},{"v":"Person 3","f":null},{"v":51,"f":null}]},
    {"c":[{"v":"Type 3","f":null},{"v":"Person 1","f":null},{"v":8,"f":null}]},
    {"c":[{"v":"Type 3","f":null},{"v":"Person 2","f":null},{"v":3,"f":null}]},
    {"c":[{"v":"Type 3","f":null},{"v":"Person 3","f":null},{"v":52,"f":null}]},
    {"c":[{"v":"Type 4","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
    {"c":[{"v":"Type 4","f":null},{"v":"Person 2","f":null},{"v":35,"f":null}]},
    {"c":[{"v":"Type 4","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 5","f":null},{"v":"Person 1","f":null},{"v":11,"f":null}]},
    {"c":[{"v":"Type 5","f":null},{"v":"Person 2","f":null},{"v":10,"f":null}]},
    {"c":[{"v":"Type 5","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
    {"c":[{"v":"Type 6","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 6","f":null},{"v":"Person 2","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 6","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 7","f":null},{"v":"Person 1","f":null},{"v":2,"f":null}]},
    {"c":[{"v":"Type 7","f":null},{"v":"Person 2","f":null},{"v":4,"f":null}]},
    {"c":[{"v":"Type 7","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
  ]
}

Upvotes: 2

Views: 496

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

using google's ChartWrapper class from the 'controls' package,

you can set a view over the data table,
to use only certain columns... 

var chart0 = new google.visualization.ChartWrapper({
  chartType: 'PieChart',
  containerId: 'chart_div0',
  dataTable: data,
  options: {
    height: 300,
    legend: {
      position: 'bottom'
    },
    pieHole: 0.25,
    title: data.getColumnLabel(0)
  },

  // use Type and Quantity columns
  view: {
    columns: [0, 2]
  }
});

see following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"type","label":"Type","pattern":"","type":"string"},
      {"id":"persons","label":"Person","pattern":"","type":"string"},
      {"id":"quantity","label":"Quantity","pattern":"","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Type 1","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 2","f":null},{"v":229,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 3","f":null},{"v":354,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 2","f":null},{"v":149,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 3","f":null},{"v":51,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 1","f":null},{"v":8,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 2","f":null},{"v":3,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 3","f":null},{"v":52,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 2","f":null},{"v":35,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 1","f":null},{"v":11,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 2","f":null},{"v":10,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 2","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 1","f":null},{"v":2,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 2","f":null},{"v":4,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
    ]
  });

  var chart0 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div0',
    dataTable: data,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: data.getColumnLabel(0)
    },
    view: {
      columns: [0, 2]
    }
  });
  chart0.draw();

  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div1',
    dataTable: data,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: data.getColumnLabel(1)
    },
    view: {
      columns: [1, 2]
    }
  });
  chart1.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0"></div>
<div id="chart_div1"></div>

however, as seen in the above snippet,
the data presented in the question is not aggregated,
so you will end up with multiple slices per type or person

3 slices for "Type 1", etc...

the group() method can be used to aggregate the data

in this case, the group() method would need to be used twice,
once for each "group by" column

see following working snippet...

note: ChartWrapper not required here, could use --> google.visualization.PieChart

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"type","label":"Type","pattern":"","type":"string"},
      {"id":"persons","label":"Person","pattern":"","type":"string"},
      {"id":"quantity","label":"Quantity","pattern":"","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Type 1","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 2","f":null},{"v":229,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 3","f":null},{"v":354,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 2","f":null},{"v":149,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 3","f":null},{"v":51,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 1","f":null},{"v":8,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 2","f":null},{"v":3,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 3","f":null},{"v":52,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 2","f":null},{"v":35,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 1","f":null},{"v":11,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 2","f":null},{"v":10,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 2","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 1","f":null},{"v":2,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 2","f":null},{"v":4,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
    ]
  });

  var groupData0 = google.visualization.data.group(
    data,
    [0],
    [{
      column: 2,
      type: 'number',
      label: data.getColumnLabel(2),
      aggregation: google.visualization.data.sum
    }]
  );

  var chart0 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div0',
    dataTable: groupData0,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: data.getColumnLabel(0)
    }
  });
  chart0.draw();

  var groupData1 = google.visualization.data.group(
    data,
    [1],
    [{
      column: 2,
      type: 'number',
      label: data.getColumnLabel(2),
      aggregation: google.visualization.data.sum
    }]
  );

  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div1',
    dataTable: groupData1,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: data.getColumnLabel(1)
    }
  });
  chart1.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0"></div>
<div id="chart_div1"></div>

you can also use the DataView class to separate columns... 

var view0 = new google.visualization.DataView(data);
view0.setColumns([0, 2]);

var chart0 = new google.visualization.PieChart(container);
chart0.draw(view0, options);

var view1 = new google.visualization.DataView(data);
view1.setColumns([1, 2]);
...

EDIT

the view has keys for both columns and rows...

see following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"type","label":"Type","pattern":"","type":"string"},
      {"id":"persons","label":"Person","pattern":"","type":"string"},
      {"id":"quantity","label":"Quantity","pattern":"","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Type 1","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 2","f":null},{"v":229,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 3","f":null},{"v":354,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 2","f":null},{"v":149,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 3","f":null},{"v":51,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 1","f":null},{"v":8,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 2","f":null},{"v":3,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 3","f":null},{"v":52,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 2","f":null},{"v":35,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 1","f":null},{"v":11,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 2","f":null},{"v":10,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 2","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 1","f":null},{"v":2,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 2","f":null},{"v":4,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
    ]
  });

  var chartPerson3 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div0',
    dataTable: data,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: 'Person 3'
    },
    view: {
      columns: [0, 2],
      rows: data.getFilteredRows([{column: 1, value: 'Person 3'}])
    }
  });
  chartPerson3.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0"></div>

and DataView has methods for both...

setColumns
setRows

Upvotes: 2

Related Questions