时间戳

首页 > 解决方案 > 从一张数据表中画出两张谷歌折线图

google-visualization - 从一张数据表中画出两张谷歌折线图

问题描述

我从我的 arduino 传感器收集数据到一个 mysql 表中，然后使用谷歌图表来绘制带有数据的折线图。我的数据是温度、湿度和计算得出的湿度指数。我项目的一部分是用我能够做到的当前值绘制一个量规。因此，我将数据选择到数据表中，然后使用数据视图对其进行过滤。然后为每个过滤值绘制三个单独的量规。问题是温度通常从 -40 到 40 比方说，湿度从 0% 到 100%，因此将它们绘制在同一个图表中会使图表就温度而言看起来很平坦。

我的目标是绘制两张图，而不必两次查询数据库（当然如果可能的话）

下面是相关代码

echo "[new Date(" . $row["Year"] .", " .$row["Month"].", " .$row["Day"].", " .$row["Hour"].", " .$row["Min"]."), ". $temperature . ", " . $humidex . ", " . $humidity . "]";

var temp_view = new google.visualization.DataView(data);
      temp_view.setRows([0,1,2]);

var humid_view = new google.visualization.DataView(data);
      humid_view.setRows([0,3]);

var options = {'title':'Temperature', 'width':650, 'height':500};

var chart1 = new google.visualization.LineChart(document.getElementById('temp_chart'));
      chart1.draw(temp_view, options);

var chart2 = new google.visualization.LineChart(document.getElementById('humid_chart'));
      chart2.draw(humid_view, options);

标签： google-visualization

解决方案

如果数据产生类似于以下的数组... 

[new Date(2018, 5, 29, 7, 26), 70, 75, 0.98]

那么你只有一行 4 列

这意味着您应该使用setColumns, 而不是setRows...

尝试... 

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

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

var options = {'title':'Temperature', 'width':650, 'height':500};

var chart1 = new google.visualization.LineChart(document.getElementById('temp_chart'));
chart1.draw(temp_view, options);

var chart2 = new google.visualization.LineChart(document.getElementById('humid_chart'));
chart2.draw(humid_view, options);

推荐阅读