使用Google图表在pandas数据框中可视化数据

Question

我在pandas中有一个数据框，其中包含以下数据。

MachineName Logs
P88         Yes
P39         Yes
P107        Yes
P49         No
T04         No
P74         Yes

使用的查询:

%%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
)

我需要使用谷歌图表创建一个饼图，如果EventLogs为“是”，则应该有一个绿色区域，如果EventLogs为“否”，则应该有一个红色区域。当我点击红色区域时，它应该显示所有EventLogs为“否”的机器名称。

从文档“使用Google API的交互式图表”中，我了解到我们必须使用以下语句来绘制饼图，但不确定如何指定这些着色和显示条件。这是我第一次使用Google图表，所以不确定是否可以使用Google图表实现。任何帮助将不胜感激。

- user3447653

Answer 1

PieChart的数据格式要求必须有两列，一列是'string'，另一列是'number'

因此，我们需要将数据框转换为适当的格式，从...

  ['MachineName', 'Logs'],
  ['P88', 'Yes'],
  ['P39', 'Yes'],
  ['P107','Yes'],
  ['P49', 'No'],
  ['T04', 'No'],
  ['P74', 'Yes']

将某物转换为类似于...的形式

  ['Result', 'Count'],
  ['No', 2],
  ['Yes', 4]

可以使用静态方法google.visualization.data.group来完成此操作。

然后，使用图表的'select'事件，我们可以从数据框中显示机器名称。

在以下工作片段中，机器名称以Table图表的形式显示，
使用DataView和从图表选择中的getFilteredRows。

使用colors的配置选项设置红色/绿色。

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>

- WhiteHat