Автор

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

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

Многие вебмастера и разработчики сайтов не раз задавались вопросом: «Как перевести картинку в CSS»! Представляю Вам конвертер который делает эту задачу реальной!


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

Коллекция анимированных заголовков со сменными словами, которые заменяют друг друга с помощью CSS-переходов.


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

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


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

На многих сайтах реализована функция всплывающего окна при входе на сайт. Такой элемент позволяет преподнести посетителю необходимую информацию, которая, на мнение, автора, является ценной для посетителя или на оборот-предупреждающей.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close