Автор

04 12.2014
Виджет посещаемости сайта на 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

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


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

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

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


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

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


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

Если ваш сайт содержит множество информации, то это наверняка запутает пользователя, и ему потребуется некоторое объяснение происходящего. Отличным способом будет внедрение в структуру сайта ненавязчивых подсказок, которые отлично дополнят ваш сайт и будут выполнять свою миссию. В данном уроке мы рассмотрим процесс создания замечательных анимированных подсказок с помощью css3. В демонстрации будут приводиться различные варианты подсказок, с разными эффектами появления и затухания. Следует заметить, что такие подсказки смогут работать в браузерах..


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

С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добавлением событий.

Лично я применил календарь на сайте Усадьба «Сказка» по просьбе заказчика!


105 Публикаций

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

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


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

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close