Generating Widgets

Widgets are the way to visualize your data in the Dashboards. Widgets display your data or information in a selected format which you can configure through the Widget Generation Wizard. Instructions on how to create, configure a widget and how to display it in the dashboard are covered in the following steps.

First to create a Widget we need to specify a data source for the widget. This has to be done in the deployment.yaml file found in the path <SP_HOME>/conf/dashboard/deployment.yaml.
Given below is an example of how the configuration of H2 data source should look like in the deployment.yaml.

- 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

Then copy the relevant JDBC driver of the selected database server to the <SP_HOME>/lib/ folder (Note: This driver should be OSGI compatible in order to be detected.)
After specifying the data source start the dashboard run time by going to <SP_HOME>/bin/ from terminal and run the command ./dashboard.sh.
Follow the URL for ‘portal’ app, displayed in the terminal. (The URL will be in the form of https://<Host>:<Port>/portal).

Log in to the portal app, and click on the ‘Create Widget’ button. You will be directed to the Widgets Generation Wizard.

Provide a suitable name for your widget. We are going to name that ‘Transactions’. Click on ‘Next’

Select a data provider of your choice. Let’s select ‘RDBMS Batch Data Provider’. Default configurations for the SAMPLE_DB will be loaded. Press ‘Next’

Each data provider requires user to provide a certain set of information in order for the data provider to send data to the widgets you can find the information on those below.
- RDBMS Streaming/Batch Data provider

Data provider configuration	Description
Datasource Name	Datasource name that was defined in the deployment.yaml of the dashboard runtime. Which is located in, <SP_HOME>/conf/dashboard/deployment.yaml
Query	Query that the data provider should execute to get data from the database Ex: select * from ThisTable
Table Name	Name of the table that the data provider should poll data from
Incremental Column	A data column that is used by the data provider to identify new records
Time Columns	Columns in the Table that contain time data, seperated with commas. Ex: timeFieldOne, timeFieldTwo
Publishing Interval	Frequency in which data provider should poll data from the database (input value should be seconds)
Purging interval	Frequency in which data provider should run purging queries on the database (input value should be in seconds)
Publishing Limit	No. of records the data provider should publish at a time
Purging Limit	No. of purging queries data provider should run at a time.

Select a chart type of your choice. Let’s select ‘Line/Area/Bar Chart’. You will see the form to configure a Line/Area/Bar chart.

From the charts section you can configure your Bar chart, and by clicking add chart you can configure another chart that can be drawn in the same graph.

Select the data fields that should represent X and Y axis of your graph if you want to do color categorization you can select which field you want to color categorize from.
Once you finished configuring your chart click on 'Preview' Button and you will be able to see how the widget looks like

Click on ‘Create’. You will see a message saying that the creation was successful. Now your widget is available to be used in any dashboard. You will be redirected to the landing page

Let’s use the widget we have created now.
Go to any dashboard in the design mode, and the widget can be found in the drawer.

Drag and drop the widget and save the dashboard to use it.

Customization of Charts

Some of the advanced settings in the gadget configurations are explained below,

Time formatting regex - Our charts will handle time series data automatically and format them accordingly, but if you want to customize how they are formatted, you can specify the required time format in a regex format according to the d3 documentation
Tick axis angles - When you want to rotate 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 is visible in one of the chart at a time.
‘Add Chart’ when generating Line/ Area/ Bar charts - When you want to draw another line, area or bar chart on the same XY plane using the same data set, this option can be used. Properties to configure another chart will be 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.