Generating Widgets

Widgets are the way to visualize your data in the dashboards. Widgets display your data or information in a selected format that you can configure through the Widget Generation Wizard.

Prerequisites

Before generating widgets, the following prerequisites must be completed:

A datasource must be configured for the widget. Datasources are configured in the <SP_HOME>/conf/dashboard/deployment.yaml file. The following is a sample H2 datasource.

- name: SAMPLE_DB
    description: Sample datasource used for gadgets generation wizard
    jndiConfig:
      name: jdbc/SAMPLE_DB
      useJndiReference: true
    definition:
      type: RDBMS
      configuration:
        jdbcUrl: 'jdbc:h2:${sys:carbon.home}/wso2/${sys:wso2.runtime}/database/SAMPLE_DB;IFEXISTS=TRUE;DB_CLOSE_ON_EXIT=FALSE;LOCK_TIMEOUT=60000;MVCC=TRUE'
        username: wso2carbon
        password: wso2carbon
        driverClassName: org.h2.Driver
        maxPoolSize: 50
        idleTimeout: 60000
        connectionTestQuery: SELECT 1
        validationTimeout: 30000
        isAutoCommit: false

Download the required JDBC driver (i.e., based on the database type you are using) and copy it to the <SP_HOME>/lib directory.

This driver must be OSGI compatibl in order to be detected.

Generating a widget

To generate create a widget and display it in a dashboard, follow the steps below:

Start and access the WSO2 SP Dashboard Portal. For detailed instructions, see Visualizing Data.
Click CREATE WIDGET to open the Create Widget wizard.
In the first page, enter a name for the new widget. In this example, let's enter Transactions as the name.

Click Next. Then select a data provider for the widget. The data provider is the source from which the widget extracts information to be displayed. In this example, let's select RDBMS Batch Data Provider as the data provider. As a result, the page is populated with the default configurations of the Sample_DB datasource. Click Next to proceed.

The parameters you need to configure vary depending in the data provider you select. The following are the parameters you need to configure for the other available data providers.

Siddhi Store Data Provider

Parameter Name Description Example

Siddhi App

The Siddhi application that stores the data to be visualized in the Siddhi store.

For the Siddhi store data provider to function, this Siddhi application must be saved as a Siddhi file in the <SP_HOME>/wso2/worker/deployment/siddhi-files directory.

define stream MasterpassTransactionDataStream (merchant_client_id string, merchant_name string, checkout_transaction_id string, card_brand_id string, card_brand_name string,card_bin long,card_holder_name string, card_expiry_mm int,card_expiry_yy int,card_aav int,card_sli int,card_billing_address1 string,card_billing_address2 string,card_billing_city string,card_billing_subdivision string,card_billing_postal string,card_billing_country string,contact_email string,contact_firstname string,contact_lastname string,contact_nationalid long,contact_gender string,contact_dob_mm int,contact_dob_yyyy int,contact_address1 string,contact_address2 string,contact_city string,contact_subdivision string,contact_country string,contact_postal string,shipping_address1 string,shipping_address2 string,shipping_city string,shipping_subdivision string,shipping_country string,shipping_postal string,shipping_recipient_name string,wallet_id int,region string,total_usd float);

@store(type='rdbms', jdbc.url="jdbc:mysql://localhost:3306/MasterCardDB", username="root", password="root" , jdbc.driver.name="com.mysql.jdbc.Driver")
                define aggregation MasterpassTransactionDataStreamByCardType
                from MasterpassTransactionDataStream
                select card_brand_name, region, sum(total_usd) as totalAmount
                group by card_brand_name,region
                aggregate every minutes ...year;

Query

The incremental query (in the Siddhi application you specified) that stores the data to be visualized in the Siddhi store.

from MasterpassTransactionDataStreamByCardType within  '2018-**-** **:**:**' per 'hours' select card_brand_name,region as re, sum(totalAmount) as total group by region

Publishing Interval The frequency with which you want the data provider to poll data from the Siddhi store. The time interval is specified in seconds. 5

RDBMS Streaming Data Provider

Parameter Name	Description	Example
Datasource Name	The name of the datasource from which the widget extracts information to be displayed.	`SAMPLE_DB`
Query	The query that the data provider needs to execute in order to get the required information from the database. e.g., `select * from ThisTable`	`select * from TRANSACTIONS_TABLE`
Table Name	The name of the table from which the data provider must poll data.	`TRANSACTIONS_TABLE`
Incremental Column	A data column that is used by the data provider to identify new records.	`CREDITCARDNO`
Time Columns	Columns in the Table that contain time data, seperated with commas.	`timeFieldOne` , `timeFieldTwo`
Publishing Interval	The frequency with which you want the data provider to poll data from the database. The time interval is specified in seconds.	`1`
Purging Interval	The frequency with which you want the data provider to run purging queries on the database. The time interval is specified in seconds.	`60`
Publishing Limit	The number of records you want the data provider to publish at a time.	`30`
Purging Limit	The number of purging queries that you want the data provider to run at a time.	`30`

Select a chart type of your choice. For this example, let's select Line/Area/Bar Chart Parent.
Configure your chart as follows:
- Select the data fields that should represent the X and Y axes of your graph. In this example, let's select Country for the X axis and Amount for the Y axis.
- If you want to do a color categorization, select the field based on which you want it to be done.
- If you want to design another chart within the same graph, click Add Chart and configure that chart as required.
Once you have configured your chart(s) as required, click Preview to see how it will look when it is added. In this example, the widget configured looks as follows.
To save the widget, click Create. A message appears to inform you that the widget is successfully created. Now this widget can be used in any dashboard. Once you click Create you are also redirected to the landing page.
Open any dashboard in the design mode (for detailed instructions, see Editing Dashboards). The Transactions widget you created is displayed in the Widgets panel as shown below.
Drag and drop the widget to the dashboard. It is displayed in the dashboard as shown below.
Click SAVE PAGE.

Customizing Charts

The following are advanced settings that you can use when you configure widgets.

Time formatting regex: The charts in WSO2 SP Dashboard Portal handle time series data automatically and format them accordingly. However, if you want to customize how they are formatted, you can specify the required time format in a regex format as explained in d3 documentation .
Tick axis angles: If you want to rotate the ticks of an axis,you can specify the amount (in degrees) as a numerical value.
Maximum length of the dataset: This property can be used if you want to limit the number of data points that are visible in a given chart at a time.
Add Chart (when generating Line/ Area/ Bar charts): This can be used if you want to draw another line, area or bar chart on the same XY plane using the same data set. Properties to configure another chart are provided in the form.
Color set to use in the charts: Charts are shipped with a default color set that is used to visualize the data. If you want to override this color set, you can define your own color set by using this option. You can define a list of colors in hex format that can be used in the charts.