Home » Embedded dashboards: An in-depth look at Cumul.io

Embedded dashboards: An in-depth look at Cumul.io

  • by

In this blog post, I do a deep-dive of Cumul.io, a visualization solution best known for its embedded dashboards. I elaborate on some use cases and created an example application to demonstrate the ease of integrating a dashboard.

There will come a day that a user dashboard will make it onto the development backlog of your platform. Because your users, customers, or content creators need insight into what works and what doesn’t.

I’ve been involved in multiple projects where a dashboard was on the requirements list: ranging from some straightforward visualizations to track the uptime of business-critical resources to highly customizable dashboards. There’s one thing I know for sure: correctly visualizing information is harder than it seems. Consequently, it’s easy to underestimate the complexity of building a visualization tool from the ground up.

That’s what the people at Cumul.io figured too. Their dashboarding tool is designed for integration into your application. Dashboards can be created in the browser-based interface and can be embedded into your app with just a few lines of code. Through a server-side authorization system that generates tokens for individual users, you ensure that your users will only have access to the data that applies to their profile and personal settings.

Moreover, your app can communicate with Cumul.io’s embedded dashboards, and vice-versa! By using components such as sliders and dropdown menus, and by drilling down into the visualizations, users can filter the data. The innovative part is that Cumul.io’s API-first approach allows your application to reuse this filtered data for other purposes.

Imagine a consumer insights dashboard that is also a CRM user interface, a payroll management system, or a tool to communicate timesheets to your clients. Once you start thinking about it, there are numerous use cases for a dashboard that can be utilized as a UI.


From data to dashboard

From the Google Play Store Apps data set that is available from Kaggle, I created an example dashboard and application to demonstrate the capabilities of Cumul.io. Imagine a marketing agency that wants to show in-app ads in a list of apps. This dashboard could help them create the segment they want to reach through Google Ad Manager. Let’s call our marketing agency, “The Ad Machine”, and they have all their advertising tools integrated into their intranet.

Adding the data

I added the dataset to Cumul.io by simply uploading it as a CSV file. However, you should know that many connectors are available.

If the connector that you need isn’t available out-of-the-box, there is a way out. I’ve been told that Cumul.io has been developed with an API-first mindset; this is no different for the connectors part. The Plugin API should help your developers get the connection to your obscure storage solution up and running in no time.

Transforming the data

My dataset contains an estimate of the number of app installations, but these values contain commas and a ‘+’ suffix. Luckily, Cumul.io offers an adequate last-resort tool to transform your data before visualizing it. By putting together Excelesque functions, you can write formulas to create new useful columns. 

Visualizing the data

I created a dashboard where users can filter a list of apps based on the number of installs. By drilling down in one of the visualizations, end-users can also filter on paid/free, category, and rating.


Personalization at scale

Customize for device

Nearly all modern BI ecosystems produce dashboards that in one way or another are accessible on mobile devices. Yet, often, there’s no way to change the composition of the dashboard for different devices. It wouldn’t be the first time that I open a “responsive” dashboard on my mobile phone that looks like a modern-day Picasso or Mondriaan.

Cumul.io, on the other hand, lets you create the dashboard once, but lets you choose the optimal composition for tablet, mobile, and desktop devices. If truly every pixel matters, you can even give your dashboard a fixed width.

Multilanguage dashboards

Another feature that signals Cumul.io’s ambitions to be an enterprise solution within their niche is the possibility to translate dashboards. Multiple versions of the same dashboard can coexist, without the need to completely rebuild the dashboard.

Since Cumul.io is aimed at embedding dashboards, it would be silly not to offer that feature within its API. Changing the language of a dashboard is as simple as passing a single parameter.


Embedding the dashboard

Cumul.io offers two ways to embed a dashboard into a website or platform:

  • Public embedded dashboards: anybody can see and interact with the dashboard if they have access to the page where it is embedded. If they know the ID of the dashboards, they can even access it without having access to the page where you have embedded the dashboard.
  • Private embedded dashboards: users need to be authenticated before they can see and interact with the dashboard. Through the authentication process, the data available to the end-user can be tailored to the user and his usage rights.

Public embedded dashboards

Let’s assume The Ad Machine wants to make the app segmentation dashboard/tool available within their intranet. They could do that by sharing the dashboard publicly and embedding it within their environment. Embedding is as easy as enabling the public link and adding a JavaScript snippet to your website. I used plain JavaScript. However, if your app uses modern frameworks, there’s good news: there are plug-and-play libraries for React, React Native, and Angular. You can find my example on this page.

The addDashboard method takes two arguments in this case: the ID of the dashboard (which you can find in the URL) and a CSS selector of the element where the dashboard should be embedded.

<div id="myDashboard"></div>

<script type="text/javascript">
  (function(d, a, s, h, b, oa, rd) { 
    if (!d[b]) {oa = a.createElement(s), oa.async = 1; oa.src = h; rd = a.getElementsByTagName(s)[0]; rd.parentNode.insertBefore(oa, rd);}
    d[b] = d[b] || {}; d[b].addDashboard = d[b].addDashboard || function(v) { (d[b].list = d[b].list || []).push(v) };
  })(window, document, 'script', 'https://cdn-a.cumul.io/js/embed.min.js', 'Cumulio');
  Cumulio.addDashboard({
    dashboardId: '06302b48-67db-49cf-81b8-8d88b4c16ee8'
    , container: '#myDashboard'
  });
</script>

