Возможности
- Строить график на основе массива данных;
- Строить график на основе номер счетчика Яндекс.Метрики;
- Возможна частичная или полная кастомизация внешнего вида Информера;
- График строится с использованием html5 canvas;
HTML
<script src="/informer-0.9.0.js" type="text/javascript"></script>
<canvas id="traffic-widget-ex1" height="70" width="200"></canvas>
<script type="text/javascript">
$informer("traffic-widget-ex1").showStat("CirclesGraph", {
pageviews: [9, 7, 8, 11, 10, 7, 5, 4, 6, 10, 13, 11],
uniques: [3, 2, 4, 6, 5, 3, 2, 1, 3, 5, 8, 7],
current_date: new Date()
});
// или в случае использования Яндекс Метрики:
// $informer("traffic-widget-ex1").showYandexStat("CirclesGraph", "13352758");
</script>
Методы
Метод | Параметры | Описание |
---|---|---|
$informer |
canvasID (string) – ID элемента холста (canvas) на странице;options (object) (не обязательный) – Перечень настроек;
|
Производит инициализацию модуля, устанавливается обработчик события на движение мышью по холсту; Возвращаемое значение: экземпляр модуля; |
.showStat |
graph_type (string) – тип выводимого графика;data (object) – данные для построения графика (посетители, просмотры страниц, текущая дата);style (object) (не обязательный) – перечень настроек стилевого оформления;
|
Производит построение необходимого графика на основе массива данных и настоек вида; |
.showYandexStat |
graph_type (string) – тип выводимого графика;counter (string) – номер счетчика Яндекс.Метрика;style (object) (не обязательный) – перечень настроек стилевого оформления;
|
Производит построение необходимого графика осуществляя запрос к серверам Яндекс.Метрики за данными о посещениях сайта. Внимание: Должен быть установлен код счетчика;Должна быть активирована опция «Информер»; Должна быть активирована опция «Показывать данные информера» на вкладке Доступ; Подробнее. |
.redraw() |
- | Перерисовка графики на холсте. |
Настройки модуля
$informer(canvasID, options)
Параметр | Тип | Значение по умолчанию | Описание |
---|---|---|---|
font |
string | '10px Sans-Serif' |
Используемый шрифт. |
fontColor |
'#97A9B2' |
Цвет шрифта. | |
hintBg |
color | '#A3B3BB' |
Фоновый цвет выплывающей подсказки. |
hintTextColor |
color | '#fff' |
Цвет шрифта выплывающей подсказки. |
hintScale |
int (%) | 120 |
Масштаб области вокруг элемента, при котором появляется выплывающая подсказка. |
showCaption |
bool | false |
Показывать подпись к графику |
caption |
string | 'metrika.yandex.com' |
Текст подписи к графику. |
showGrid |
bool | false |
Показывать сетку. |
showDayOfWeek |
bool | true |
Показывать дни недели. |
weekDays |
Array | ['su', |
Массив дней недели. |
showDaysOfMonth |
bool | false |
Показывать дни месяца. |
Пример:
var stat1 = $informer('informerID', {font: 'bold 10px Arial', fontColor: '#f00'});
Отображение графика
.showStat(graph_type, data, [style])
.showYandexStat(graph_type, counter_id, [style])
Параметры:
Параметр | Тип | Описание |
---|---|---|
graph_type |
string |
Тип графика. Доступные типы графиков:
'CirclesGraph' – окружности соединенные линиями
Вы можете использовать один из доступных типов графика или создать свой (инструкция). У каждого типа графика свой набор стилей. |
data |
object |
Данные о числе посетителей и количестве просмотров страниц:
Вы так же можете открыть публичный доступ к своей статистике и использовать API Яндекс Метрики для обращения за данными о посещаемости сайта. |
counter_id |
string |
Номер счетчика Яндекс.Метрика. Осуществляет запрос за данными о посещаемости на сервера Яндекса, после чего
формируется набор данных о просмотрах страниц и вызывает метод Внимание: Должен быть установлен код счетчика;Должна быть активирована опция «Информер»; Должна быть активирована опция «Показывать данные информера» на вкладке Доступ; Запросы должны осуществляться с того же домена для которого установлен счетчик. |
style |
object |
Для каждого типа графика предназначен свой набор стилевого оформления.
Стилевое оформление для lineWidth - (0.5) толщина линии;lineColor - ('#A3B3BB') цвет линии;circleRadius - (4) радиус окружности;circleBg - ('#F5F5F5') заливка окружности;circleBorderColor - ('#97A9B2') цвет обводки;circleBorderWidth - (0.5) толщина линии обводки;paintWeekends - (true) особый цвет для выходных;weekendBg - ('#DF907C') цвет выходных кружков.
Стилевое оформление для lineWidth - (0.5) толщина линии;uLineColor - ('#d01b26') цвет линии "Уникальные посетители";pvLineColor - ('#006a9f') цвет линии "Просмотры страниц";circleRadius - (3) радиус окружности;circleBg - ('#F5F5F5') заливка окружности;circleBorderWidth - (0.5) толщина линии обводки;paintWeekends - (true) особый цвет для выходных;weekendBg - ('#5EA2C5') цвет выходных кружков.
|
Примеры: Настройки отображения
Демо 2 (Посещаемость сайта www.s-sd.ru на основе номер счетчика Яндекс.Метрики)
// Демо 1
$informer("traffic-widget-ex1").showStat("CirclesGraph", {
pageviews: [9, 7, 8, 11, 10, 7, 5, 4, 6, 10, 13, 11],
uniques: [3, 2, 4, 6, 5, 3, 2, 1, 3, 5, 8, 7],
current_date: new Date()
});
// Демо 2 Посещаемость сайта www.s-sd.ru на основе номер счетчика Яндекс.Метрики
$informer("traffic-widget-ex2",{
showGrid:true,
hintBg: '#019237',
hintTextColor: '#fff',
hintScale: 220,
weekDays: new Array('Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб')
})
.showYandexStat("CirclesGraph", "186758",{
circleRadius: 4,
circleBg: '#23b9eb'
});
// Демо 3
$informer("traffic-widget-ex3", {showGrid:true, hintBg: '#63C0EC'})
.showStat("BezierGraph", {
pageviews: [4, 12, 6, 10, 3, 14, 4],
uniques: [1, 8, 4, 7, 1, 7, 1],
current_date: new Date()
});
Данный виджет я применял на сайте санатория «Изумруд», где выводится статистика сайта за неделю.