Виджет посещаемости сайта на canvas от Метрики Яндекса

irbees2008 Опубликовано - 23 - июня HTML5

Источник:
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Демо:

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

Возможности

Строить график на основе массива данных;
Строить график на основе номер счетчика Яндекс.Метрики;
Возможна частичная или полная кастомизация внешнего вида Информера;
График строится с использованием html5 canvas;

Использование

Код:

<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, <u><b>options</b></u>)

Параметр	Тип	Значение по умолчанию	Описание
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'});

Отображение графика

Код:

.<b>showStat</b>(graph_type, data, [style])

Код:

.<b>showYandexStat</b>(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') цвет выходных кружков.

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

Код:

$informer("traffic-widget-ex2",{
    hintBg: 'rgba(184, 55, 55, 0.8)',
    hintTextColor: '#fff',
    hintScale: 220,
    weekDays: new Array('Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб')
  })
  .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()
  },{
    circleRadius: 3,
    circleBg: '#A3B3BB'
  });

  $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()
  });

Скачать файл informer-0_9_2.zip

Можешь почитать и вот эту статейку "Таблица цветов"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.