首页 文章

使用谷歌图表可视化pandas数据框中的数据

提问于
浏览 次
3

我在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是“no”则需要红色区域，当我点击红色区域时，它应该显示所有的EventLogs为“no”的机器名称 .

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

pandas dataframe charts google-visualization

1 回答

  • 2

    data format for PieChart 调用2个必需列， '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 的config选项设置红色/绿色

    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>
    回复于

相关问题