"Живые" графики нужна помощь.

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

denis
Сообщения: 279
Зарегистрирован: Сб ноя 24, 2012 11:47 am
Благодарил (а): 25 раз
Поблагодарили: 28 раз

Re: "Живые" графики нужна помощь.

Сообщение denis » Ср июн 10, 2015 9:26 am

PAV писал(а):denis. A можете написать, как прикрутить к МЖД вот этот step line. Примеры готовые я худо-бедно переношу, а вот чтобы с сайта пример использовать - уже не пойму как.
все просто. добавляете в раздел кода графиков - series этот параметр step: true (кусок кода взял из API!! не из кода этой ветки) найдите такой же кусок в Вашем коде и все получится.

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

            series: [{
                name: 'AAPL Stock Price',
                data: data,
                step: true,
                tooltip: {
                    valueDecimals: 2
                }
            }]
 
PAV
Сообщения: 886
Зарегистрирован: Пт дек 06, 2013 11:30 am
Откуда: Москва
Благодарил (а): 57 раз
Поблагодарили: 85 раз

Re: "Живые" графики нужна помощь.

Сообщение PAV » Ср июн 10, 2015 10:07 am

Спасибо, сработало.
А можете подсказать, вот если я хочу взять произвольный график highchart или highstock с сайта, как мне его прикрутить к МЖД?
Поменять путь к скриптам и в качестве источника указать jsonp.php? Не работает.
Что еще нужно сделать, чтобы прикрутить любой график с сайта highcharts?

Посоветуйте, пожалуйста, какой график применить, чтобы хорошо смотрелось отображение датчиков движения, т.е. данные через неравные промежутки времени?
denis
Сообщения: 279
Зарегистрирован: Сб ноя 24, 2012 11:47 am
Благодарил (а): 25 раз
Поблагодарили: 28 раз

Re: "Живые" графики нужна помощь.

Сообщение denis » Ср июн 10, 2015 10:20 am

собственно должно работать "Поменять путь к скриптам и в качестве источника указать jsonp.php?", там только обычно проблема в том, что иногда библиотеки в МДМ не отражают актуального состояния библиотек highcharts - поэтому надо скачивать, обновлять, тут не помогу давно этим не занимался.
насчет датчиков движения ничего подходящего не припомню, сам хотел бы такое для датчика расхода воды (расход 1 раз в неделю). Хотя highstock (а не highchart) и не отражает пропорциональной шкалы по факту.
За это сообщение автора denis поблагодарил:
PAV (Ср июн 10, 2015 12:11 pm)
Рейтинг: 1.23%
kos
Сообщения: 5
Зарегистрирован: Вт июл 14, 2015 2:49 pm
Откуда: Пенза
Благодарил (а): 3 раза
Поблагодарили: 4 раза

Re: "Живые" графики нужна помощь.

Сообщение kos » Вт июл 21, 2015 5:16 pm

раз уж структуру json мы пересобираем, добавил в сценарий удаление пустых и заведомо неправильных значений:
В начале сценария:
СпойлерПоказать

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

// Этот сценарий используем только для температуры по тому что удаляем большие значения
// Укажите предельное значение температуры, больше которых значения будут затираться предыдущими
$max=140;
// Среднее значение температуры на случай если первое значение отсутствует
$sprev=10;
Цикл foreach меняем на такой:
СпойлерПоказать

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

 foreach($arr_s as $s) {
   if ($f) $st .=',';
   if ($s['VALUE'] == '' or abs($s['VALUE'])>$max)
      $st .= '['.$s['ADDED'].'000,'.$sprev.']';
   else {
      $st .= '['.$s['ADDED'].'000,'.$s['VALUE'].']';
      $sprev=$s['VALUE'];
        }
   $f=1;
 }
Bagir, предлагаю в тему Строим графики Highstock это добавить если нет замечаний.
PAV
Сообщения: 886
Зарегистрирован: Пт дек 06, 2013 11:30 am
Откуда: Москва
Благодарил (а): 57 раз
Поблагодарили: 85 раз

Re: "Живые" графики нужна помощь.

Сообщение PAV » Ср сен 23, 2015 12:56 pm

Конкретики, плиз, где конкретно менять?
Sturgeon
Сообщения: 36
Зарегистрирован: Вт ноя 17, 2015 5:52 pm
Благодарил (а): 14 раз
Поблагодарили: 7 раз

Re: "Живые" графики нужна помощь.

Сообщение Sturgeon » Вт мар 22, 2016 2:40 pm

