[Модуль] Charts (charts)

Разработка дополнительных модулей, подключение различных приложений.

Модератор: immortal

Аватара пользователя
xor
Сообщения: 1934
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 266 раз
Поблагодарили: 600 раз

Re: Модуль Charts

Сообщение xor » Ср окт 26, 2016 12:04 am

А у меня минус слитно, но с десятичной точкой. Выводится нормально.
-3.2 -1.0
Может, к такому виду привести? Добавить '.0' и посмотреть?
Zubkov
Сообщения: 35
Зарегистрирован: Вт сен 13, 2016 8:43 pm
Благодарил (а): 9 раз
Поблагодарили: 6 раз

Re: Модуль Charts

Сообщение Zubkov » Ср окт 26, 2016 10:40 am

xor писал(а):А у меня минус слитно, но с десятичной точкой. Выводится нормально.
-3.2 -1.0
Может, к такому виду привести? Добавить '.0' и посмотреть?
Попробовал с точкой... не помогло... причем везде норм отображается, кроме графиков
Вложения
2.JPG
на информере отображается с минусом... пока делал скрин, инфа уже обновилась без точки с 0
2.JPG (28.5 КБ) 9643 просмотра
1.JPG
все ночные температуры были отрицаетльными
1.JPG (62.68 КБ) 9643 просмотра
Аватара пользователя
xor
Сообщения: 1934
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 266 раз
Поблагодарили: 600 раз

Re: Модуль Charts

Сообщение xor » Ср окт 26, 2016 6:48 pm

Как-то поломались графики, не знаю, отчего. Потом ещё какая-то ошибка была. В итоге, снес все, поставил заново. Всё заработало. Но это не совет, а наблюдение.

Отправлено с моего Nexus 5 через Tapatalk
Dimkas
Сообщения: 48
Зарегистрирован: Пн сен 14, 2015 1:55 pm
Благодарил (а): 7 раз
Поблагодарили: 25 раз

Re: Модуль Charts

Сообщение Dimkas » Вт ноя 01, 2016 3:15 am

Никак не разберусь, у меня отображает параметры только за последнюю минуту. Как уменьшить масштаб, или выбрать час/два/день/месяц и т.п.?
Помогло: https://www.youtube.com/watch?v=P70l5nx ... e=youtu.be
Блин, вот если не следишь за новостями, такой гемор получаешь...
Вот этот вопрос всё-же остался: Как уменьшить масштаб графика, или выбрать час/два/день/месяц и т.п.?
masster_alex
Сообщения: 31
Зарегистрирован: Пн апр 18, 2016 6:01 pm
Благодарил (а): 1 раз
Поблагодарили: 1 раз

Re: Модуль Charts

Сообщение masster_alex » Чт ноя 03, 2016 3:47 pm

