Печать страницы - Модуль Графического отображения загрузки канала

Название: Модуль Графического отображения загрузки канала
Отправлено: Andrey Zentavr от 09 Мая 2012, 18:33:22

Навеяно этой темой от Efendy (http://forum.nodeny.com.ua/index.php?topic=1901.0)
Накидал за выходные модуль клиентской статистики который показывает загрузку канала клиента в виде графика.
Использовал библиотеку highcharts + jquery.

Смотрится это примерно вот так:
(http://forum.nodeny.com.ua/index.php?action=dlattach;topic=1907.0;attach=1532;image)

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: smallcms от 09 Мая 2012, 19:44:05

Очень симпатично выглядит! Как плюс этому делу можно отметить независимость от инторнетов и всяких левых (а значит и ненужных) гугл-апи. :)
За открытый код отдельное спасибо.

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Andrey Zentavr от 09 Мая 2012, 23:56:43

Цитата: smallcms от 09 Мая 2012, 19:44:05

Можно закинуть в репу чтоль :)

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: smallcms от 10 Мая 2012, 02:55:38

Цитата: Andrey Zentavr от 09 Мая 2012, 23:56:43

Можно закинуть в репу чтоль :)

Готово. Пусть будет на виду. )
Добавил от себя инструкцию для новичков.

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: poxy. от 10 Мая 2012, 12:14:58

Спасибо, + в карму :)

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Efendy от 10 Мая 2012, 13:36:01

Кстати, неплохо бы сделать сравнение графиков для разных дней, как я реализовал в 52й ветке. Подсказываю как это сделать: нужно в данных формировать время не на заданный день, а на 1 января 1970, а в графике показывать только время, см. прикрепление.

Код:

# все графики условно будут от 1 января 1970 чтобы разные дни накладывались друг на друга как один
my $gmtime = timegm(@{localtime($time)}[0..2],1,0,0);

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

Как я реализовал одновременный подсчет графика? На самом деле, я добавил несколько гиперссылок "график 1", "график 2" и т.д. При нажатии на ссылку "график 1" формируются данные графика и записываются в БД с идентификатором 1. Затем идет редирект на скрипт, который все извлекает и формирует общий график по всем данным.

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Andrey Zentavr от 10 Мая 2012, 13:55:56

Цитата: Efendy от 10 Мая 2012, 13:36:01

Код:

# все графики условно будут от 1 января 1970 чтобы разные дни накладывались друг на друга как один
my $gmtime = timegm(@{localtime($time)}[0..2],1,0,0);

Это уже на следующих выходных посмотрим.
Я тут активно готовлюсь к посещению Rock-Am-Ring (http://www.rock-am-ring.com) - 29го мая самолёт на германию :)

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Efendy от 10 Мая 2012, 14:14:06

Нихрена по сайту не понял кто будет выступать? Для меня главное либо CoB либо Rage. На остальных мне фиолетово

P.S. Кстати в 52 в графиках ввел параметр "грубый" - группирует несколько срезов в один, иногда удобней смотреть т.к график более плавный получается без миллионов пиков

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: blackjack от 11 Мая 2012, 16:09:57

Хотелка. Чтобы можно было выбрать период за какой рисуется график.
))

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Андрій от 11 Мая 2012, 22:43:31

модуль встановив, а графіків нема, можна детальніше - як встановити highcharts

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Efendy от 11 Мая 2012, 22:48:12

Цитата: Андрій от 11 Мая 2012, 22:43:31

модуль встановив, а графіків нема, можна детальніше - як встановити highcharts

В фаерфоксе в любом месте страницы правую кнопку и выбирай "исходный код страницы", затем в новом окне ищи highcharts.js и кликни по нему, если загрузится скрипт - highcharts уже "установлен" у тебя, нет - смотри ошибку

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Efendy от 11 Мая 2012, 22:54:15

Пока делал графики заметил интересную особенность: сравнил 2 графика абонентов из разных групп (а в 52й версии можно выбирать список клиентов по любым критериям и отсылать другим модулям) и увидел, что графики частенько повторяют друг-друга. Я имею ввиду некоторые пики, характер которых повторяется для разных групп. Вряд ли клиенты за короткий промежуток времени создают одинаковый характер закачек. Следовательно, делаю вывод, что тупо не хватает канала при всем при том, что полочки не наблюдается. Неожиданный бонус при сравнении графиков

P.s. я имею ввиду не общую форму - ее характер итак понятен, что к 8 часам буднего и 9 пятницы нагрузка максимальная, а именно пики.

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

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Андрій от 12 Мая 2012, 00:04:38

