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

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

Модератор: immortal

Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

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

Сообщение Bagir » Чт окт 23, 2014 2:47 am

Вот что получилось. Завтра буду тестить оба способа на скорость. Да может что и поменяю. По первому впечатлению оба варианта работают быстро.

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

<?
/*
* Автор Казаков Сергей
* на форуме под ником Bagir
* благодарность denis на примеры
* ver 1.0
*/

 include_once("./config.php");
 include_once("./lib/loader.php");
 $session=new session("prj");
 $db=new mysql(DB_HOST, '', DB_USER, DB_PASSWORD, DB_NAME); // connecting to database
 include_once("./load_settings.php");
 if (!headers_sent()) {
  header ("HTTP/1.0: 200 OK\n");
  header ('Content-Type: text/html; charset=utf-8');
 }


 // Взять и проверить
 if ( isset($params['name'])  ) { $name = $params['name']; } else { returm; }
 // Разбить на объект и свойство
 $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."'");
 // Получаем таблицу
 $arr_s = SQLSelect("SELECT UNIX_TIMESTAMP(ADDED) as ADDED, VALUE FROM phistory WHERE VALUE_ID='".$pvalue['ID']."' ORDER BY ADDED");

 // Собрать структуру
 $st = '[';
 foreach($arr_s as $s){
   if ($f) { $st .=', '; }
   $st .= '['.$s['ADDED'].'000, '.$s['VALUE'].']' ;
   $f=1;
 }
 $st .= ']';

 // Ответ
 echo ($st);


 $session->save();
 $db->Disconnect(); // closing database connection
?>
Еще немного тестов и оформлю с комментариями для начинающих.
Неожиданно приятный сюрприз! На графике в легенде, где названия комнат, если кликнуть по любому из названий - график этой комнаты скрывается.
За это сообщение автора Bagir поблагодарил:
tsember (Пн мар 30, 2015 10:53 pm)
Рейтинг: 1.16%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

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

Сообщение Bagir » Чт окт 23, 2014 11:26 am

Народ! кто нибудь знает как следать выделение графика жной линией при наведении на его имя мышки как тут в примере Вероятно ответ кроется здесь Но может быть кто делал и знает что нужно добавить?
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
PAV
Сообщения: 949
Зарегистрирован: Пт дек 06, 2013 11:30 am
Откуда: Москва
Благодарил (а): 68 раз
Поблагодарили: 94 раза

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

Сообщение PAV » Чт окт 23, 2014 11:33 am

Вы только для остальных пишите, как этим пользоваться ;) Пример
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

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

Сообщение Bagir » Чт окт 23, 2014 11:36 am

Обязательно! Сегодня ближе к ночи выложу подробное описание. Хочется еще пару бантиков туда добавить. Вот этот бы пример сразу с выделением линии осилить. Уверен, что там все просто. Только инфы на русском маловато.
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

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

Сообщение Bagir » Чт окт 23, 2014 9:17 pm

Чем больше грызу эту тему, тем больше вопросов. И похоже, что все это будет переделано еще не раз. Ну да ладно. Давайте посмотрим на то, что уже есть и работает.
Запустить графики highcharts просто. С подсказкой это может каждый начинающий. Сейчас расскажу, что для этого надо сделать. Но в начале надо подумать, а для чего вообще они нам могут пригодиться. Развешивать их где попало наверное не стоит. Слишком они навороченные для этого. А вот разместить на "домашних страницах" очень даже можно. Весьма интересно смотрятся сразу несколько графиков температуры разных комнат. Можно видеть отклик на повышение температуры системы отопления и кондиционирования, и по этим данным принять требуемые меры. Например повесить половик :lol: на батарею, если при включении отопления эта комната всегда нагревается первая, а потом в ней становится жарко. Так же можно понять, в какой комнате всегда прохладнее или жарче, чем в других, и скорректировать работу отопительной системы. Еще будет полезно для общего контроля поступающих с датчиков данных. Этот пример сейчас подробно и рассмотрим.
Вот что у нас должно получиться в итогеПоказать
Изображение
Заходим в панель управления -> Настройка -> Домашние страницы -> Новая страница
Название - Климат
Тип - HTML Code
КодПоказать

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

