The example below renders a Metric Box for the rounds played by users at Gameplay, our fictitious example demo.

<div id="example"></div>

<script>
  joola.on('ready', function() {
    new joola.viz.Metric({
      container: '#example',
      caption: 'Metric box example',
      query: {
        timeframe: 'last_30_days', 
        interval: 'day', 
        dimensions: [],
        metrics: ['rounds.played'],
        collection: 'Gameplay'
      }
    });
  });
</script>

Usage

The Metric visualization display a metric.

new joola.viz.Metric(options, callback);

Options

Options are passed via JavaScript.

PROPERTY TYPE DEFAULT DESCRIPTION
container String Required. A valid selector for the target container.
caption String Optional. A caption for the metric.
query Object Required. The query object.

Callback

The callback function receives two parameters:

  • err includes an err object detailing the exception and its stack.
  • ref reference to the visualization object itself.

Events

The Metric class exposes a few events for hooking into its functionality.

EVENT DESCRIPTION
metric.init.start Fired when the Metric starts loading
metric.init.finish Fired when the Metric finishes loading

HTML Template

<div class="jio metricbox">
  <div class="value"></div>
  <div class="summary" style="display:none;">
    <span class="base"></span>
    <span class="sep">vs.</span>
    <span class="compare"></span>
  </div>
  <div class="caption"></div>
</div>