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

[Andrey Zentavr]

Навеяно этой темой от Efendy
Накидал за выходные модуль клиентской статистики который показывает загрузку канала клиента в виде графика.
Использовал библиотеку highcharts + jquery.

Смотрится это примерно вот так:

[smallcms]

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

[Andrey Zentavr]

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

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

[smallcms]

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

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

[poxy.]

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

[Efendy]

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

Код:

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

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

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

[Andrey Zentavr]

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

Код:

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

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

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

Это уже на следующих выходных посмотрим.
Я тут активно готовлюсь к посещению Rock-Am-Ring - 29го мая самолёт на германию

[Efendy]

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

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

[blackjack]

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

[Андрій]

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

[Efendy]

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

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

[Efendy]

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

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

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

[Андрій]

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

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

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

[Andrey Zentavr]

Краткий мануал по установке:
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) Наслаждаемся

[ale-x]

То ли лыжи не едут, то ли я...
Сделал все по инструкции, открываю - графика нет, только меню статы. По ссылкам в исходном коде 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>

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