The example below renders a BarTable for the rounds played by user's country at Gameplay, our fictitious example demo.

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

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


The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

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


Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-caption="".

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


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

pie.init.start Fired when the Pie starts loading
pie.init.finish Fired when the Pie finishes loading

HTML Template

<div class="jio-pie-caption"></div>
<div class="jio-pie-chart"></div>