Драйвер Flot

VictorS

Доброго дня,

сподобился тут построить графики потребления электричества и воды по суткам и месяцам. Даже не мог представить что это есть большая проблема :(

Исторически данные есть в виде: время/показания.

Но для нужных графиков мне нужно взять дельту от показания за сутки 0:00 текущих суток, и 0:00 предыдущих и так далее.

И как это реализовать при помощи flot?

update: увидел что тема подымалась уже…

видимо при помощи flot - никак. но вот тут https://iobroker.biz:8080/ в одном из примеров вроде видел подобные графики когда то.. а сейчас не могу найти…

Bluefox

А так?
48_2017-01-26_22_10_25-flot_edit.png
48_2017-01-26_22_10_57-flot_edit.png

Bluefox

~~@andrey99986:~~

Как должна работать настройка в "Входные-данные"-"Ещё"-"Сглаживание" ?

Установил параметр в 10, по логике должно брать среднее из 10 соседних значений (+-5) (линейно или более сложно используя вес).

У меня вот такая картинка выходит. Думаю что при "сглаживании" в новом графике не должны превышаться исходные реальные максимальные значения.

Красная линия - исходные данные.

Зелёная линия - те же данные со сглаживанием "10". `
Очень интересно:

Используется вот этот алгоритм. https://github.com/ioBroker/ioBroker.fl … ta.js#L713

Сейчас вижу ошибку, но она возможна только если попадаются null значения.

Обновил на гите алгоритм.

andrey99986

~~@Bluefox:~~

~~@andrey99986:~~

Как должна работать настройка в "Входные-данные"-"Ещё"-"Сглаживание" ?

Установил параметр в 10, по логике должно брать среднее из 10 соседних значений (+-5) (линейно или более сложно используя вес).

У меня вот такая картинка выходит. Думаю что при "сглаживании" в новом графике не должны превышаться исходные реальные максимальные значения.

Красная линия - исходные данные.

Зелёная линия - те же данные со сглаживанием "10". `
Очень интересно:

Используется вот этот алгоритм. https://github.com/ioBroker/ioBroker.fl … ta.js#L713

Сейчас вижу ошибку, но она возможна только если попадаются null значения.

Обновил на гите алгоритм. `
Спасибо, вроде заработало когда поставил "Игнорировать null".

VictorS

~~@Bluefox:~~

А так? `

немного не так. сдвиг оси x в один день с одновременным изменением интервала выборки вместо now -> end of day приводит к тому что показываются данные за предыдущие сутки. никакого вычитания значений не происходит.

Bluefox

~~@VictorS:~~

~~@Bluefox:~~

А так? `

немного не так. сдвиг оси x в один день с одновременным изменением интервала выборки вместо now -> end of day приводит к тому что показываются данные за предыдущие сутки. никакого вычитания значений не происходит. `
вычитания??

Это же не excel :)

Тебе нужны influxdb + graphite. Я именно из-за этого встроил influxDB.

VictorS

~~@Bluefox:~~

~~@VictorS:~~

~~@Bluefox:~~

А так? `

немного не так. сдвиг оси x в один день с одновременным изменением интервала выборки вместо now -> end of day приводит к тому что показываются данные за предыдущие сутки. никакого вычитания значений не происходит. `
вычитания??

Это же не excel :)

Тебе нужны influxdb + graphite. Я именно из-за этого встроил influxDB. `

ну под вычитанием я имел ввиду разницу между показаниями начала суток предудущего и текущего дня. Иначе в чем смысл твокго совета сдвинуть X-axis на сутки?

насчет influxdb + graphite - ты имел ввиду наверное influxdb + grafana? ибо и influxdb и graphite - это по сути time series DB, плюс в последней есть инструменты по визуализации..

очень интересные инструменты, надо изучить… кстати я так понимаю что именно DB подобные influxdb идеальная база для IOB, так как в любой db он хранит информацию как time series. ее вообще по умолчанию включить можно было бы...

кстати, а flot будет тянуть данные из influxdb без проблем?

Bluefox

~~@VictorS:~~

~~@Bluefox:~~

~~@VictorS:~~

немного не так. сдвиг оси x в один день с одновременным изменением интервала выборки вместо now -> end of day приводит к тому что показываются данные за предыдущие сутки. никакого вычитания значений не происходит. `
вычитания??

