Using IgniteUI to create your own data visualizations in ReportPlus

ReportPlus allows you to connect to enterprise data sources, from your mobile device and visualize data. It provides more than 20 different options for visualizing data. Among them: grid view, text view, map view and several data charts, such as: column, pie, scatter, bubble, candlestick, etc. But there are times when may need another option, not available in the out of the box selection. It’s with these scenarios in mind that we’ve introduced a new option for you to create your own data visualizations in ReportPlus.

Do It Yourself Visualizations

ReportPlus v3.0 introduced the DIY Visualization option in the visualization panel, along with a Javascript API. The DIY Visualization option allows you to configure the url where you host an html webpage. This page is able to interface with ReportPlus by using the new javascript API to get the data ReportPlus has retrieved from the data source, and render it any way you want. This allows you to extend the set of visualization options that come out of the box with ReportPlus with any custom html5 data visualization. It also saves you from the hassle of connecting to the data source and getting the data one specific user is authorized to obtain, while allowing you to reuse any visualization you may have come up with, across different data sets.

The DIY option is displayed in the visualization's menu of the widget editor, with an icon enclosed by the "less than", and "greater than" symbols: </>.

For instance in this picture the state of a business process is displayed.  The data is visualized with a flow that’s conditionally formatted. States in red have more pending tasks than what’s considered desirable, while states in green are ok.

ReportPlus Javascript Bridge API

Getting started with displaying data retrieved by ReportPlus from html code is straight forward. You must invoke one method to signal the container, and then process the data in a dataReady handler. The code looks like the following:

        window.RPBridgeListener = {
        	dataReady: function (tabularData) {
				for (var i = 0; i < tabularData.data.length; i++) {
					//iterate and display data
				}				
        	}
        };
	$(function () {
		RPBridgeUtils.notifyExtensionIsReady(true);                  
	});

For a more complete reference of the DIY API check this section of the ReportPlus User Guide (http://dl.infragistics.com/reportplus/help/ReportPlus-v3.0-UserGuide.html#DIYVisualization).

IgniteUI and getting the best from both worlds

Infragistics is a world class provider of building blocks for software developers. Among the suite of products it provides is IgniteUI, a complete toolset for jquery & html based responsive web development. Among the data visualization controls it ships are: bullet graphs, funnel charts and sparklines.

A basic sample with IgniteUI bullet graphs

In this section we are going to show how to display data retrieved by ReportPlus using a set of IgniteUI's bullet graphs

Assuming we are retrieving a data set with revenue by region information, like the following (available as .csv):

Region	Actual Revenue	Target Revenue
Northeast	10	14
Midwest	19	17
South	23	20
West	25	28

We are able to create a visualization like the following:

By using IgniteUI bullet graphs with the following piece of javascript code:

window.RPBridgeListener = {
	dataReady: function (tabularData) {
		$("#myDataVis").empty();
		for (var i = 0; i < tabularData.data.length; i++) {
			var divName =  "bulletgraph"+i;
			var rowData = tabularData.data[i];					  
			var rowDiv = $("<div id='"+divName+"'></div>");
			$("#myDataVis").append("<h1>"+ rowData[0]+"</h1>");
			$("#myDataVis").append(rowDiv);
			
			rowDiv.igBulletGraph({
				height: "80px",
				width: "100%",
				minimumValue: 0, // default is 0
				maximumValue: rowData[2]*1.3, // default is 100
				interval: 5,
				rangeBrushes: ["#FF0000", "#CC9900", "green"],
				value: rowData[1],
				targetValue: rowData[2],
				ranges: [
					{
						name: 'bad',
						startValue: 0,
						endValue: rowData[2]*0.5
					},
					{
						name: 'acceptable',
						startValue: rowData[2]*0.5,
						endValue: rowData[2]*0.85
					},
					{
						name: 'good',
						startValue: rowData[2]*0.85,
						endValue: rowData[2]*1.3
					}], 
				formatLabel: function (evt, ui) {
						ui.label = ui.label+"K";
					}
			});
		}				
  }
};

In a nutshell this code iterates over the set of rows retrieved by ReportPlus, assuming that the contents of the first column are the name of the region, while the contents of the second and third columns are the actual and target revenues respectively. For each row it creates a bullet graph igniteUI component.

You can check the source code for the whole webpage in this link.

Best Practices for DIY Visualizations Development

When developing a new custom html visualization it’s often handy to mock the integration with ReportPlus with a static data set. In this way you are able to develop and test your custom visualization in the browser, without switching environments, speeding up the development process. You can mock it in the following way:

		$(function () {
			//RPBridgeUtils.notifyExtensionIsReady(true);   
			var tabData = {
			   data:[["East",18,19],["West",13,11]]
			};
			window.RPBridgeListener.dataReady(tabData);                
		});

Also when trying it from ReportPlus to force the refresh of the webpage to test modifications while tweaking the html it works to switch the selected visualization, back and forth, forcing a reload of the webpage.

To infinity and beyond

The expressive power introduced with the DIY option in ReportPlus is limitless. It opens the door to all kinds of data visualizations and integrations. It’s now possible to have widgets in dashboards become actionable, not only presenting data but also allowing integrations with enterprise resource planning platforms that expose a Web Services API. For instance a ReportPlus dashboard can display a widget with buttons allowing the user to approve, or reject a specific expense, in the light of all required information to make an informed decision.