Цитата: Efendy от 11 Мая 2012, 22:48:12

Цитата: Андрій от 11 Мая 2012, 22:43:31

модуль встановив, а графіків нема, можна детальніше - як встановити highcharts

розібрався, дякую

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Andrey Zentavr от 12 Мая 2012, 11:23:42

Краткий мануал по установке:
1) Закинуть jquery на сервер:
# mkdir -p /web/stats/httpdocs/js
# cd /web/stats/httpdocs/js
# mkdir -p jquery/1.7.1
# wget http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js -O jquery/1.7.1/jquery.min.js

2) Закинуть highcharts на сервер:
# wget http://www.highcharts.com/downloads/zips/Highcharts-2.2.3.zip -O ~/Highcharts-2.2.3.zip
# mkdir -p /web/stats/httpdocs/js/hc
Распаковать из архива каталог js и положить его сожержимое в /web/stats/httpdocs/js/hc

Получится как-то так:

Код:

# tree
.
|-- hc
|   |-- adapters
|   |   |-- mootools-adapter.js
|   |   `-- prototype-adapter.js
|   |-- highcharts.js
|   |-- modules
|   |   |-- canvas-tools.js
|   |   `-- exporting.js
|   `-- themes
|       |-- dark-blue.js
|       |-- dark-green.js
|       |-- gray.js
|       |-- grid.js
|       `-- skies.js
`-- jquery
    `-- 1.7.1
        `-- jquery.min.js

6 directories, 11 files

3) Установка
Кладём Sdetailtrafhc.pl в /usr/local/nodeny/web, прописываем его в /usr/local/nodeny/web/plugin_reestr.cfg и указываем в перечне плугинов через админку.

4) Наслаждаемся

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: ale-x от 13 Мая 2012, 00:22:47

То ли лыжи не едут, то ли я...
Сделал все по инструкции, открываю - графика нет, только меню статы. По ссылкам в исходном коде js грузятся.
В плагин_реестр прописал так:

Код:

125		Sdetailtrafhc		TSHC_main		Трафик (графики)				0		0

Исходный код страницы:

Код:

<html><head><title>Страница статистики</title><meta http-equiv='Cache-Control' content='no-cache'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
<meta name='Copyright' content='© nodeny.com.ua'>
<link rel='stylesheet' href='/i/nody.css' type='text/css'>
<script type='text/javascript' src='/i/md5.js'></script>
</head><body><div align=center id=maindiv><div class='pddng2'><div class='row2 borderblue'><div class='head big pddng2'><b>Страница статистики</b></div></div></div><table class=width100 cellpadding=3 cellspacing=7><tr><td valign=top width=25%><div class='nav2 cntr'><table class=table0><tr><td><img src='/i/top_m1.gif' width=270 height=20></td></tr><tr><td background='/i/cntr_m1.gif' class='row2'><table><tr><td><img src='/i/spacer.gif' width=1 height=2></td><td colspan=3 class=row2><img src='/i/spacer.gif' width=1 height=2></td><td><img src='/i/spacer.gif' width=1 height=2></td></tr><tr><td width=19>&nbsp;</td><td class=row2 width=2>&nbsp;</td><td width=226 class=row2 style='word-wrap:break-word;'>
...
<a href='/cgi-bin/stat.pl?a=125&a=125'>Трафик (графики)</a>
...
<td valign=top>[b]<script type="text/javascript" src="/js/jquery/1.7.1/jquery.min.js"></script><script src="/js/hc/highcharts.js"></script><div id="traffic_chart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>[/b]<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'traffic_chart',
                type: 'area'
            },
            title: {
                text: 'Показана статистика для mikrotik (ip xxx.xxx.36.23) 'Направление 1' трафик на 13 мая 2012'
            },
            xAxis: {
                title: {
					text: 'Время'
				},
				type: 'datetime',
				labels: {
                    formatter: function() {
                        return Highcharts.dateFormat('%e %b %Y, %H:%M', this.value);
                    },
					rotation: -27,
					x: -45,
					y: 40
                }
            },
            yAxis: {
                title: {
                    text: 'Трафик, Кбайт'
                },
				labels: {
                    formatter: function() {
                        return Highcharts.numberFormat(this.value/1000, 2) +'k';
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    return this.series.name +' скачано <b>'+
                        Highcharts.numberFormat(this.y/1000, 2) +'</b>Кбайт <br/>'+ Highcharts.dateFormat('%e %b %Y, %H:%M', this.x);
                }
            },
            plotOptions: {
                area: {
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'Входящий Трафик',
                data: [
[1336867206000,121357],
[1336867215000,426],
[1336867226000,120],
[1336867236000,152],
[1336867246000,306],
...
[1336870971000,571]]
            }, {
                name: 'Исходящий Трафик',
                data: [
[1336867206000,1964],
[1336867215000,697],
[1336867226000,120],
[1336867236000,120],
[1336867246000,491],
[1336867256000,648],
[1336867274000,657],
[1336867283000,240],
[1336867293000,121],
[1336867312000,827],
[1336867321000,1395],
[1336867330000,46],
...
[1336870971000,1036]]
            }]
        });
    });
    
});
		</script></td></tr></table></div></body></html>

пробовал разными браузерами ФФ, ИЕ, даже на планшете с андроидом
ЧЯДНТ?

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Efendy от 13 Мая 2012, 00:54:42

Поставь FF плагин FireBug (суперполезный плагин, рано или поздно понадобится) и посмотри какую ошибку пишет в консоли. Если влом ставить, то меню "консоль ошибок" у FF есть

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: smallcms от 13 Мая 2012, 01:03:31

Цитата: ale-x от 13 Мая 2012, 00:22:47

То ли лыжи не едут, то ли я...
ЧЯДНТ?

Вы сломали инторнет. У Вас почему-то название направления в одинарных ковычках вывелось:

Цитата: ale-x от 13 Мая 2012, 00:22:47

Код:

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'traffic_chart',
                type: 'area'
            },
            title: {
                text: 'Показана статистика для mikrotik (ip xxx.xxx.36.23) 'Направление 1' трафик на 13 мая 2012'

Попробуйте проэкранировать эти кавычки или нормально назвать направление. После этого график сразу же начнёт рисоваться: http://pastehtml.com/view/bxvbuv3di.html
Пиво не нужно, я в завязке. Высылайте тряпичную куклу...

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Efendy от 13 Мая 2012, 01:29:03

Но лучше предусмотреть в коде экранирование одинарных кавычек

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: ale-x от 13 Мая 2012, 01:39:00

smallcms точно в дырочку!!
В настройках нодени "Направление 1" называется Инторнет
(http://img337.imageshack.us/img337/5413/ndpr.png)
Откуда кавычки я не в курсе рыбята

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: smallcms от 13 Мая 2012, 01:40:29

Только что пофиксил на гугл-коде и выложил исправленную версию. Теперь весь заголовок пропускается через &Filtr_all.

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Efendy от 13 Мая 2012, 09:36:28

Цитата: smallcms от 13 Мая 2012, 01:40:29

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

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: ale-x от 13 Мая 2012, 10:13:23

Да, сработал. Теперь понял откуда кавычки - для одного пресета не было описано направление. Спс .

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: a_tem от 17 Мая 2012, 22:25:26

за модуль +. только не понял что он рисует скачаную-переданную инфу или канал, хочется чтоб канал рисовал, и юзер видел как у него загрузка прежде чем позвонить и сказать что инета нет. если такое возможно. спс зарание

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Andrey Zentavr от 18 Мая 2012, 01:28:12

Цитата: hatab от 17 Мая 2012, 22:25:26

рисует абсолютно то же самое что показывает таблица в подобном модуле, что идёт в поставке биллинга.

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: ale-x от 18 Мая 2012, 07:50:00

а как переделать, чтобы показывало загрузку канала в кбит/с например. я так понимаю надо разделить на кол-во секунд в каждом конкретном срезе?

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: viktorS от 10 Августа 2012, 08:13:49

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

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: stix от 10 Августа 2012, 09:02:37

не, только значение наработанного трафика.
детализация здесь не нужна

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Windows от 25 Ноября 2012, 00:25:00

Спасибо ребята за модуль!Только поправьте Readme.Потратил час чтоб понять где собака зарыта.В readme написано
5. Выгрузить библиотеку jquery с сайта code.jquery.com/jquery-1.7.1.min.js и поместить в подкаталог
../js/jquery/1.7.1/
А в коде

# Отобразим график
$OUT.='<script type="text/javascript" src="/js/jquery/1.7.1/jquery.min.js"></script>';
$OUT.='<script src="/js/hc/highcharts.js"></script>';

Название: Re: Модуль Графического отображения загрузки канала
Отправлено: Gray от 17 Января 2013, 18:44:35

спасибо, работает :)

Биллинговая система Nodeny

Главная категория => Модули для Nodeny => Тема начата: Andrey Zentavr от 09 Мая 2012, 18:33:22