Joao Barbosa

SVG Component

Blog Post created by Joao Barbosa Employee on Dec 22, 2017


Born from the need to simplify data consumption on dashboards, this component's goal is to provide more flexibility by leveraging SVG rendering capabilities.


The Spark and the Idea

The design of a particular dashboard to show a vehicle current status, based on his sensor data, required the use of the next image.


The intention was to expose in the easiest way the information needed to support future actions.


Despite all possibilities to do this using the available CTools components and methods, the idea of using an SVG image on the dashboard, which could be changed according to the data being received, sounded really cool.


As you might know, SVG images are basically XML files with four interesting characteristics (at least the ones that matter for this component): they are scalable, they normally end up with file sizes shorter than similar image formats, they can have identifiable elements on their structure, and they are modifiable once injected into the HTML DOM, via javascript.


So, to show something similar to the designed data visualization for our dashboard we only needed to produce the SVG image (badly represented on the people's icon below), with ids on the elements that we wanted to change, gather the information that each sensor was sending, and modify the SVG layout (colors and/or text), using the required business rules.



How to Use

With this in mind and a couple more requirements, we ended up by creating the SVG component's first version that is available through Pentaho Marketplace.The component is quite simple, you can add it to your dashboard layout just like any other component, and its use can be controlled mostly be these 4 parameters:


  • URL - the relative path to the SVG image that will be used to show your data
  • Keep Image - the indication if an SVG reload should be performed (or not) when a dashboard refresh is required by the user
  • CallBackDraw - a courtesy function that will be executed after all the SVG changes are performed
  • Data source - The information that will be used to manage all the modifications necessary to show your data current status


Datasource Format and other requirements

In fact, everything is going to be managed by the information on your component's data source. Each record will represent a new SVG modification and is characterized by the following 4 attributes (the order is not significant but the names are):


  • svgElementID - the SVG element id where we want the component to perform changes
  • changeType - the kind of change the component should execute on the current element. This first version allows style (any style attribute common on CSS styling can be applied to SVG images) and text updates
  • styleProperty - the style property that will be added/changed. On text type operations this attribute is not mandatory
  • value - the value that will be used on the style property or the text update.



CDA example - data source record to perform the people icon's change illustrated earlier


Summing up, the process to use this component should be something like this:

  • Install it from Pentaho Marketplace (server restart will be needed). The component's use was only tested on Pentaho 7.0 versions or higher.
  • Review the component's samples that will be available after installation on plugin-samples / sample-svg-component
  • On a requireJS dashboard, add your layout placeholder, like for any other component, add the SVG component and start to fill the component's parameters
  • create and join your data source with the component specification
  • test it on browsers that support HTML 5.0 and SVG rendering (and pay attention that your audience should also have this type of browsers)


Where and when to use it

Whenever you sense that data readability is improved by using a specific image, and you are about to show it on a CTools dashboard, consider the SVG component. Remember, you can always show sensor data on a table or a particular chart, but the data coming from car sensors will always be more easy to read if we can show it on a related image.


Related work

To spread the use of these visualizations in the Pentaho product family, a merge between Viz-API and SVG capabilities is also available. This new artifact, called Viz-SVG, will allow you to use this type of visualizations on Pentaho Analyzer, Pentaho Data Integration DET and also CTools.