Publicly embedding dashboards makes sense for organizations such as news websites and public institutions. But not for platforms where each user should only see a segment of the data, based on their user profile. Enter private embedded dashboards.

Private embedded dashboards

Let’s assume The Ad Machine is a sizable agency, organized by sector. Claire is responsible for health and sports while Gene is responsible for finance and medical. They shouldn’t be able to target app users of each other’s sectors. For this to work correctly, Gene and Claire should be authenticated and should only have access to data, in line with their role within the organization.

To allow filters that are applied “externally” by your app or platform, you need to take two steps. First, create a parameter that allows your platform to communicate to the dashboard.

Next, add the same parameter to a dashboard filter.

Finally, we get to the coding part. I’m no developer, but I managed to set up the whole shebang in just a couple of minutes. I did some essential PHP scripting ten years ago, and I assure you it was all I needed.

The PHP SDK can be downloaded from Cumul.io’s GitHub page. By inserting the dashboard ID, the dataset ID (optional), your API key and token, you’re basically ready. The same goes for the Java, Node.js, and .NET SDKs.

In the snippet below, you can see I created a (rather silly) example login system through URL parameters. If the name URL parameter is “Gene,” Cumul.io loads the medical and finance apps. If it is “Claire,” the sports and health apps will be available. I left the JavaScript (see up) untouched, and everything was good to go.

require 'cumulio.php';
use Cumulio\Cumulio;

$dashboardId = '<your dashboard id';
$dataset = '<the dataset in your dashboard>';
$client = Cumulio::initialize('<your API key>', '<your token>');

$name = (isset($_GET["name"])) ? $_GET["name"] : '';

switch($name) {
  case 'gene':
    $categories = array('MEDICAL','FINANCE');
    break;
  case 'claire':
    $categories = array('SPORTS','HEALTH_AND_FITNESS');
    break;
  default:
    $categories = '';
}

$authorization = $client->create('authorization', array(
  'type' => 'temporary',
  'inactivity_interval' => '5 minutes'
  'expiry' => (new DateTime())->modify('+1 day')->format('c'),
  'securables' => array(
    $dashboardId, 
    $dataset
  ),
  'metadata' => array( 
    'category' => $categories
   )
));

You can see it in action over here:


Using the data

Below the private dashboard, I added a couple of buttons, for demonstrative purposes.

When you click the first button (“Get Data”), it returns the values of the circles in the bottom left graph.

Cumul.io not only allows you to get the data from the dashboard, but it’s also possible to request which filters have been applied. The “Get Filters” button returns the applied filters.

This opens the door to one of Cumul.io’s essential features, and what I briefly explained earlier: bidirectional communication between app and data. Through queries that use the filters that the end-user applied to the dashboard, the underlying data of the dashboard in its current state can be requested.

There’s more to properly processing the dimensions, measures, and filters but querying the data is as simple as calling the query method, as demonstrated below.

$query = array(
	'dimensions' => $dimensions,
	'measures' => $measures,
	'where' => $filters,
	'options' => array(
		'rollup_data' => false
	)
);

$data = $client->query(
	$query
);

The “Get Table” button in my fictitious example returns the underlying data (with filters applied) of the dashboard in a table format.


Why you should (not) use Cumul.io

Over the past few years, I have seen Cumul.io evolve from a basic browser-based dashboarding tool to a product that has rightfully claimed its place in a niche BI market. It’s no Tableau or Qlikview: you shouldn’t consider Cumul.io as an enterprise business intelligence ecosystem.

However, unlike complicated BI tools, Cumul.io promises effortless integration in your SaaS platform, website, intranet, etc. In my opinion, Cumul.io succeeds in this. Whether you’re considering sharing dashboards privately or publicly, the integration is easy and secure. The fact that I was able to set up the integration above in less than an hour is my proof to you.

There are many use cases to which Cumul.io is the answer.

  • You’re working on a SaaS platform and you want to offer your users some visualizations that show how they use the platform, how they’re performing, or what their audience looks like.
  • You’re a developer for a news platform and you want to give your journalists the opportunity to integrate visualizations in their articles.
  • You’re developing the backend of a large e-commerce platform and you want to give the account managers insights into how their products are performing.
  • You’re an IoT engineer and you want to visualize the performance of machines or its parts.

Not only does Cumul.io offer seamless integration, its payment model is also built around the idea of integration. Enterprise BI tools that offer integration as a feature earn their money through a pay-per-user model. For a SaaS platform, this is not an option. And even for internal use, giving access to a lot of employees can make total costs explode.

That’s why Cumul.io offers its tools through a pay-per-usage model. The basic or professional plan should more than suffice for using Cumul.io as an integrated dashboarding tool for internal use. For less than € 1000 a month, you can’t afford a developer or consultant to develop or maintain your in-house solution. If you’re planning on integrating visualization capabilities inside your popular Saas or news platform, get in touch with the Cumul.io team to get a custom quote — you can even white-label the whole business if you want to.

I wish I could list some bad experiences and lacking features. Nonetheless, within the niche of embedded dashboards, Cumul.io is a rather complete and mature product. A Python or R library would have been nice to easily upload preprocessed data to a new or existing dataset. Annotations might be handy for data journalists. But that is all I can think of.

To conclude, I list some of Cumul.io’s most important features that I elaborated on:

Secure private and public embedding
Interaction between dashboards and your platform
Multiple connectors + custom connector
Many chart types
Multilingual dashboards
Customize for each device
Data transformation tool