Stack Exchange
Visualisation of data in pandas dataframe using google charts
I have a dataframe in pandas with the following data in it.
MachineName Logs
P88         Yes
P39         Yes
P107        Yes
P49         No
T04         No
P74         Yes

Query used:
%%sql --module Test2
DEFINE QUERY logs
SELECT 
  MachineName, 
  CASE 
    WHEN TIMESTAMP_TO_SEC(CURRENT_TIMESTAMP()) - TIMESTAMP_TO_SEC(DateTime1) < 60 * 60 THEN "Yes" 
    ELSE "No"
  END AS Logs,
FROM 
(
  SELECT MachineName,MAX(EventLog) as DateTime1
  FROM [Logs_20160702]
  GROUP BY MachineName
)

I need to create a pie chart using google charts which should have a green color region if the EventLogs is "yes" and red color region if the EventLogs is "no", When I click on the red color region, it should display all the machine names that has the EventLogs of "no".
From the document "Interactive charts using Google Apis", I understand that we have to use the below statement to draw the pie chart, but not sure on how to specify these coloring and display conditions. This is the first time i am using Google charts, so not sure whether this can be achieved using google charts. Any help would be appreciated.

the data format for PieChart calls for 2 required columns, 'string' & 'number' 
so we have to convert dataframe to proper format, from...  
  ['MachineName', 'Logs'],
  ['P88', 'Yes'],
  ['P39', 'Yes'],
  ['P107','Yes'],
  ['P49', 'No'],
  ['T04', 'No'],
  ['P74', 'Yes']

to something like...  
  ['Result', 'Count'],
  ['No', 2],
  ['Yes', 4]

this can be done using the static method google.visualization.data.group 
then using the chart's 'select' event, we can display the machine names from the dataframe  
in the following working snippet, the machine names are displayed in a Table chart
using a DataView and getFilteredRows from the chart's selection  
use config option for colors to set red / green


google.charts.load('current', {
  callback: function () {
    var rawData = [
      ['MachineName', 'Logs'],
      ['P88', 'Yes'],
      ['P39', 'Yes'],
      ['P107','Yes'],
      ['P49', 'No'],
      ['T04', 'No'],
      ['P74', 'Yes']
    ];

    var dataEventLogs = google.visualization.arrayToDataTable(rawData);

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

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

    google.visualization.events.addListener(chart, 'select', function () {
      var selection = chart.getSelection();
      if (selection.length) {
        var viewEventLogs = new google.visualization.DataView(dataEventLogs);
        viewEventLogs.setRows(dataEventLogs.getFilteredRows([{
          column: 1,
          value: dataPie.getValue(selection[0].row, 0)
        }]));
        var table = new google.visualization.Table(document.getElementById('chart_div_table'));
        table.draw(viewEventLogs);
      } else {
        document.getElementById('chart_div_table').innerHTML = '';
      }
    });

    chart.draw(dataPie, {
      chartArea: {
        height: '90%',
        width: '90%'
      },
      colors: ['red', 'green'],
      height: 282,
      width: 282
    });
  },
  packages: ['corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_pie"></div>
<div id="chart_div_table"></div>



