Хаки и Скрипты Next Generation CMS

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

irbees2008 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>)


ПараметрТипЗначение по умолчаниюОписание
fontstring'10px Sans-Serif'Используемый шрифт.
fontColor'#97A9B2'Цвет шрифта.
hintBgcolor'#A3B3BB'Фоновый цвет выплывающей подсказки.
hintTextColorcolor'#fff'Цвет шрифта выплывающей подсказки.
hintScaleint (%)120Масштаб области вокруг элемента, при котором появляется выплывающая подсказка.
showCaptionboolfalseПоказывать подпись к графику
captionstring'metrika.yandex.com'Текст подписи к графику.
showGridboolfalseПоказывать сетку.
showDayOfWeekbooltrueПоказывать дни недели.
weekDaysArray['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']Массив дней недели.
showDaysOfMonthboolfalseПоказывать дни месяца.
Пример:
Код:
 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_typestring Тип графика. Доступные типы графиков:
  • 'CirclesGraph' – окружности соединенные линиями

Вы можете использовать один из доступных типов графика или создать свой (инструкция).
У каждого типа графика свой набор стилей.

dataobject

Данные о числе посетителей и количестве просмотров страниц:

data = {pageviews: Array, uniques: Array, current_date: Date}

Вы так же можете открыть публичный доступ к своей статистике и использовать
API Яндекс Метрики для обращения за данными о посещаемости сайта.

counter_idstring

Номер счетчика Яндекс.Метрика.

Осуществляет запрос за данными о посещаемости на сервера Яндекса, после чего
формируется набор данных о просмотрах страниц и вызывает метод showStat(..).

Внимание:

  • Должен быть установлен код счетчика;
  • Должна быть активирована опция «Информер»;
  • Должна быть активирована опция «Показывать данные информера» на вкладке Доступ;
  • Запросы должны осуществляться с того же домена для которого установлен счетчик.
styleobject

Для каждого типа графика предназначен свой набор стилевого оформления.

Стилевое оформление для '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

Можешь почитать и вот эту статейку "Настраиваем разный дизайн короткой новости по чету и нечету"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3402 дня
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 577
  • Онлайн всего: [12]
  • Гости: [11]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.235сек
  • Потребление памяти: 4.977 Mb 
  •   яндекс.ћетрика