API query

You can use javascript library to query your records and then display them in charts wherever you want

Requirements

Querying

• logstatsquery.min.js
• JQuery

Visualization

• logstatsgraphdrawer.min.js
• JQuery
• moment.js and moment.js timezones
• Flot with time plugin

All third-party libraries can be downloaded from their official documentation or copied from logstats source codes, from public/libraries folder

Querying

var url = 'http://domain.org/logstats/query';
var readToken = 'projectReadToken';
var logstatsQuery = new LogstatsQuery(url, readToken)
var queryData = {
	from : Date.now() / 1000 - 86000,
	to : Date.now() / 1000,
	event: 'purchase',
	aggregate: 'sum',
	targetProperty: 'price',
	groupBy: 'brand',
	interval: 'hourly',
	filters: [
		{
			propertyName: 'price',
			comparisonType: 'greater',
			propertyValue: '200'
		},
		{
			propertyName: 'coupon_used',
			comparisonType: 'equal',
			propertyValue: true
		}
	]
}

logstatsQuery.get(queryData, successFunction, errorFunction);

First you need to get project read token from Projects page in Logstats application. This token will be used to associate query with given project.
Then you need URL. It consists of URL to which you have uploaded Logstats application and suffix "/query". For example: "http://your-domain.com/logstats/query"

Querying is very similar to segmentation. Required fields are event and aggregate

Visualisation

You can visualize queried data with LogstatsGraphDrawer

var graphDrawer = new LogstatsGraphDrawer('#div-selector"', {
	enablePointHover: true
});

logstatsQuery.get(queryData, function(data) {
	drawer.draw(data.data, data.timeframe);
}, function(data) {
	alert('Error in query')
	errors = data.responseJSON;
});

LogstatsGraphDrawer takes selector as first argument and options as second. Selector should choose div with set width and height. All available options:

Time zones

If you specify timezone in LogstatsGraphDrawer options, you will need:

• timezone.js library
• Olson time zone files
• Initialize timezone.js with olson time zone files

For more information see full example

Full example

This example uses data queried from demo aplication and displays them in Europe/Prague time zone. It is purchase price sum grouped by brand name, where purchase price is larger than 150, accumulated each hour in last 6 hours

HTML

<script src="libraries/jquery/jquery.min.js"></script> <!-- required for quering and visualization -->
<script src="libraries/moment/moment.min.js"></script> <!-- required for visualization -->
<script src="libraries/moment/moment-timezone-with-data.min.js"></script> <!-- required for visualization -->
<script src="dist/logstatsquery.min.js"></script> <!-- required for quering -->
<script src="dist/logstatsgraphdrawer.min.js"></script> <!-- required for visualization -->
<script src="libraries/flot/jquery.flot.min.js"></script> <!-- required for visualization -->
<script src="libraries/flot/jquery.flot.time.min.js"></script> <!-- required for visualization -->
<script src="libraries/flot/jquery.flot.selection.min.js"></script> <!-- required for selection zooming -->
<script src="libraries/flot/timezone.js"></script> <!-- required for timezones -->

<div id="chart-area" style="width: 500px; height: 200px"></div>
<div id="chart-tooltip" style="position:absolute"></div>
<div id="chart-checkboxes"></div>

Javascript

// all three lines are required only when using time zones
timezoneJS.timezone.zoneFileBasePath = "libraries/flot/tz"; // path to olson time zone files
timezoneJS.timezone.defaultZoneFile = [];
timezoneJS.timezone.init({async: false});

var url = 'http://logstats.org/demo/query';
var readToken = 'rDemoprojectedae764d0d';
var logstatsQuery = new LogstatsQuery(url, readToken)
var queryData = {
	from : Date.now() / 1000 - 6 * 60 * 60, // 6 hours ago
	to : Date.now() / 1000, // now
	event: 'purchase',
	aggregate: 'sum',
	targetProperty: 'price',
	groupBy: 'brand',
	interval: 'hourly',
	filters: [
		{
			propertyName: 'price',
			comparisonType: 'greater',
			propertyValue: '150'
		}
	]
}

var drawer = new LogstatsGraphDrawer('#chart-area', {
	enablePointHover : true,
	tooltipSelector: "#chart-tooltip",
	enableSelectionZooming : true,
	enableLineManipulation: true,
	checkboxHolderSelector: "#chart-checkboxes",
	timezone: 'Europe/Prague'
});

logstatsQuery.get(queryData, function(data) {
	drawer.draw(data.data, data.timeframe);
}, function(data) {
	alert('Error in query')
	errors = data.responseJSON;
});