Это же не excel :)

Тебе нужны influxdb + graphite. Я именно из-за этого встроил influxDB. `

ну под вычитанием я имел ввиду разницу между показаниями начала суток предудущего и текущего дня. Иначе в чем смысл твокго совета сдвинуть X-axis на сутки?

насчет influxdb + graphite - ты имел ввиду наверное influxdb + grafana? ибо и influxdb и graphite - это по сути time series DB, плюс в последней есть инструменты по визуализации..

очень интересные инструменты, надо изучить… кстати я так понимаю что именно DB подобные influxdb идеальная база для IOB, так как в любой db он хранит информацию как time series. ее вообще по умолчанию включить можно было бы...

кстати, а flot будет тянуть данные из influxdb без проблем? `
я имел ввиду именно graphite. Т.к. grafana такого не может. (Не могла 2 года назад. Сейчас не знаю).

InfluxDB надо инсталлировать. Ты бы знал, сколько проблем просто с node.js. Люди ничего не могут и не хотят знать. А ты предлагаешь их заставить ставить ещё базу данных :?

Freemen

Почему то не могу построить график данных с точностью до сотых. В sql данные точность до сотых, на графике целые. Где эти настройки? Описание драйвера и его настройка прочитал, но есть ли такая настройка и где она так и не понял :cry: . Тыкните носом плиз..

Bluefox

~~@Freemen:~~

Почему то не могу построить график данных с точностью до сотых. В sql данные точность до сотых, на графике целые. Где эти настройки? Описание драйвера и его настройка прочитал, но есть ли такая настройка и где она так и не понял :cry: . Тыкните носом плиз.. `
48_2017-03-25_07_02_41-flot_edit.png

Freemen

~~@Bluefox:~~

~~@Freemen:~~

Почему то не могу построить график данных с точностью до сотых. В sql данные точность до сотых, на графике целые. Где эти настройки? Описание драйвера и его настройка прочитал, но есть ли такая настройка и где она так и не понял :cry: . Тыкните носом плиз..
Самое первое что делал, так это. Не помогает.

Bluefox

~~@Freemen:~~

~~@Bluefox:~~

~~@Freemen:~~

Почему то не могу построить график данных с точностью до сотых. В sql данные точность до сотых, на графике целые. Где эти настройки? Описание драйвера и его настройка прочитал, но есть ли такая настройка и где она так и не понял :cry: . Тыкните носом плиз..
Самое первое что делал, так это. Не помогает. `
А что ты там написал?
48_2017-03-25_16_21_26-flot_edit.png

Freemen

Ну поставил, 2 знака после запятой :roll:. Если есть время можно посмотреть:

https://drive.google.com/open?id=0BwZuz … zN6azBiS3M

На вэб страничке устройства графики рисуются с thingspeak.com. В брокере имею целочисленные показания

Bluefox

~~@Freemen:~~

Ну поставил, 2 знака после запятой :roll:. Если есть время можно посмотреть:

https://drive.google.com/open?id=0BwZuz … zN6azBiS3M

На вэб страничке устройства графики рисуются с thingspeak.com. В брокере имею целочисленные показания `
У тебя значения "25._75". Там пробел в значении и поэтому оно интерпретируется, как

parseFloat("25. 75") => 25.0

Freemen

~~@Bluefox:~~

~~@Freemen:~~

Ну поставил, 2 знака после запятой :roll:. Если есть время можно посмотреть:

https://drive.google.com/open?id=0BwZuz … zN6azBiS3M

На вэб страничке устройства графики рисуются с thingspeak.com. В брокере имею целочисленные показания `
У тебя значения "25._75". Там пробел в значении и поэтому оно интерпретируется, как

parseFloat("25. 75") => 25.0 `
Да действительно. Огромное спасибо. А то на голове волос почти не осталось, так я в другом месте два дня рвал :lol: .

Все из за sprintf(). Пришлось ее применить потому что думаю всем известна проблема форматного вывода float в ESP :cry:.

yopopol

всем привет.

подскажите пожалуйста как сделать свой график для каждой переменной?

есть три переменные,приходят по MQTT. Но у меня получается только все три воткнуть на один график,переплетение линий и воспринимается не очень нормально.

как сделать,чтобы для каждой переменной был собственный график (поле с графиком)?

bondrogeen

~~@yopopol:~~

всем привет.

подскажите пожалуйста как сделать свой график для каждой переменной?

есть три переменные,приходят по MQTT. Но у меня получается только все три воткнуть на один график,переплетение линий и воспринимается не очень нормально.

как сделать,чтобы для каждой переменной был собственный график (поле с графиком)? `

