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

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


Возможности

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

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

 

ДЕМО
ИСХОДНИКИ

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеHTML5

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

Вертикальное меню очень полезно, ведь в него может вместиться множество полезной информации. Различными блоками, меню выполненных в стиле «аккордеон», сейчас уже никого не удивишь. Предлагается масса интересных решений и техник исполнения, как с использованием jQuery, так и основанных только на CSS. В сегодняшнем уроке мы рассмотрим весьма интересное решения построение такого блока навигацией, мы добавим несколько правил анимации, при этом вертикальная навигация будет полностью рабочей и отвечать всем пользовательским запросам.


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

Минимальный и настраиваемый фрагмент, позволяющий быстро генерировать семантическую форму в ваших веб-проектах.


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

Отображение морфинга, которое оживляет в соответствии с размером его содержимого.


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

Сегодня я расскажу вам, как создавать различные CSS3  эффектов. Мы использовали javascript. В результате страницы галереи у нас будет 9 образов, каждый из которых имеет собственный hover эффект.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог