The example below renders a 30-day timeline, day by day for the rounds played at Gameplay, our fictitious online gaming business.

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

  joola.on('ready', function() {
    new joola.viz.Timeline({
      container: '#example',
      caption: 'Timeline example',
      query: {
        timeframe: 'last_30_days', 
        interval: 'day', 
        dimensions: ['timestamp'],
        metrics: ['rounds.played'],
        collection: 'Gameplay'


The Timeline visualization display a metric based on the event's timestamp.

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


Options are passed via JavaScript.

container String Required. A valid selector for the target container.
caption String Optional. A caption for the chart.
chart Object Optional. A Highcharts chart object.
legend Boolean true Optional. Display a legend for the chart.
query Object Required. The query object.
pickers Object Optional. Holds reference to pickers.
pickers.main.enabled Boolean false Optional. Show main metric picker.
pickers.secondary.enabled Boolean false Optional. Show secondary metric picker.


The callback function receives two parameters:

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


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

timeline.init.start Fired when the Timeline starts loading
timeline.init.finish Fired when the Timeline finishes loading'timeline.init.finish', function() {
    console.log('Timeline finished loading'); 


  query: {
}, function(err, ref) {
  ref.on('timeline.init.finish', function() {
    console.log('Timeline finished loading'); 

HTML Template

The following HTML is injected into the container and used for initial drawing.

Please note that during its load the visualization will inject additional HTML based on your options and settings.

<div class="jio timeline caption"></div>
    <div class="jio timeline chartwrapper">
    <div class="jio timeline controls">
        <div class="jio timeline primary-metric-picker"></div>
    <div class="jio timeline secondary-metric-picker"></div>
  <div class="jio timeline thechart" style="width:100%;margin:0 auto"></div>