Форматирование данных диаграммы для красного узла - PullRequest
Новая
       13

Форматирование данных диаграммы для красного узла

0 голосов
/ 28 апреля 2018

Это первая попытка получить красный узел, чтобы получить историческую информацию, и отображение в виде линейного графика. Информация, которую я получаю, показана ниже, ряд значений в массиве времени и значения.

Информация ниже - это необработанные данные, которые я получаю из команды HTTP GET. Затем я передаю эту информацию в свой функциональный блок, чтобы попытаться отформатировать данные для просмотра на графике.

[{"x": "1525158700957", "y": "4.77"}, {"x": "1525158701981", "y": "5.90"}, {"x": "1525158702985", " y ":" 7.03 "}, {" x ":" 1525158704017 "," y ":" 8.18 "}, {" x ":" 1525158705041 "," y ":" 9.31 "}, {" x ":" 1525158706062" , "у": "10.45"}, { "х": "1525158707089", "у": "11.58"}, { "х": "1525158708095", "у": "12.71"}, {» х ":" 1525158709121" , "у": "13.84"}, { "х": "1525158710143", "у": "14.98"}, { "х": "1525158711171", "у": "16.11" }, { "х": "1525158712178", "у": "17.24"}, { "х": "1525158713203", "у": "18.37"}, { "х": "1525158714206", "у" : "19.50"}, { "х": "1525158715230", "у": "20.63"}, { "х": "1525158716251", "у": "21.77"}, { "х": "1525158717270" , "у": "22.90"}, { "х": "1525158718291", "у": "24.03"}, { "х": "1525158719315", "у": "25.17"}, { "х" : "1525158720345", "у": "26.32"}, { "х": "1525158721370", "у": "27.45"}, { "х": "1525158722392", "у": "28.59"}, { "х": "1525158723424", "у": "29.74"}, { "х": "1525158724445", "у": "30.87"}, { "х": "1525158725468", "у":» 32.00 "}, {" х ":" 1525158726474" , "у": "33.13"}, { "х": "1525158727501", "у": "34.27"}, { "х": "1525158728528",» у ":" 35.40 "}, {" х ":" 1525158729532" , "у": "36.53"}, { "х" : "1525158730572", "у": "37.66"}, { "х": "1525158731569", "у": "38.78"}, { "х": "1525158732592", "у": "39.91"}, { "х": "1525158733599", "у": "41.04"}, { "х": "1525158734624", "у": "42.17"}, { "х": "1525158735644", "у":» 43.32 "}, {" х ":" 1525158736670" , "у": "44.44"}, { "х": "1525158737673", "у": "45.57"}, { "х": "1525158738706",» у ":" 46.70 "}, {" х ":" 1525158739714" , "у": "47.83"}, { "х": "1525158740737", "у": "48.98"}, { "х":» 1525158741763" , "у": "50.10"}, { "х": "1525158742782", "у": "51.25"}, { "х": "1525158743803", "у": "52.38"}, {» х ":" 1525158744826" , "у": "53.51"}, { "х": "1525158745830", "у": "54.64"}, { "х": "1525158746854", "у": "55.76" }, { "х": "1525158747876", "у": "56.91"}, { "х": "1525158748897", "у": "58.04"}, { "х": "1525158749921", "у" : "59.17"}, { "х": "1525158750924", "у": "60.30"}, { "х": "1525158751946", "у": "61.42"}, { "х": "1525158752973" , "у": "62.57"}, { "х": "1525158753993", "у": "63.70"}, { "х": "1525158755016", "у": "64.84"}, { "х" : "1525158756039", "у": "65.97"}, { "х": "1525158757064", "у": "67.12"}, { "х": "1525158758091", "у": "68.25"}, { "х": "1525158759103", "у": "69.38"}, { "х": "152515876012 7" , "у": "70.52"}, { "х": "1525158761151", "у": "71.65"}, { "х": "1525158762173", "у": "72.80"}, {» х ":" 1525158763198" , "у": "73.92"}, { "х": "1525158764204", "у": "75.05"}, { "х": "1525158765228", "у": "76.18" }, { "х": "1525158766251", "у": "77.33"}, { "х": "1525158767276", "у": "78.45"}, { "х": "1525158768300", "у" : "79.60"}, { "х": "1525158769324", "у": "80.73"}, { "х": "1525158770356", "у": "81.86"}]

Я пытался взять эту информацию, около 100 записей, и показать ее на графике. Документация предполагает, что данные должны быть в формате; 

