Creating a Digital Dashboard with looksoftware

Posted by Charles Munforte on Sep 9, 2013, 12:07:00 AM

   

What is a digital dashboard?

A digital dashboard is an easy-to-read single view that supplies real-time data to the user.  The idea behind a dashboard is that, like a car’s dashboard, it provides a way to monitor common activity at a glance.  The power behind a dashboard is that it allows the designer to consolidate data from a variety of sources and display that information concisely in the form of summaries, graphics, charts and gauges.

With the power of soarchitect we can use RPC (Remote Procedure Calls) to access the IBM ’s APIs, use ADO\DDM functionality to display a database table or use Web Services to retrieve real time data.  This information can then be displayed a variety of ways at the designer’s discretion.   In the following example we will show how one might elegantly display IBM i system statistics via Google Gauge Charts.  We will use DDM to display a database table within a Datagrid and show a stock’s movement for the week via Google’s candle stick chart by consuming web services. The image below shows what is achievable with the listed technologies.
 

Figure 1  Digital Dashboard within the IDE runtime

Figure 1: Digital Dashboard within the IDE runtime

 

RPC: IBM i Statistics:

Figure 2  Remote Procedure Calls

Figure 2:  Remote Procedure Calls

 

In figure 2, IBM i statistics are retrieved via RPC calls within soarchitect and then displayed to the user using Google’s Gauge chart, hosted within an embedded ActiveX IE WebBrowser control.  Here is a brief summary of the steps required to retrieve the data.

  • Declare a structure using Type and Dim actions.
  • Use RPCConnect to connect to the IBM i.
  • Use RPCDeclare to specify the API on the IBM i (QWCRSSTS).
  • Use RPCCall to pass parameters to this routine and receive outputs.

Figure 3 shows a working example in soarchitect’s macro editor.

 

Figure3  Macro to retrieve the data via RPC

Figure 3 : Macro to retrieve the data via RPC

 

To display the data we harness Google’s Gauge chart embedded within an ActiveX IE WebBrowser control.  To pass the data to the Gauge control, a script is created in soarchitect’s Script Editor to write the data to an external file as JSON (JavaScript Object Notation). JSON is a text-based open standard designed for human readable data interchange. The Google chart reads in this JSON and populates the gauge values, thus suppling real-time system information to the user in an easy to understand gauge control. 

 

DDM: IBM i DB2 database:

 

Figure4 Datagrid connected to a DDM database

Figure 4: Datagrid connected to a DDM database

 

For this part of the digital dashboard we use soarchitect’s DDM (distributed data management) functionality to display a database table within the Datagrid control.  This is done by inserting the Datagrid on the form and populating the ConnectionString and Source properties with a valid connection to an IBM i machine and DB file respectively.  When the form loads the DataGrid will be automatically populated with the table data.  See figure 5 for an example of the set ConnectionString and Source properties.

 

Figure5 Setting of Datagrid properties to connect to the database

Figure 5:  Setting of Datagrid properties to connect to the database.

 

Web Services:  Stock movement via Candle Chart

Figure6 Web service displaying Stock Price data

Figure 6:  Web service displaying Stock Price data

 

In this last example we are able to display a stock’s movement over a week via Google’s candle chart (See Figure 6) where the values are received via a Web Service call.  To initially retrieve the data we perform the following:

  • Use WebDescription with a URL to the WSDL file, and the name of the routine as it is defined in the WSDL 
  • Call the WebCall action to run the web service routine and retrieve the stock values
     
Figure7 Web Service calls to retrieve stock data

Figure 7:  Web Service calls to retrieve stock data

 

After we have received these values we can then chart them using Google’s Candle Chart. This is similar to the RPC IBM i Statistics example above, in that we write out the values to an external file as JSON and then use the Google Candle chart to read them in.  Voilà, stock movement information within an soarchitect form.

As we can see, soarchitect provides tools which can be used to create a real-time digital dashboard with powerful, easy-to-understand controls that convey a wealth of information to the user at a glance.  Other chart examples can be found on the Google Developers web site at …

https://developers.google.com/chart/interactive/docs/examples

If you would like a sample of the above digital dashboard please send a request to support@looksoftware.com

Or if you would like to read more on web service please view the on-demand webinar on Web Services here

Thanks for tuning in and feel free to leave some feedback.
Charles Munforte - Software Developer

 



Charles Munforte blog image

Author
Charles Munforte
Software Developer, looksoftware

 

Topics: IBM i, soarchitect, Web Services