<!DOCTYPE HTML>
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <title>Home Temperature</title>
          <script type="text/javascript" src="/highcharts/js/jquery-1.7.1.min.js"></script>
          <script type="text/javascript" src="/highcharts/js/highstock.js"></script>
          <script type="text/javascript" src="/highcharts/js/modules/exporting.js"></script>
          <script type="text/javascript" language="javascript">
                
                var cnt = 0, seriesOptions = [],  names = ['кухня', 'гостиная', 'спальня', 'холл', 'кабинет']; 
                sensornames = ['KitchenArea.Temperature', 
                                          'Livingroom.Temperature', 
                                          'Bedroom.Temperature',
                                          'HallArea.Temperature',
                                          'OfficeRoom.Temperature'];
                cnt = 0;
                $.each(names, function(i, name) {
                     url = '/highcharts.php?name='+sensornames[i]
                     //alert(url);
                     $.getJSON(url, function(data) {
                          seriesOptions[i] = {name: name,
                                                        data: data};
                          cnt++;
                          if (cnt == names.length) { createChart(); }
                     });
                });

                function createChart() {
                     window.chart = new Highcharts.StockChart({
                          chart : { renderTo: 'container', zoomType: 'xy' },   // разрешить зум по x и y
                          rangeSelector: {
                               buttons: [{ type: 'hour',    count: 1, text: '1h' },
                                              { type: 'day',     count: 1, text: '1d' },
                                              { type: 'day',     count: 2, text: '2d' },
                                              { type: 'week',   count: 1, text: '1w' },
                                              { type: 'month', count: 1, text: '1m' },
                                              { type: 'month', count: 6, text: '6m' },
                                              { type: 'year',    count: 1, text: '1y' },
                                              { type: 'all', text: 'All' }],
                               selected: 1  // Какая кнопка выбрана по умолчанию
                          },
                          title: { text : 'График температур'},
                          legend: { enabled : true,
                                         layout : 'horizontal',
                                         align : 'center',
                                         verticalAlign : 'top',
                                         x : 0,
                                         y : 20,
                                       },
                          xAxis: { maxZoom : 1 * 24 * 36000 },
                          yAxis: { title: { text: 'Температура (°C)' } },
                          series : seriesOptions
                     });
                }

           </script>
     </head>

     <body>
          <div id="container" style="height: 500px; min-width: 500px"></div>
     </body>
Пару слов по этому коду. Вам будет нужно поменять имена объектов на ваши, у которых данные пишутся в историю

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

               var cnt = 0, seriesOptions = [],  names = ['кухня', 'гостиная', 'спальня', 'холл', 'кабинет']; 
                sensornames = ['KitchenArea.Temperature', 
                                      'Livingroom.Temperature', 
                                      'Bedroom.Temperature',
                                      'HallArea.Temperature',
                                      'OfficeRoom.Temperature']; 
Массив names это имена линий на графике.
Массив sensornames это имена объектов.свойств с историей
Сколько имен - столько и объектов. Их может быть любое количество. Обязательно поправьте на свои!