Dimkas писал(а):Никак не разберусь, у меня отображает параметры только за последнюю минуту. Как уменьшить масштаб, или выбрать час/два/день/месяц и т.п.?
Помогло: https://www.youtube.com/watch?v=P70l5nx ... e=youtu.be
Блин, вот если не следишь за новостями, такой гемор получаешь...
Вот этот вопрос всё-же остался: Как уменьшить масштаб графика, или выбрать час/два/день/месяц и т.п.?
Это выбирается в charts->общие->период.
Масштаб меняется например: Когда ты вставляешь готовый график куда либо [#module name="charts" id="7" width="100%" height="400" interval="3600"#] тут все и меняется! width-это ширина в процентах, height-высота в пикселях. Вроде так.
Sergey2055
Сообщения: 73
Зарегистрирован: Ср авг 31, 2016 7:54 am
Благодарил (а): 12 раз
Поблагодарили: 1 раз

Re: Модуль Charts

Сообщение Sergey2055 » Чт ноя 10, 2016 9:59 pm

Всем привет. Господа подскажите как настроить верхний предел графика прописал так min: 0, max: 50 нижний нормуль а верхний как попало что я не так делаю.
I_I_Imonder
Сообщения: 256
Зарегистрирован: Сб янв 11, 2014 2:54 pm
Благодарил (а): 12 раз
Поблагодарили: 14 раз

Re: Модуль Charts

Сообщение I_I_Imonder » Ср дек 14, 2016 3:51 pm

Друзья, поведайте как или может кто-то возьмется, хотелось бы добавить парочку индикаторов в модуль?

вот таких
Вложения
индикатор.jpg
индикатор.jpg (64.02 КБ) 9159 просмотров
Аватара пользователя
xor
Сообщения: 1934
Зарегистрирован: Сб ноя 22, 2014 8:45 pm
Благодарил (а): 266 раз
Поблагодарили: 600 раз

Re: Модуль Charts

Сообщение xor » Ср дек 14, 2016 11:20 pm

Обновлено 10/01/2017

У меня сделано так:


Использовались контролы SteelSeries
Код страницы - добавил обновлениеПоказать

Код: Выделить всё

<body onload="init()">
<table width="100%" border="0">
<tr> 
<td width="20%" >
Часы 
</td>
<td width="20%" >
Температура Дом
</td>
<td width="60%" >
Температура Улица
</td> 
</tr>
 <tr> 
<td width="20%" >
<canvas id="canvasClock1" width="201" height="201"></canvas> 
</td>
<td width="20%" >
<canvas id="canvasTin" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasTout" width="201" height="201"></canvas>
</td> 
</tr>
<tr> 
<td width="20%" >
Ветер, направление 
</td>
<td width="20%" >
Ветер, скорость
</td>
<td width="60%" >
Давление
</td> 
</tr>

 <tr> 
<td width="20%" >
<canvas id="canvasWindDir1" width="201" height="201"></canvas>
</td>
<td width="20%" >
<canvas id="canvasWindSpeed" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasRadialPress" width="201" height="201"></canvas>
</td> 
</tr> 
</table>
 

 
<script>
    var scroll = false;
    var RadialTin;
    var RadialTout;
    var windDir1;
    var windSpeed;
    var RadialPress;
    var odometer1, n = 999997.7;
    function init() {
        // Initialzing gauge
         // Define some sections
        var sections = [steelseries.Section(-15, 15, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(15, 25, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(-30, -15, 'rgba(220, 220, 0, 0.3)'),
                        steelseries.Section(25, 30, 'rgba(220, 220, 0, 0.3)') ],

            // Define one area
            areas = [steelseries.Section(30, 40, 'rgba(220, 0, 0, 0.3)'),
                     steelseries.Section(-40, -30, 'rgba(220, 0, 0, 0.3)'),],

            sect_pr  = [steelseries.Section(745, 755, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(735, 745, 'rgba(220, 220, 0, 0.3)'),
                        steelseries.Section(755, 775, 'rgba(220, 220, 0, 0.3)') ],

            areas_pr = [steelseries.Section(700, 735, 'rgba(220, 0, 0, 0.3)'),
                        steelseries.Section(775, 800, 'rgba(220, 0, 0, 0.3)'),],

         clock1 = new steelseries.Clock('canvasClock1', {
                            width: 201,
                            height: 201
                            });

        windDir1 = new steelseries.WindDirection('canvasWindDir1', {
                            size: 201,
                            trendVisible: true,
                            lcdVisible: true
                            });
        RadialTin = new steelseries.Radial('canvasTin', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            minValue:-30,
                            maxValue:30,
                            titleString: "Температура",
                            unitString: "Градусы",
                            threshold: 25,
                            lcdVisible: true
                        });
        RadialTout = new steelseries.Radial('canvasTout', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sections,
                            area: areas,
                            minValue:-40,
                            maxValue:40,
                            titleString: "Температура",
                            unitString: "Градусы",
                            threshold: 25,
                            lcdVisible: true
                        });
        windSpeed = new steelseries.Radial('canvasWindSpeed', {
                            gaugeType: steelseries.GaugeType.TYPE2,
                            size: 201,
                            //section: sections,
                            //area: areas,
                            minValue: 0,
                            maxValue: 20,
                            titleString: "Скорость ветра",
                            unitString: "м/с",
                            threshold: 5,
                            lcdVisible: true
                        });
        RadialPress = new steelseries.Radial('canvasRadialPress', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 201,
                            section: sect_pr,
                            area: areas_pr,
                            minValue:700,
                            maxValue:800,
                            titleString: "Атм давление",
                            unitString: "мм рт ст",
                            threshold: 765,
                            lcdVisible: true
                        });
       clock1.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       windDir1.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialTout.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialTin.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       windSpeed.setBackgroundColor(steelseries.BackgroundColor.WHITE);
       RadialPress.setBackgroundColor(steelseries.BackgroundColor.WHITE);

        // Start the update
        setInterval(function(){ setDirValue(windDir1); }, 3000);
        setInterval(function(){ live_upd("/pChart/?op=value&p=weather_my.temp", RadialTout); },6000);
        setInterval(function(){ live_upd("/pChart/?op=value&p=ws.tempInside", RadialTin); },7000);
        setInterval(function(){ live_upd("/pChart/?op=value&p=ws.windLatest", windSpeed);}, 1500);
        setInterval(function(){ live_upd("/pChart/?op=value&p=weather_my.pressure", RadialPress); },12000);

}
    function setDirValue(gauge) {
             var url="/pChart/?op=value&p=ws.windBearing";
             $.ajax({
             url: url,
             }).done(function(data) { 
              if (data!='') {gauge.setValueAnimatedLatest(parseFloat(data));}
             }); 
             url="/pChart/?op=value&p=ws.windavgBearing";
              $.ajax({
             url: url,
             }).done(function(data) { 
              if (data!='') {gauge.setValueAnimatedAverage(parseFloat(data));}
             });
    }
    function live_upd(url,gauge) {
             $.ajax({
             url: url,
             }).done(function(data) { 
              if (data!='') {gauge.setValueAnimated(parseFloat(data));}
             });
     }



</script>

 
<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
 </body>



Папка в архиве - ее распаковать в htdocs
На всякий случай - у меня Виндовс.
Вложения
2017-01-10_21-34-35.png
2017-01-10_21-34-35.png (194.68 КБ) 7637 просмотров
SteelSeries.zip
(257.27 КБ) 554 скачивания
Последний раз редактировалось xor Вт май 09, 2017 10:20 pm, всего редактировалось 4 раза.
За это сообщение автора xor поблагодарили (всего 7):
serghei (Чт дек 15, 2016 11:16 am) • samum (Чт дек 15, 2016 1:58 pm) • lanket (Чт дек 15, 2016 4:57 pm) • ipz (Пн май 08, 2017 1:36 am) • Lisenok425 (Чт фев 28, 2019 5:46 pm) • Murat (Вс май 26, 2019 5:17 pm) • astotskiy (Пт авг 21, 2020 12:34 am)
Рейтинг: 8.24%
Аватара пользователя
Amarok
Сообщения: 1425
Зарегистрирован: Пт дек 14, 2012 12:24 pm
Откуда: Россия, Нижняя Тура
Благодарил (а): 459 раз
Поблагодарили: 126 раз
Контактная информация:

Re: Модуль Charts

Сообщение Amarok » Чт дек 15, 2016 6:56 am

А на сцены?
Алиска живёт на Ubuntu Server 14.04.3 LTS
connect, группа в Telegram, Яндекс.Деньги для благодарностей за помощь: 41001355945165
serghei
Сообщения: 2575
Зарегистрирован: Пт ноя 06, 2015 10:22 am
Откуда: Кишинёв
Благодарил (а): 303 раза
Поблагодарили: 282 раза

Re: Модуль Charts

Сообщение serghei » Чт дек 15, 2016 11:18 am

Шикарная коллекция! Видел её на каком то сайте, но скачать не мог. Не знаю как все устроено в МД, но попробую вставить в АМС.
AMS : ESP32 + NRF24 + 1Wire-I2C мост DS2482 + счетчик DS2423 + сеть MySensors + редактирование страниц в браузере + Upload по воздуху + SPIFFS
Ответить