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
aggregate: count, sum, avg, min or max. If you don't choose count, targetProperty is requiredtargetProperty: 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;
});