- Download
bixel.js
or install with bower
- Create html file (index.html)
- Attach bixel.js as script or through require.js
- add event handlers (
loading
,load
,no-data
, etc) - execute
bixel.init()
with options described below
- include
<script src="https://rawgit.com/rcslabs/bixel/master/bixel.js"></script>
in your html file
- run
bower install git://github.com/rcslabs/bixel
- include
<script src="bower_components/bixel/bixel.js"></script>
in your html file
TODO
bixel.init({optional config})
Must execute this function when frame is ready to receive message
Config (optional):
- locationsCount - number of requested locations
- metricsCount - number of requested metrics
- periodsCount - number of requested periods
If none expliced then all selected will be provided
bixel.init
returns promise object to ensure that everything is working
bixel.init({periodsCount:1})
.then(function() {
// succeeded
}, function() {
// error
});
subscribe on event
bixel.on(eventName, callbackFunction)
eventName is string and can be one of:
loading
- will receive this event when data is loading. A callback will haveAxis
object as the only argumentload
- will receive this event when data is loading. A callback will haveData
andAxis
object as two argumentsno-data
- will receive this event when the data is empty if either there is no selection in ui panes or no data on server side. A callback will haveAxis
object as the only argument
provides methods:
axis.getMetrics()
- returns javascript array ofMetric
objects. This array will be maximum ofmetricsCount
length if specified inbixel.init
methodaxis.getLocations()
- returns javascript array ofLocation
objects. This array will be maximum oflocationsCount
length if specified inbixel.init
methodaxis.getPeriods()
- returns javascript array ofPeriod
objects. This array will be maximum ofperiodsCount
length if specified inbixel.init
methodaxis.getUnits()
returns javascript array ofUnit
objects. It will contain all the units linked with metrics
provides methods:
data.getValue(z, y, x)
- returnsDataItem
object. Argumentsz
,y
andx
areMetric
,Location
andPeriod
objects from Axis in any order.
Generally a javascript Number
object with overridden toString
method.
toString
will return formatted value according to measure unit.
example:
bixel.on('load', function(data, axis) {
var metric = axis.getMetrics()[0]; // only the first metric of provided
var location = axis.getLocations()[0]; // and first location
var period = axis.getPeriods()[0]; // and first period
var dataValue = data.getValue(metric, location, period);
var numValue = dataValue.valueOf(); // ex: number, 1000000
var strValue = dataValue.toString() // ex: string, '$ 1 000 000 us dollars'
});
javascript object, has fields:
id
:string - unique id of metrictitle
:string - title of metriccolor
:string - color for this metric according to dash configurationunit_id
: string - the id of unit linked to the metric
javascript object, has fields:
id
:string - unique id of locationtitle
:string - title of locationcolor
:string - color for this location according to dash configuration
javascript object, has fields:
id
:string - unique id of periodtitle
:string - title of periodcolor
:string - color for this period according to dash configuration