Tuesday, March 11, 2014

Embed a KPI chart into your web app

   Recently, a new cool feature has been added to the Dashbuilder echosystem: the ability to embed dashboard charts into your own web app via a lightweight easy to use JavaScript API.

   As you may know, Dashbuilder allows for the creation of custom feature complete dashboards. Now, once a dashboard is built, it's possible to pick up any KPI and paste it into your web application. 

   To see how this mechanism works, two out-of-the-box examples have been added to the tooling. To test them just type the following URL on a fresh Dashbuilder installation:

KPI embed sample

Report embed sample
   If you want to figure out how to use this JS lib just take a look at the HTML files provided. Both are displaying charts belonging to the pre-installed dashboards that come along with the tooling. 
  Notice, this brand new feature is only available in the latest sources in GitHub (soon in the forthcoming 6.1.0 Final release). So if you wanna play with it you'll need to build the release from sources, as described here.  

   In the near future, an additional RESTful API will be provided so that third-party applications can not only embed KPI mashups but also to make calls to the Dashbuilder data engine. REST support will empower Dashbuilder integration capabilities with remote apps, making possible for developers to retrieve/push data from dashboards. Some real world uses cases could be the following:
  • Alert management  based on KPI threasholds.
  • UI development reading the data coming from a given KPI.
  • Push data from an external app: ERP, CRM or the like, to feed a dashboard.
This and many others interesting features will be delivered throughout the next months. 

Stay tuned! 


  1. Hi,

    Is it possible to filter a KPI that is embedded in my website? I would like to add a KPI to my site that is pre filtered by country.

  2. Hi Craig, sorry for the late response.

    One option could be to create an specific data provider for getting only data specific to that country. This can be done by configuring the SQL criteria in case of an SQL provider.

    Another option, which requires some extra development, is to modify/extend the KPI panel implementation to receive filter requests on top of the KPI. Pull requests are welcome!