Виджет посещаемости сайта на html5 canvas

Возможности

Строить график на основе массива данных;
Строить график на основе номер счетчика Яндекс.Метрики;
Возможна частичная или полная кастомизация внешнего вида Информера;
График строится с использованием html5 canvas;

Использование

Пример

Методы

Метод	Параметры	Описание
`$informer(canvasID, [options])`	canvasID (string) – ID элемента холста (canvas) на странице; options (object) (не обязательный) – Перечень настроек;	Производит инициализацию модуля, устанавливается обработчик события на движение мышью по холсту; Возвращаемое значение: экземпляр модуля;
`.showStat(graph_type, data, [style])`	graph_type (string) – тип выводимого графика; data (object) – данные для построения графика (посетители, просмотры страниц, текущая дата); style (object) (не обязательный) – перечень настроек стилевого оформления;	Производит построение необходимого графика на основе массива данных и настоек вида;
`.showYandexStat(graph_type, counter_id, [style])`	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', 'mo', 'tu', 'we', 'th', 'fr', 'sa']`	Массив дней недели.
`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	Данные о числе посетителей и количестве просмотров страниц: `data = {pageviews: Array, uniques: Array, current_date: Date}` Вы так же можете открыть публичный доступ к своей статистике и использовать API Яндекс Метрики для обращения за данными о посещаемости сайта.
`counter_id`	string	Номер счетчика Яндекс.Метрика. Осуществляет запрос за данными о посещаемости на сервера Яндекса, после чего формируется набор данных о просмотрах страниц и вызывает метод `showStat(..)`. Внимание: Должен быть установлен код счетчика; Должна быть активирована опция «Информер»; Должна быть активирована опция «Показывать данные информера» на вкладке Доступ; Запросы должны осуществляться с того же домена для которого установлен счетчик.
`style`	object	Для каждого типа графика предназначен свой набор стилевого оформления. Стилевое оформление для `'CirclesGraph'`: `lineWidth` - (0.5) толщина линии; `lineColor` - ('#A3B3BB') цвет линии; `circleRadius` - (4) радиус окружности; `circleBg` - ('#F5F5F5') заливка окружности; `circleBorderColor` - ('#97A9B2') цвет обводки; `circleBorderWidth` - (0.5) толщина линии обводки; `paintWeekends` - (true) особый цвет для выходных; `weekendBg` - ('#DF907C') цвет выходных кружков. Стилевое оформление для `'BezierGraph'`: `lineWidth` - (0.5) толщина линии; `uLineColor` - ('#d01b26') цвет линии "Уникальные посетители"; `pvLineColor` - ('#006a9f') цвет линии "Просмотры страниц"; `circleRadius` - (3) радиус окружности; `circleBg` - ('#F5F5F5') заливка окружности; `circleBorderWidth` - (0.5) толщина линии обводки; `paintWeekends` - (true) особый цвет для выходных; `weekendBg` - ('#5EA2C5') цвет выходных кружков.

Примеры: Настройки отображения

Лицензия: GNU GPL

Скачать GitHub Поддержать