This documentation is for WSO2 Stream Processor 4.4.0 (the latest version of WSO2 SP. View documentation for the Streaming Integrator, the successor of WSO2 SP.

All docs This doc
Skip to end of metadata
Go to start of metadata


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.

At the end of this tutorial, you will be able to:

  • Create your own widget to represent data stored in an RDBMS table
  • Create a dashboard to render a widget
  • Secure your dashboard with required permission

Before you begin:

  • This tutorial is a continuation of Integrating Datastores. You need to complete it before you try this tutorial.
  • Download the com.mysql.jdbc.Driver and save it in the <SP_HOME>/lib directory.

Tutorial steps

Let's get started!

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


    The BeeGees

    Food ColoringWadjet Food Products30
    Chocolate ChipLarkspur Landing34

    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
        name: jdbc/SweetFactoryDB
        useJndiReference: true
        type: RDBMS
          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
      • On Linux/Mac OS:  sh

    1. You can access the dashboard via the following URL.
    2. 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.

      Name of your Dashboard Enter a unique name for your dashboard.Sweet Factory
      URLEnter a URL for the dashboard.sweetfactory
      DescriptionEnter 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.
  • No labels