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

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

irbees2008 irbees2008 Опубликовано - 23 - июня HTML5
779 - 0
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

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

Возможности

  • Строить график на основе массива данных;
  • Строить график на основе номер счетчика Яндекс.Метрики;
  • Возможна частичная или полная кастомизация внешнего вида Информера;
  • График строится с использованием 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йту: 4572 дня
  • Новостей: 567
  • Комменты: 257
  • Зарегистрированно : 672
  • Онлайн всего: [8]
  • Гости: [8]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 29
  • Генерация страницы: 0.349сек
  • Потребление памяти: 5.187 Mb 
  •   Яндекс.Метрика