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

HTML5 04.12.2014

Возможности

Строить график на основе массива данных;
Строить график на основе номер счетчика Яндекс.Метрики;
Возможна частичная или полная кастомизация внешнего вида Информера;
График строится с использованием 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, [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') цвет выходных кружков.

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

Демо 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()
  });

Данный виджет я применял на сайте санатория «Изумруд», где выводится статистика сайта за неделю.

ДЕМО

ИСХОДНИКИ