Joola offers an intuitive and powerful query API, it's rich with possibilities, aggregations, filters and more, but for the purpose of this walk-through we'll focus on a single aggregation SUM, which does exactly what it sounds like it does, it sums a value of pushed events.

For this example, we'll sum the number of views of a watch event within the JoolaFlix collection.

Copy, modify and paste the cURL statement below into a terminal window. Replace , and with values specific to your application.

curl -X POST -H "Content-Type: application/json" --data-binary "{ 
    \"metrics\": [
      {
        \"key\": \"rounds.played\",
        \"aggregation\": \"sum\"
      }
    ],
    \"collection\": \"Gameplay\"
}" https://<APPLICATION_URL>/insert/<COLLECTION>?APIToken=<READER_API_TOKEN>

The response will look like this:

{
  "rounds": 10
}

Since we've inserted only one event (from previous Pushing An Event example), the result will show 10. If you keep pushing events from the previous step, you'll see this counter increase accordingly.

Visualization

Visualization is based on queries, let's take the query from the previous step and draw a metric box showing the SUM of views.

Create a simple HTML page and Copy, modify and paste the statement below. Replace <APPLICATION_URL>, <COLLECTION> and <WRITER_API_TOKEN> with values specific to your application.

<html>
  <body>
    <div id="example"></div>
    <script src="<APPLICATION_URL>/joola.js?APIToken=<READER_API_TOKEN>"></script>
    <script language="javascript">
      joola.on('ready', function(){
        $('#example').Metric({
          caption: 'Game rounds',
          query: {
            metrics: ['rounds.played'],
            collection: 'Gameplay'
          }
        });
      });
    </script>
  </body>
</html>

You're done, your browser will display a simple Metric Box visualization.

Let's review a few things that happened during this example:

  • First, we created a simple, stand-alone HTML page.
  • We included Joola's SDK and created a placeholder div named example.
  • We waited for Joola to become ready.
  • Once ready, we instructed it to draw a Metric Box within the example div that shows the total sum of views.