buttons: [{
это кнопки периода отображения. Можно поменять на свои, если например ваш датчик содержит в истории всего месяц, то кнопки с периодом полгода и год вам просто не нужны.

<div id="container" style="height: 500px; min-width: 500px"></div>
ширина и высота графика.

Этому коду для построения графика потребуются значения свойств из вашей sql базы данных. Напрямую этот код не обращается к базе, а использует файл highcharts.php с указанием в параметре name имя Объект.Свойство
Другими словами, код на домашней странице спрашивает данные у файла highcharts.php, а он уже лезет в базу данных. Просто скопируйте файл из вложения в каталог с файлами МД (там, где лежат config.php и index.php)

Ну вот для начала это и все. Можно смотреть свои графики!
  • Создать домашнюю страницу с указанным кодом
  • Изменить массивы с названиями и именами Объект.Свойство на свои
  • Скопировать файл highcharts.php в корневой каталог сайта.
Вложения
highcharts ver1.0.zip
(1.46 КБ) 238 скачиваний
За это сообщение автора Bagir поблагодарили (всего 3):
PAV (Чт окт 23, 2014 9:53 pm) • Amarok (Сб окт 25, 2014 11:13 am) • tsember (Пн мар 30, 2015 11:52 pm)
Рейтинг: 3.49%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Vit
Сообщения: 867
Зарегистрирован: Вт янв 17, 2012 12:31 pm
Благодарил (а): 121 раз
Поблагодарили: 78 раз

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

Сообщение Vit » Пт окт 24, 2014 7:40 pm

Bagir писал(а): сделал все ...
пустая страница

Изображение
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

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

Сообщение Bagir » Пт окт 24, 2014 10:37 pm

хм. Странно. Надо проверить по шагам. Но раз уж так, будем проверять на обновленной версии. Думаю, что сегодня успею выложить.
А сейчас самое простое, это проверить возвращает ли данные http://localhost/highcharts.php?name=Of ... emperature
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

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

Сообщение Bagir » Сб окт 25, 2014 12:42 am

Ставим новую версию графиков.
Сразу надо уяснить, что Highcharts и Highstock разные штуки. У них разные js, и графики тоже разные. К тому же есть еще и Highmaps для карт. Кстати в нем интересный карта-график температуры.

Экспресс метод установки, если не очень хочется во все это вникать:
1. Скопировать все из содержимого архивов во вложениях в папку с файлами сайта.
2. Создать домашнюю страницу с кодом внизу этого поста, и заменить в нем в массивах names и sensornames имена графиков и Объектов.Свойств на свои. И да прибудет с вами сила!

Если не прокатило, то делаем по шагам проверяя работу каждого.
1. Скопировать содержимое архива highcharts.zip из вложения в папку с файлами сайта. Там она уже есть. Копировать с заменой файлов.
В папке highcharts запускаем файл sample3.htm (просто открываем его браузером). Если видим график, значит Highstock работает и можно начать прикручивать к МД
графикПоказать
Изображение
2. Копируем файл jsonp.php из вложения в папку с файлами сайта. Графики хотят получить JSON с данными, и в примерах лазают на свой сайт http://www.highcharts.com/samples/data/jsonp.php. Нам нужен свой такой источник данных. Файл jsonp.php пока что имеет только один параметр name, в котором нужно указать Объект.Свойство МД данные которого хранятся с историей. Набираем в браузере http://localhost/jsonp.php?name=OfficeRoom.Temperature указав свой объект, и если видим нечто подобное значит все отлично, и можем продолжить дальше.
Изображение

3. Заходим в панель управления -> Настройка -> Домашние страницы -> Новая страница
Название - Климат
Тип - HTML Code
Код копируем из файла примера index.htm который лежит в папке compare (то чего недавно смотрели в браузере)
Но тут уже надо кое что поменять. В конце кода есть две строки

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

<script src="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>
В них нужно поменять путь к папке js. Пишем так:

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

<script src="../../highcharts/js/highstock.js"></script>
<script src="../../highcharts/js/modules/exporting.js"></script>
Все! сохраняем и идем смотреть что получилось. Если мы видим график на домашней странице - эксперимент удался, и можно колдовать дальше.
Возвращаемся к коду и находим в самом начале строку

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Гугль это хорошо, но нам может потребоваться и автономная работа. Поэтому заменяем строку на

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

<script type="text/javascript" src="../../highcharts/js/jquery-1.8.2.min.js"></script>
Идем проверять. Не забудьте обновить (F5) страницу в браузере. Все осталось на месте? - Отлично.

4. Настраиваем код графика на работу с нашими данными. Укажем от какого объекта брать данные. Находим строку

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

names = ['MSFT', 'AAPL', 'GOOG'],
и меняем на две строки

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

names = ['это все моё!'],
sensornames = ['OfficeRoom.Temperature'];
Массив names это имена графиков. Массив sensornames - имена Объект.Свойств. Пока укажем только одно имя и свойств. Идем смотреть график.
Теперь переключим муть к файлу jsonp.php, чтобы график использовал наш файл. Ищем

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

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?',    function (data) {
Меняем на

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

$.getJSON('../../jsonp.php?name='+sensornames[i],    function (data) {
Обновляем страницу и если видим один график уже по своим данным - успех!
Теперь добавим несколько графиков. Будет выглядеть примерно так

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

        names = ['кухня', 'гостиная', 'спальня', 'холл', 'кабинет'], 
        sensornames = ['KitchenArea.Temperature', 
                                  'Livingroom.Temperature', 
                                  'Bedroom.Temperature',
                                  'HallArea.Temperature',
                                  'OfficeRoom.Temperature'];
Теперь хотелось бы немного оформить график. Добавить легенду, русские буквы, кнопки периода, название осей и т.д. Не буду расписывать все по пунктам. Смотрите код, и сверяйте чего нужно добавить. Или сделайте проще. Берите этот код за основу, и поправьте в нем имена графиков и Объект.Свойство в массивах names и sensornames на свои.
Окончательный вариант кодаПоказать

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

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highstock Example</title>

        <script type="text/javascript" src="../../highcharts/js/jquery-1.8.2.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">


$(function () {
    var seriesOptions = [],
          seriesCounter = 0,
          names = ['кухня', 'гостиная', 'спальня', 'холл', 'кабинет'], 
          sensornames = ['KitchenArea.Temperature', 
                                    'Livingroom.Temperature', 
                                    'Bedroom.Temperature',
                                    'HallArea.Temperature',
                                    'OfficeRoom.Temperature'];

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

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

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

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


    // create the chart when all data is loaded
    createChart = function () {
        $('#container').highcharts('StockChart', {

            rangeSelector: {
                buttons: [{ type: 'hour',    count: 1, text: '1h' },
                               { type: 'day',   count: 1, text: '1d' },
                               { type: 'day',   count: 2, text: '2d' },
                               { type: 'week',  count: 1, text: '1w' },
                               { type: 'month', count: 1, text: '1m' },
                               { type: 'month', count: 6, text: '6m' },
                               { type: 'year',  count: 1, text: '1y' },
                               { type: 'all', text: 'All' }],
                selected: 1  // Какая кнопка выбрана по умолчанию
            },
  
            title: { text : 'График температур в доме'},
            legend: { enabled : true,
                           layout : 'horizontal',
                           align : 'center',
                           verticalAlign : 'top',
                           borderWidth: 0,
                           x : 0,
                           y : 20 },
            xAxis: { maxZoom : 1 * 24 * 36000 },
            yAxis: { title: { text: 'Температура (°C)' } },

            plotOptions: {
                series: {
                    lineWidth: 1,
                    point: {
                        events: {
                            'click': function () {
                                if (this.series.data.length > 1) {
                                    this.remove();
                                }
                            }
                        }
                    }
                }
            },

            exporting: {
                enabled: false
            },

            series: seriesOptions
        });
    };

    $.each(names, function (i, name) {
        $.getJSON('../../jsonp.php?name='+sensornames[i]+'&callback=?', function (data) {

            seriesOptions[i] = {
                name: name,
                data: data
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });

});
        </script>
    </head>
    <body>
<script src="../../highcharts/js/highstock.js"></script>
<script src="../../highcharts/js/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>
    </body>
</html>
Ссылка для скачивания архивов с примерами http://www.highcharts.com/download Там целая гора различных примеров графиков. Все это можно использовать в МД.

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

ВНИМАНИЕ! При обновлении МД файлы в папке highcharts пока что еще будут изменены на старые версии!
Вложения
highcharts.zip
(912.02 КБ) 338 скачиваний
jsonp.zip
(1.89 КБ) 365 скачиваний
За это сообщение автора Bagir поблагодарили (всего 5):
sergejey (Вт окт 28, 2014 10:03 am) • mirsum (Пн дек 01, 2014 11:04 pm) • tsember (Пн мар 30, 2015 11:52 pm) • ABola (Вт янв 26, 2016 12:00 pm) • Sturgeon (Ср янв 27, 2016 2:11 pm)
Рейтинг: 5.81%
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Vit
Сообщения: 867
Зарегистрирован: Вт янв 17, 2012 12:31 pm
Благодарил (а): 121 раз
Поблагодарили: 78 раз

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

Сообщение Vit » Сб окт 25, 2014 7:58 am

сделал, не хотят работать

вот так проверил есть данные
СпойлерПоказать
Изображение
графиков нет
СпойлерПоказать
Изображение
код страницы
СпойлерПоказать
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>

<script type="text/javascript" src="/highstock/js/jquery-1.8.2.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">

$(function () {
var seriesOptions = [],
seriesCounter = 0,
names = ['улица', 'гостиная'],
sensornames = ['Chisinau.tempOutside',
'NooTemp0.temp'];


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

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

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

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


// create the chart when all data is loaded
createChart = function () {

$('#container').highcharts('StockChart', {
rangeSelector: {
buttons: [{ type: 'hour', count: 1, text: '1h' },
{ type: 'day', count: 1, text: '1d' },
{ type: 'day', count: 2, text: '2d' },
{ type: 'week', count: 1, text: '1w' },
{ type: 'month', count: 1, text: '1m' },
{ type: 'month', count: 6, text: '6m' },
{ type: 'year', count: 1, text: '1y' },
{ type: 'all', text: 'All' }],
selected: 1 }, // Какая кнопка выбрана по умолчанию
title: { text : 'График температур в доме'},
legend: { enabled : true,
layout : 'horizontal',
align : 'center',
verticalAlign : 'top',
x : 0,
y : 20 },
xAxis: { maxZoom : 1 * 24 * 36000 },
yAxis: { title: { text: 'Температура (°C)' } },

series: seriesOptions
});
};

$.each(names, function (i, name) {

$.getJSON('/jsonp.php?name='+sensornames, function (data) {

seriesOptions = {
name: name,
data: data
};

// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;

if (seriesCounter === names.length) {
createChart();
}
});
});
});
</script>
</head>
<body>
<script src="/highstock/js/highstock.js"></script>
<script src="/highstock/js/modules/exporting.js"></script>


<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
Аватара пользователя
Bagir
Сообщения: 1613
Зарегистрирован: Вт сен 17, 2013 6:46 pm
Откуда: Ярославская область город Углич
Благодарил (а): 212 раз
Поблагодарили: 374 раза

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

Сообщение Bagir » Сб окт 25, 2014 9:38 am

Да чтож такое то. Будет разбираться. Мой jsonp.php отрабатывает. Это хорошо. Дальше Надо проверить по шагам работу графиков. Независимо от МД, запускаем в браузере файлы index.htm Этот пример лежит в highstock/examples/compare Это вторая часть пункта 1 поста выше. Смотрим результат. Если он есть, приступаем к пункту 3.
Windows 10, HTTP, MegaD, Z-Wave, 1-Wire, CONNECT
Ответить