Presenting Data

Introduction

In previous tutorials, you created Siddhi applications to analyze data using the Siddhi logic. In this tutorial, let's look at how you can present this data in a visual manner.

Tutorial steps

Let's get started!

1. After completing Tutorial 4, you have an RDBMS table where information is saved as follows.

   Name	Supplier	Amount
   Flour	Acme	460
   Sugar	Indigo6	272
   Honey	The BeeGees	9
   Food Coloring	Wadjet Food Products	30
   Chocolate Chip	Larkspur Landing	34

   WSO2 SP needs to identify this table. To enable this, let's add a datasource configuration as follows in the <SP_HOME>/conf/dashboard/deployment.yaml file under the wso2:datasources: => datasources subsection.

   - name: SweetFactoryDB
     description: Datasource used for Sweet Factory Supply Records
     jndiConfig:
       name: jdbc/SweetFactoryDB
       useJndiReference: true
     definition:
       type: RDBMS
       configuration:
         jdbcUrl: 'jdbc:mysql://localhost:3306/SweetFactoryDB'
         username: root
         password: root
         driverClassName: com.mysql.jdbc.Driver
         maxPoolSize: 50
         idleTimeout: 60000
         connectionTestQuery: SELECT 1
         validationTimeout: 30000
         isAutoCommit: false

   Now, you are ready to visualize data in the Dashboard portal of WSO2 SP.

   The Dashboard portal is the WSO2 Stream Processor’s take on presentation space. Using the Dashboard Portal you can create dashboards, add/drop widgets with advanced server-side capabilities.

2. Now let's access the dashboard portal as follows.
   1. To start the dashboard server, issue one of the following commands from <SP_HOME>/bin directory.
   • • On Windows:  dashboard.bat --run

   1. • On Linux/Mac OS:  sh dashboard.sh

   2. You can access the dashboard via the following URL.
      https://<Your_IP>:9643/portal
   3. Login to the dashboard by entering admin as both the username and the password.
3. Once you access the dashboard portal, the home page is displayed as follows with the dashboards that are shipped with WSO2 SP by default.
   
   Before creating a dashboard, let's create a widget as follows
   1.  Click CREATE WIDGET. This opens the widget generation wizard as follows.
      
   2. In the first page where you are prompted to enter a name for your widget, let's add Shipment Details as the name of the widget.
      
   3. Click Next   to open the page for configuring the data provider. In this scenario, you are visualizing data stored in the database table you have already created. Therefore, select RDBMS Batch Data Provider. 
      
      Once you select this, you are prompted to enter more data relating to the datasource you configured in the  <SP_HOME>/conf/dashboard/deployment.yaml file.
      
      1. In your datasource configuration in the deployment.yaml file, you have entered SweetFactoryDB as the datasource name. Therefore, you need to enter the same name in the Datasource Name field here.
      2. In the Query field, you need to enter the database query you need to run in order to retrieve the data to be visualized. Let's enter the following query to retrieve that data from the ShipmentDetailsTable table.
         select * from ShipmentDetailsTable

      3. In the Table Name field, enter the name of your table, which is ShipmentDetailsTable.
         Leave the default values unchanged in the rest of the fields. The information you entered for the data provider is as follows.
          

         For more information about the other fields to be configured for the data provider, see Generating Widgets.

   4. Let's click Next to configure the chart following the steps below.
      1. In this scenario, let's create a simple line chart to view your data. Therefore, select Line/Area/Bar Chart Parent as the chart type. You can select name for the x axis field field. Leave the default values for the rest of the fields unchanged.
          
      2. Before you create the chart, click Preview  to see a preview of the chart. The preview is displayed as follows.
         
         If you are satisfied with the preview, click CREATE to create the widget.  
4. To render the widget you created, you need a dashboard. Let's create the dashboard as follows.
   1. The previous step brings you back to the home page of the Dashboard portal. To create the dashboard, click CREATE DASHBOARD.

   2. In the wizard for creating dashboards that opens, enter information as follows.
       

      Parameter	Description	Example
      Name of your Dashboard	Enter a unique name for your dashboard.	Sweet Factory
      URL	Enter a URL for the dashboard.	sweetfactory
      Description	Enter a description for the dashboard.	Sweet Factory Shipment Details

   3. Click Add to proceed. You are directed to the home page that is created by default.
      
      Click the widgets icon (marked in the image below) to open the widgets panel.
      
   4.  You are directed to the dashboard designer with a list of widgets displayed in the left panel. Serch for the Shipment Details widget that you previously created. You can either type the name of the widget in the search bar or scroll down to locate it.
      
   5. To render the Shipment Details widget, drag and drop it to the dashboard container.
       
      Now you have successfully created your dashboard.
5. To be redirected to the home page with the list of available dashboards, click Portal. The Sweet Factory dashboard you created should be displayed there. Now you need to ensure that only the intended users are able to view your dashboard. As an owner of the dashboard, you can restrict access to the Sweet Factory dashboard for other users. To do this, click the menu icon for your dashboard, and then click Settings. 
   
   This opens the Dashboard Settings page. Enter user roles under each category of users as follows. Depending on your configured identity provider, the available list of roles is displayed in the drop-down list for each user type.
   
   
   1. Owners are the most pivileged users of the dashboard. They are the only users with access to this Dashboard Settings page. They can also edit and view the dashboard.
   2. Editors of a dashboard can either edit the dashboard or view the dashboard. However, they do not have access to the Dashboard Settings page.
   3. Viewers are the least privileged users of a dashboard. They can view the dashboard, but cannot edit it or change its settings.