[{
"series": ["A", "B", "C"],
"data": [
[{ "x": 1504029632890, "y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
],
[{ "x": 1504029633514, "y": 6 },
{ "x": 1504029636622, "y": 7 },
{ "x": 1504029639539, "y": 6 }
],
[{ "x": 1504029634400, "y": 7 },
{ "x": 1504029637959, "y": 7 },
{ "x": 1504029640317, "y": 7 }
]
],
"labels": [""]  
}]

Я попытался добавить элемент 'series' и 'data' с функциональным блоком, как это; 

m = msg.payload;
var output = {labels: ["Temperature"], series: ["B"], data:[m]};
return {payload:[output]};

Когда информация обрабатывается моим функциональным блоком, я не получаю никаких ошибок в консоли Pi. На панели инструментов ось диаграммы отображается только с текущей отметкой времени и без других данных.

И это результат. 

[{"labels":["Temperature"],"series":["B"],"data":["   [{\"x\":\"1525160264800\",\"y\":\"42.38\"},{\"x\":\"1525160265824\",\"y\":\"43.51\"},{\"x\":\"1525160266829\",\"y\":\"44.64\"},{\"x\":\"1525160267852\",\"y\":\"45.76\"},{\"x\":\"1525160268872\",\"y\":\"46.89\"},{\"x\":\"1525160269892\",\"y\":\"48.04\"},{\"x\":\"1525160270913\",\"y\":\"49.17\"},{\"x\":\"1525160271936\",\"y\":\"50.30\"},{\"x\":\"1525160272941\",\"y\":\"51.42\"},{\"x\":\"1525160273962\",\"y\":\"52.55\"},{\"x\":\"1525160274969\",\"y\":\"53.68\"},{\"x\":\"1525160275995\",\"y\":\"54.81\"},{\"x\":\"1525160277003\",\"y\":\"55.94\"},{\"x\":\"1525160278024\",\"y\":\"57.07\"},{\"x\":\"1525160279037\",\"y\":\"58.19\"},{\"x\":\"1525160280063\",\"y\":\"59.34\"},{\"x\":\"1525160281085\",\"y\":\"60.47\"},{\"x\":\"1525160282104\",\"y\":\"61.60\"},{\"x\":\"1525160283129\",\"y\":\"62.74\"},{\"x\":\"1525160284157\",\"y\":\"63.89\"},{\"x\":\"1525160285179\",\"y\":\"65.02\"},{\"x\":\"1525160286206\",\"y\":\"66.16\"},{\"x\":\"1525160287243\",\"y\":\"67.29\"},{\"x\":\"1525160288250\",\"y\":\"68.44\"},{\"x\":\"1525160289270\",\"y\":\"69.57\"},{\"x\":\"1525160290295\",\"y\":\"70.69\"},{\"x\":\"1525160291301\",\"y\":\"71.82\"},{\"x\":\"1525160292329\",\"y\":\"72.97\"},{\"x\":\"1525160293350\",\"y\":\"74.10\"},{\"x\":\"1525160..."]}]

Как вы можете заметить, я не знаю JavaScript и ищу несколько советов о том, как использовать исходный код для отображения на графике.

Большое спасибо за вашу помощь.

Richard

1 Ответ

0 голосов
/ 01 мая 2018

Хорошо, я вижу проблему, с которой вы столкнулись ... спасибо, что обновили вопрос необработанными выводами.

Ваша функция, похоже, выполняет именно то, что ей нужно: встроить весь набор результатов в полезную нагрузку, используя (по существу) это выражение javascript: 

var output = {labels: ["Temperature"], series: ["B"], data:[msg.payload]};

Поскольку ваш запрос уже возвращает массив объектов с точками данных x / y, данные оборачиваются в массив, что необходимо для загрузки всех данных в диаграмму. Однако , как вы можете видеть, есть много экранированных кавычек в создаваемой вами полезной нагрузке - это означает, что входящий msg.payload - это НЕ массив объектов, а строка JSON. Вы должны увидеть тип данных (то есть «строка», а не «объект») в исходном отладочном узле запроса. Так вы связали результаты вашего запроса с узлом JSON? Если это так, возможно, ваш массив объектов запросов изменяется на строку JSON - если нет, просто добавьте узел JSON, чтобы преобразовать полученную строку в массив объектов Javascript. В любом случае, перед передачей в вашу функцию убедитесь, что msg.payload является массивом объектов.

Теперь, если вы чувствуете себя авантюрным, вы можете заменить свой функциональный узел на узел change - используйте раскрывающийся список, чтобы выбрать опцию J: (для режима JSONata) и "Установить" полезную нагрузку msg. в это выражение: 

[
    {
        "series": ["B"],
        "labels": ["Temperature"],
        "data": [
            [payload.{
                "x": $number(x),
                "y": $number(y)
            }]
        ]
    }
]

Этот вид выражения JSONata - это то, что я обычно использую для реструктуризации данных javascript в любой формат, который мне нужен для диаграмм и графиков. Он также приводит ваши строковые данные в числа (которые могут быть или не быть необходимыми).

Возможно, вы захотите узнать больше о синтаксисе JSONata , поскольку он очень мощный, хотя и сильно отличается от Javascript (на самом деле, он похож на использование XPath для манипулирования XML, но работает с данными JSON). На сайте также есть тренажер, который вы можете использовать для построения выражения на основе ваших собственных данных - фактически, вот страница, которую я использовал для форматирования ваших результатов . Аналогичный «тестер» также встроен в панель свойств узла изменения:

change node jsonata tester

В любом инструменте вы можете видеть изменение выходных данных при вводе выражения - очень удобно!

...