Приветствую участников форума!
Прошу помощи с пониманием и установкой графиков Highchart. Собственно график Highstock мне прикрутить удалось. С этим я вроде помаленьку разобрался. Теперь настала очередь прикрутить к нему собственные данные, а не демонстрационные из интернета. Вот на этом я уже споткнулся. Реальных данных у меня пока нет, тренируюсь на тестовой придуманной базе данных. Не могу заставить JSON отображать данные. Вернее, даже не знаю как его запустить. Объектов то у меня нет. И набирание в адресной строке http://localhost/jsonp.php?name=OfficeRoom.Temperature мне ничего естественно не дает. Подскажите, пожалуйста, что и как переделать в jsonp.php, чтобы он мог работать с моей базой? База данных "test", таблица "water". В ней данные занесены в таком виде как на приложенном рисунке. Возможно, стоит использовать более другой формат сохранения данных?
ПОковырявшись накидал такое:

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

$r=mysql_query ("SELECT * FROM water");
$data='';
$data.="(["."<BR/>";
while ($row=mysql_fetch_array($r))
{
$data.="[";
$data.= $row['Date'].",";
$data.= $row['Value']."]".","."<BR/>";
}
$data.="])";
echo $data; 
print json_encode($data, JSON_NUMERIC_CHECK);
 
На экран выводится массив так как и предписано на 15 странице данного топика.
Вложения
Безымянный.png
Безымянный.png (63.45 КБ) 8730 просмотров
Sturgeon
Сообщения: 36
Зарегистрирован: Вт ноя 17, 2015 5:52 pm
Благодарил (а): 14 раз
Поблагодарили: 7 раз

Re: "Живые" графики нужна помощь.

Сообщение Sturgeon » Вт мар 22, 2016 5:46 pm

Собственно data.php

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

<?php
$con = mysql_connect("localhost","root","");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("test", $con);



$result = mysql_query("SELECT * FROM water ORDER BY Date") or die(mysql_error());

$data = array();
while ($row = mysql_fetch_assoc($result)) {
   $data[] = array((float)$row['Date'],(float)$row['Value']);
}

// print it
header('Content-Type: text/javascript');

echo json_encode($data);

mysql_close($con);
?>
код страницы

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

<script src="../highstock/js/highstock.js"></script>
<script src="../highstock/js/modules/exporting.js"></script>
<script src="../highstock/js/themes/sand-signika.js"></script>


<div style="width: 800px; height: 500px; margin: 0 auto">
    <div id="container" style="height: 400px; min-width: 310px"></div>
</div>


<script>
   // $.getJSON("../highcharts/data.php", function (data)
