API query

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

Requirements

Querying

Visualization

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

aggregate: count, sum, avg, min or max. If you don't choose count, targetProperty is required
targetProperty: property on which will be performed aggregation
from, to: Unix timestamps (in seconds)
groupBy: Property name by which to group
interval: minutely, hourly, daily, monthly or yearly
filters: array of filters. Each filter has required propertyName, propertyValue and comparisonType(equal, not_equal, greater, less, greater_or_equal, less_or_equal, contains, not_contains)

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:

Option Default value Description
chartColor Flot default Color of bar chart and chart with one line
enablePointHover false Whether to show tooltip on point hover. If true, tooltipSelector is required
tooltipSelector null Div where tooltip will be placed. It should have set position to absolute
enableSelectionZooming false Whether to enable zooming with selection. This requires flot selection plugin
enableLineManipulation false Whether to enable removing lines (in line chart) using checkboxes. If true, checkboxHolderSelector is required
checkboxHolderSelector null Div where checkboxes for line manipulation will be placed
timezone GMT Time zone in which to display data. This requires some libraries, see time zones

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