Build a dashboard using XML as data source

In this article we will use a XML data source and build it to display the various data sets in grid format.

This tutorial is an extension to the one you see in the documentation

https://www.infocaptor.com/help/xml.htm

All it uses is just XPATH syntax to extract various information.

Consider this XML document http://mtdemo.s3.amazonaws.com/StyleCopViolations.xml

This XML contains various compile time violations and has various attributes in the Violation tag.

We drag the HTML grid to the canvas

Image

Right click on the Grid and select Data source

Image

In the connection drop down select 'HTTP Output as XML..'

And then click on "Add Default Values"

Image

1. In the URL replace it with the source of the XML

2. In the selector you have to provide a valid XPATH syntax.

For reference, http://www.w3schools.com/xpath/xpath_syntax.asp

Image

And another important reference is on how to combine multiple selectors together using the | operators

Image

So, now let say we want to display the following highlighted elements

Image

i.e Violation, section and linenumber

Based on the XPATH syntax, Violation tag is the node and section and linenumber are the attributes of the violation tag.

The syntax for node tag is //Violation and to access the attribute we use the '@' sign in front of it.

And to bring multiple elements we use the '|' operator.

Putting this all together, we have the following selector

"selector":"//Violation | //@Section | //@LineNumber",

And our final Parameters should look like this

Image

In the columns parameter, we give the name to each element we want to bring in. This provides a user friendly name to each element and the number of columns in this list should match the number of elements we are bringing in.

Once we are good, we click OK and instantly see the following results

Image

Now since the data in the second column did not contain any blank characters , it was difficult to wrap the text in the column.

To facilitate wrapping we write a small javascript post processing code that replaces the dot (.) with a dot followed by blank space.

Image

var cols=glb["_odata"].length;
var rows=glb["_odata"][0].length;

for (var i=0; i < rows; i++)
{
glb["_odata"][1][i] = glb["_odata"][1][i].replace(/./g,". ");
}

Similarly, let say if you wanted to display all the attributes you can use the "@*" selector

Image

The @* will bring in all the attributes so we provide name for each column

Image

Again, in most of the attributes data that contains long text, there was no blank characters so we provide a javascript snippet in the Post JS section as follows

var cols=glb["_odata"].length;
var rows=glb["_odata"][0].length;

for (var c=0; c< cols; c++)
{
for (var i=0; i < rows; i++)
{
glb["_odata"][c][i] = glb["_odata"][c][i].replace(/./g,". ");
glb["_odata"][c][i]= glb["_odata"][c][i].replace(/\/g,"\ ");
}
}

Image

The '|' operator is very handy in this case because it acts like the 'SELECT' clause in SQL. This way you can bring in various elements together.

Join InfoCaptor and Get Free Dashboard Software

Posted in How-to, webdashboard-help | Tagged , , ,


Would you like to build your dashboard now?

If so, click to buy now, including 60 minutes of dashboard development for free!