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

The following prerequisites are required only in the following scenarios:

The data provider selected is RDBMS Batch Data Provider or RDBMS Streaming Data Provider.
If the data provider used is Siddhi Store Data Provider and the Siddhi application makes a reference to the data source defined in the deployment.yaml file.

Before generating widgets, the following prerequisites must be completed:

A data source must be configured for the widget. Data sources are configured in the <SP_HOME>/conf/dashboard/deployment.yaml file. The following is a sample H2 data source.
- 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.

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 +.

Then 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.
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.
- If you want to do any advance configurations, expand the Advanced Settings section and do the required configurations. For more information about the advanced settings you can configure, see Customizing charts.
- If the chart is a publisher widget, expand the Data Publishing Configuration section. Then specify how the widget outputs need to be displayed by entering the required text as shown in the example below. To add a new widget output, you can click +.
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 the Dashboard Designer wizard for an existing dashboard (for detailed instructions, see Editing Dashboards). Then click on the required page.
Click the Widgets icon.

This opens the list of available widgets in the left pane. The Transactions widget you created is included in this list.
Drag and drop the widget to the dashboard. It is displayed in the dashboard as shown below.

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.