Нарисуйте две линейные диаграммы Google из одной таблицы данных - PullRequest
0 голосов
/ 29 июня 2018

Я собираю данные с моих датчиков arduino в таблицу mysql, а затем использую графики Google для построения графиков с данными. Мои данные это температура, влажность и рассчитанный гумус. Часть моего проекта состояла в том, чтобы нарисовать манеру с текущими значениями, которые я смог сделать. Поэтому я выбираю данные в таблицу данных, а затем фильтрую их, используя представление данных. Затем нарисуйте три отдельных индикатора для каждого из отфильтрованных значений. Проблема в том, что температура обычно колеблется от -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);

1 Ответ

0 голосов
/ 29 июня 2018

, если данные приводят к массиву, подобному следующему ...

[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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...