Google Chart: Pie Chart Slice based on legends

Question

		google.load('visualization', '1.1', {
			packages : [ 'controls' ]
		});
		google.load('visualization', '1', {
			packages : [ 'table' ]
		});
		google.load('visualization', '1.0', {
			'packages' : [ 'corechart' ]
		});
		google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
  var data = [{tagId:'2a:10',isSafe:'Safe'},{tagId:'dd:80',isSafe:'Unsafe'},{tagId:'0a:07',isSafe:'Safe'},{tagId:'29:11',isSafe:'Safe'}];
            var dataArray = [];
            var datatable = new google.visualization.DataTable();
            datatable.addColumn('string', 'TagID');
            datatable.addColumn('string', 'Status');

            $.each(data, function(i, obj) {
                dataArray.push([ obj.tagId, obj.isSafe]);
            });

            datatable.addRows(dataArray);

            var tagDivPicker = new google.visualization.ControlWrapper({
                'controlType' : 'CategoryFilter',
                'containerId' : 'tag_control_div',
                'options' : {
					filterColumnIndex : 0,
					'ui' : {
						'labelStacking' : 'vertical',
						'allowTyping' : false,
						'allowMultiple' : false
					//,'cssClass':'form-control1 input-sm m-bot15'
					}
                  }
            });
            var table_data = new google.visualization.ChartWrapper({
                'chartType' : 'Table',
                'containerId' : 'table_data',
                'view' : {
                    'columns' : [ 0, 1]
                }
            });

             var dataGroupColumnChart = google.visualization.data.group(
                     datatable, [1], [{
                         'column': 1,
                         'aggregation': google.visualization.data.count,
                         'type': 'number'
                     }]);

             var pieChart = new google.visualization.ChartWrapper({
                 'chartType': 'PieChart',
                 'containerId': 'pie_chart',
                 'dataTable': dataGroupColumnChart,
                 options: {
                     'width': 600,
                     'height': 400,
                     title: 'Total Compliance',
                     slices: {0: {color: 'green'}, 1:{color: 'red'}}
                 }
             });
             pieChart.draw();

            // Create the dashboard.
            var dashboard = new google.visualization.Dashboard(document
                    .getElementById('dashboard'))
            .bind([ tagDivPicker ],
                    [ table_data ]);

            dashboard.draw(datatable);

            google.visualization.events.addListener(tagDivPicker, 'statechange', function(event) {
                pieChart.setDataTable(google.visualization.data.group(
                    // get the filtered results
                    table_data.getDataTable(),
                    [2], [{
                         'column': 2,
                         'aggregation': google.visualization.data.count,
                         'type': 'number'
                     }]
                ));
                // redraw the pie chart to reflect changes
                pieChart.draw();
            });
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript"
		src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
	<div style="float: left;" id="table_data"></div>
	<div style="float: right;" id="pie_chart"></div>
	<div id="tag_control_div"></div>
</div>

Context:

I'm using Google Chart dashboard and aggregation for manipulating the of chart. Currently I am able to change the dashboard data based on multiple filters which includes a Pie Chart and CategoryFilter.

When I select the CategoryFilter and if there is only one slice available then Pie chart takes the first slice color which is not the nice user interface.

For Example, below data suggests Safe-Unsafe Chart. So the legends color will be green for safe and red for unsafe.

Problem Statement:

Now if there are no safe records available then pie chart supposed to show slice with RED color but the chart takes first slice as default color if there are no records for second slice or legend.

Data:

[{"tagId":"2a:10","isSafe":"Safe"},{"tagId":"dd:80","isSafe":"Unsafe"},{"tagId":"0a:07","isSafe":"Safe"},{"tagId":"29:11","isSafe":"Safe"}]

WhiteHat WhiteHat · Accepted Answer · 2016-10-23T20:44:42

1. don't need both jsapi and loader.js

plus, according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader (loader.js) from now on.

this will change the load statement to...

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

(you can include the callback in the load statement)

2. since the pie chart is being drawn separately, agg the data from the table chart,
each time the 'ready' event is fired

then assign the slice colors, according to the row values in the table chart, using the colors option

see following working snippet...

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

function drawVisualization() {
  var data = [{tagId:'2a:10',isSafe:'Safe'},{tagId:'dd:80',isSafe:'Unsafe'},{tagId:'0a:07',isSafe:'Safe'},{tagId:'29:11',isSafe:'Safe'}];
  var dataArray = [];
  var datatable = new google.visualization.DataTable();
  datatable.addColumn('string', 'TagID');
  datatable.addColumn('string', 'Status');

  $.each(data, function(i, obj) {
    dataArray.push([obj.tagId, obj.isSafe]);
  });
  datatable.addRows(dataArray);

  var tagDivPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'tag_control_div',
    options: {
      filterColumnIndex: 0,
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: true
      }
    }
  });

  var table_data = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_data',
    view: {
      columns: [0, 1]
    }
  });

  var dashboard = new google.visualization.Dashboard(document
  .getElementById('dashboard'))
  .bind([tagDivPicker], [table_data])
  .draw(datatable);

  google.visualization.events.addListener(table_data, 'ready', function () {
    var colors = {
      Safe: 'green', Unsafe: 'red'
    };
    var pieColors = [];

    var dataGroupColumnChart = google.visualization.data.group(
      table_data.getDataTable(), [1], [{
      column: 1,
      aggregation: google.visualization.data.count,
      type: 'number'
    }]);

    for (var i = 0; i < dataGroupColumnChart.getNumberOfRows(); i++) {
      pieColors.push(colors[dataGroupColumnChart.getValue(i, 0)]);
    }

    var pieChart = new google.visualization.ChartWrapper({
      chartType: 'PieChart',
      containerId: 'pie_chart',
      dataTable: dataGroupColumnChart,
      options: {
        width: 600,
        height: 400,
        title: 'Total Compliance',
        colors: pieColors
      }
    });
    pieChart.draw();
  });
}

.float {
  display: inline-block;
  padding: 4px;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
  <div class="float" id="table_data"></div>
  <div class="float" id="tag_control_div"></div>
  <div id="pie_chart"></div>
</div>

Google Chart: Pie Chart Slice based on legends

1 Answers