$(function () {

    $.getJSON("../highcharts/data.php", function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {


            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'Value',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

});

  </script>
Результат
Вложения
chart.jpeg
chart.jpeg (13.7 КБ) 8712 просмотров
-[a.v.p]-
Сообщения: 2
Зарегистрирован: Пн окт 24, 2016 1:49 pm
Откуда: Брест, Беларусь
Благодарил (а): 0
Поблагодарили: 1 раз

Re: "Живые" графики нужна помощь.

Сообщение -[a.v.p]- » Пн окт 31, 2016 8:54 pm

Если кому интересно, то прикрутил автообновление графика. Файлы графика последние, с сайта производителя.

сценарий jconhs-new:
СпойлерПоказать

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

// Получить имя и проверить
 if ( isset($params['name'])  ) { $name = $params['name']; } else { returm; }
 $last_id = isset($params['lastid']) ? (int)$params['lastid'] : 0;
// Разбить на объект и свойство
 $name = explode('.', $name);

 // Получить объект по имени
 $obj=getObject($name[0]); 
 // Получить id свойства
 $prop_id=$obj->getPropertyByName($name[1], $obj->class_id, $obj->id);
 // Получаем VALUE_ID для следующей таблицы
 $pvalue=SQLSelectOne("SELECT * FROM pvalues WHERE PROPERTY_ID='".$prop_id."' AND OBJECT_ID='".$obj->id."'");
 // Получаем таблицу
 $sql = "SELECT ID, UNIX_TIMESTAMP(ADDED) as ADDED, VALUE FROM phistory WHERE VALUE_ID='$pvalue[ID] '";
 if ($last_id>0){
    $sql .= " and id>$last_id";
  }
 $sql .= "  ORDER BY ADDED ";
 $arr_s = SQLSelect($sql);

  $data = [];

  header('Content-Type: application/json');

  foreach ($arr_s as $row){
    $added = $row['ADDED'];
    $t = (float)($row['VALUE']);
    $data[] = [$added*1000, $t];
    $last_id = $row['ID'];
  }

  echo(json_encode([
    'last_id'=>$last_id,
    'data'=>$data
  ]));
сама страница :
СпойлерПоказать

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

<script type="text/javascript" src="../../highcharts_new/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../../highcharts-new/js/highstock.js"></script>
<script type="text/javascript">

$(function () {
    var seriesOptions = [],
        last_id = [],
        serData = [],
        now = 0,
         chart,
        seriesCounter = 0,
        names = ['улица','зал','спальня','столовая'], 
        sensornames = ['ESP00F8E1FC.dhtt1', 
                       'ESP00F8E1FC.bmpt',
                       '18:fe:34:9e:25:8e.temp',
                       '18:fe:34:a4:e1:a5.tmp1'];

    Highcharts.setOptions({
        lang: {
            months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль', 
                     'Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],

            shortMonths: ['Янв','Фев','Мар','Апр','Май','Июн','Июл', 
                          'Авг','Сен','Окт','Ноя','Дек'],

            weekdays: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],

            rangeSelectorZoom: 'Маcштаб',
            rangeSelectorFrom: 'От',
            rangeSelectorTo: 'До',
            thousandsSep: ' '
        },
        global: {
            useUTC: false
        }
    });

    function createChart() {
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                 zoomType: 'x',
                events: {
                    load: function () {
                        setInterval(function () {
                            updateChart();
                        }, 60000);
                    }
                 }
            },
            rangeSelector: {
                buttons: [
                    { type: 'hour',  count: 1,  text: '1h'  },
                    { type: 'hour',  count: 6,  text: '6h'  },
                    { type: 'hour',  count: 12, text: '12h' },
                    { type: 'day',   count: 1,  text: '1d'  },
                    { type: 'day',   count: 3,  text: '3d'  },
                    { type: 'week',  count: 1,  text: '1w'  },
                    { type: 'month', count: 1,  text: '1m'  },
                    { type: 'all', text: 'All' }],
                    selected: 1,
                    inputEnabled: false
            },
            title: { text : 'График температур в доме' },
            legend: { enabled : true,
                layout : 'horizontal',
                align : 'center',
                verticalAlign : 'top',
                borderWidth: 0,
                x : 0,
                y : 20 },
             xAxis : {
                ordinal: false,
                minRange: 3600 * 1000 // one hour
            },
            yAxis: {
                title: { text : 'Температура (°C)' }
            },
            series: seriesOptions
        });
        now = new Date().getTime();
        now -= now % 1000;
        for (i = 0; i < names.length; i++){
            len = chart.series[i].processedYData.length - 1;
            last = chart.series[i].processedYData[len];
            chart.series[i].addPoint([now,last], true, true);
//            alert(now + ' ' + last);
        };
    };

    $.each(names, function (i, name) {
        $.getJSON('/objects/?script=jconhs-new&name='+sensornames[i], function (data) {
            last_id[i] = data.last_id;
            seriesOptions[i] = {
                name: name,
                data: data.data,
                type: 'spline',
                marker: {
                    enabled: false,
                    radius: 3
                },
                shadow: true,
                tooltip: {
                    valueDecimals: 2
                }
            };
            seriesCounter += 1;
            if (seriesCounter === names.length) {
                createChart();
            };
        });
    });

    function updateChart() {
         now = 0;
         $.each(names, function (i) {
            $.getJSON('/objects/?script=jconhs-new&name=' + sensornames[i] + '&lastid=' + last_id[i], function (data_) {
                if (data_.data.length > 0){
                    last_id[i] = data_.last_id;
                        $.each(data_.data, function (idx, e) {
//                            chart.series[i].addPoint(e, true, true);
                            now = e[0];
                            serData[i] = e[1];
//                            alert('Date='+now+' value='+e[1]);
                        })
                } else {
                    len = chart.series[i].processedYData.length - 1;
                    serData[i] = chart.series[i].processedYData[len];
                }
                if (i == (names.length - 1)) {
                    updateChart_();
                }
            });
        });
    };

    function updateChart_() {
//        alert(now + ' ' + serData);
        if (now > 0){
            for (i = 0; i < serData.length; i++){
                chart.series[i].addPoint([now,serData[i]], true, true);
            }
        }
    }
});

</script>
<div id="container" style="height: 500px; min-width: 500px; margin: 0 auto"></div>
За это сообщение автора -[a.v.p]- поблагодарил:
Bagir (Сб апр 07, 2018 12:49 am)
Рейтинг: 1.23%
Аватара пользователя
Bagir
Сообщения: 1399
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 181 раз
Поблагодарили: 304 раза

Re: "Живые" графики нужна помощь.

Сообщение Bagir » Сб апр 07, 2018 12:57 am

Великолепная идея с передачей значения свойства lastid!

Посмотрите как я переделал получение id свойства с использованием штатной функции getHistoryValueId(). Ранее я не знал про нее, и поэтому добирался до нужного id с помощью sql запросов.

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

$pvalueid = getHistoryValueId($name);
// Получаем данные из таблицы истории
$arr_s = SQLSelect("SELECT UNIX_TIMESTAMP(ADDED) as ADDED, VALUE FROM phistory WHERE VALUE_ID='".$pvalueid."' ORDER BY ADDED,ID");
Windows XP, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Ответить