Site traffic widget on html5 canvas

Features:

Build a graph based on data array;
Build a graph based on Yandex.Metrica counter;
Partial or complete customization;
Graph built using Html5 canvas;

Usage:

Example

Methods

Method	Parameters	Description
`$informer(canvasID, [options])`	canvasID (string) – ID of canvas element on the page; options (object) (optional) – module settings;	Initializes the module; Return value: module instance;
`.showStat(graph_type, data, [style])`	graph_type (string) – type of output graph; data (object) – data to graph (visitors, page views, the current date); style (object) (optional) – styling settings;	Build the desired graph from an array of data and styling settings;
`.showYandexStat(graph_type, counter_id, [style])`	graph_type (string) – type of output graph; counter (string) – Yandex.Metrica counter number; style (object) (optional) – styling settings;	Build the desired graph from an array of data provided Yandex.Metrica analytics tool. Caution: Should be have installed the counter code; Should be activated "informer" option; Should be activated "Show informer information" option on the Access tab; Requests should be made from the same domain for which a counter set.
`.redraw()`	-	Redrawing graphs on canvas.

Module settings

$informer(canvasID, options)

Parameter	Type	Default value	Description
`font`	string	`'10px Sans-Serif'`	Used font.
`fontColor`		`'#97A9B2'`	Font color.
`hintBg`	color	`'#A3B3BB'`	Background color of the hint.
`hintTextColor`	color	`'#fff'`	Hint font color.
`hintScale`	int (%)	`120`	Scale area around the element that triggers the tooltip.
`showCaption`	bool	`false`	Show your caption to the graph.
`caption`	string	`'metrika.yandex.com'`	Caption text.
`showGrid`	bool	`false`	Show grid.
`showDayOfWeek`	bool	`true`	Show weekdays.
`weekDays`	Array	`['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']`	An array of weekdays.
`showDaysOfMonth`	bool	`false`	Show days of the month.

Example:
var stat1 = $informer('informerID', {font: 'bold 10px Arial', fontColor: '#f00'});

Show statistics graph

.showStat(graph_type, data, [style])

.showYandexStat(graph_type, counter_id, [style])

Parameters:

Parameter	Type	Description
`graph_type`	string	Graph type. Available chart types: `'CirclesGraph'` – circle connected by lines; You can use one of the available types of graphics or create your (manual). Each type of graph its own set of styles.
`data`	object	Data on the number of visitors and page views: `data = {pageviews: Array, uniques: Array, current_date: Date}` You also can open public access to statistics and use of Yandex.Metrica API to obtain site visits data.
`counter_id`	string	Yandex.Metrica counter number. Makes a request for data on page views statistics at Yandex server, then formed a set of data on pageview and call `showStat(..)`. Caution: Should be have installed the counter code; Should be activated "informer" option; Should be activated "Show informer information" option on the Access tab; Requests should be made from the same domain for which a counter set.
`style`	object	For each type of graph designed its own set of styling. Styling for `'CirclesGraph'`: `lineWidth` - (0.5) line width; `lineColor` - ('#A3B3BB') line color; `circleRadius` - (4) circle radius; `circleBg` - ('#F5F5F5') circle fill color; `circleBorderColor` - ('#97A9B2') circle stroke color; `circleBorderWidth` - (0.5) circle stroke width; `paintWeekends` - (true) special color for the weekend; `weekendBg` - ('#DF907C') color of weekend circles. Styling for `'BezierGraph'`: `lineWidth` - (0.5) line width; `uLineColor` - ('#d01b26') line color for "Uniques"; `pvLineColor` - ('#006a9f') line color for "Page views"; `circleRadius` - (3) circle radius; `circleBg` - ('#F5F5F5') circle fill color; `circleBorderWidth` - (0.5) circle stroke width; `paintWeekends` - (true) special color for the weekend; `weekendBg` - ('#5EA2C5') color of weekend circles.

Examples: Display settings

License: GNU GPL

Download GitHub Donate