Автор

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

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

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


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

Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close