Так и делай для каждой переменной свой график.

ссылка генерируется с параметрами своя.

Потом просто копируешь ссылку и вставляешь в vis

yopopol

только что разобрался сам )))

но спасибо за беспокойство )

з.ы. еще раз убеждаюсь,что тут очень отзывчивые и понимающие люди

andrey99986

Для масштабирования графика можно использовать колесико мыши, а можно задать фиксированные периоды.

Пример-инструкция как сделать фиксированные периоды для управления масштабированием графика (для FAQ/HowTo):

1.Создаём в Админке-Скриптах в любом скрипте объект :

createState("Список временных периодов для термостата №1",60);

2. Копируем url из строки url драйвера flot в текстовый редактор.

Строка будет подобно такой:

http://1.1.1.1:8082/flot/index.html?l%5B0%5D%5Bid%5D=megadd.0.p10_P10_-_unknown&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=minmax&l%5B0%5D%5Bcolor%5D=%23FF0000&l%5B0%5D%5Bthickness%5D=3&l%5B0%5D%5Bshadowsize%5D=3&l%5B0%5D%5BignoreNull%5D=true&l%5B0%5D%5BafterComma%5D=2&timeType=relative&relativeEnd=now&range=180&aggregateType=step&aggregateSpan=300&hoverDetail=true&useComma=false&zoom=true&noedit=true&animation=0&live=30&noBorder=noborder&timeFormat=%25H%3A%25M+%3Cbr%3E+%25d.%25m

2. В текстовом редакторе находим аргумент "range=" и меняем числовое значение на {javascript.0.Список временных периодов для термостата №1}

Должно получиться в итоге:

http://1.1.1.1:8082/flot/index.html?l%5B0%5D%5Bid%5D=megadd.0.p10_P10_-_unknown&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=minmax&l%5B0%5D%5Bcolor%5D=%23FF0000&l%5B0%5D%5Bthickness%5D=3&l%5B0%5D%5Bshadowsize%5D=3&l%5B0%5D%5BignoreNull%5D=true&l%5B0%5D%5BafterComma%5D=2&timeType=relative&relativeEnd=now&range={javascript.0.Список временных периодов для термостата №1}&aggregateType=step&aggregateSpan=300&hoverDetail=true&useComma=false&zoom=true&noedit=true&animation=0&live=30&noBorder=noborder&timeFormat=%25H%3A%25M+%3Cbr%3E+%25d.%25m

3. В редакторе VIS в свойства элемента basic-Iframe вставляем в поле Адрес часть урла из модифицированной строки, начиная с "/flot..":

/flot/index.html?l%5B0%5D%5Bid%5D=megadd.0.p10_P10_-_unknown&l%5B0%5D%5Binstance%5D=sql.0&l%5B0%5D%5Boffset%5D=0&l%5B0%5D%5Baggregate%5D=minmax&l%5B0%5D%5Bcolor%5D=%23FF0000&l%5B0%5D%5Bthickness%5D=3&l%5B0%5D%5Bshadowsize%5D=3&l%5B0%5D%5BignoreNull%5D=true&l%5B0%5D%5BafterComma%5D=2&timeType=relative&relativeEnd=now&range={javascript.0.Список временных периодов для термостата №1}&aggregateType=step&aggregateSpan=300&hoverDetail=true&useComma=false&zoom=true&noedit=true&animation=0&live=30&noBorder=noborder&timeFormat=%25H%3A%25M+%3Cbr%3E+%25d.%25m

При этом график отображаться не будет, это нормально. Он будет отображаться при просмотре страницы.

4. Рядом с графиком создадим элемент "jqui- Select ValueList"

В свойствах ID Объекта выбираем объект : "javascript.0.Список временных периодов для термостата №1"

В "значениях" (минуты) : 60;1440;10080;44640

В "Тексты" : час;сутки;неделя;месяц

5. Готово, можно смотреть в просмотре.
1444_flot1.png
1444_flot2.png

Community Forum

NEWS

Драйвер Flot

Support us

820

32.4k

81.5k

1.3m