We will see how to create a new widget chart on the dashboard page with the existing page template.

Prerequisites Before you start the tutorial, ensure that your workstation meets the following requirements:

• Database client tools to connect to the database to select, insert, update and delete data in dashboard schema.

• Web browser (prefer Chrome)

Widget Dashboard is a tool that helps you create basic chart or dashboard by configuration easily.

ONEWEB provides the database structure as well as the runtime to generate the dashboard. But there is no designer tool to generate the configurations. So the user will have to manually insert the configurations needed to generate the dashboard. This section will explain the database tables and the values to be inserted to configure the dashboard.

The main dashboard page component

Widget dashboard component

To create menu, insert data into table DASHBOARD_MENU following these values

To create chart widget, insert data into table WIDGET_PREF following these values

To configure chart, insert data into table DASH_WIDGET_PROP following these values

To create the page, insert data into table PAGE following these values

To configure series, insert data into table DASH_WIDGET_CHART_PROP following these values

Click the training page again. The screen should be shown look like this picture.

The chart represents Income of 1st quarter compare for each province.

To change pie color, insert data into table DSH_WIDGET_DATA_COLOR following these values.

Record 1

Record 2

Record 3

Record 4

Click the training page again. The screen should be shown look like this picture. The color of each quarter has been changed.

To edit series data, update data of table DASH_WIDGET_CHART_PROP following the orange highlight to change angle of information.

Click the training page again. The screen should be shown look like this picture. The new chart represents Income of Bangkok compare for each quarter.

To add chart widget to page Insert data into table PAGE_WIDGET_PREF following these values

Go to Dashboard page http://<hostname>:<port>/LightWidget/dashboard.do

Then click Training page that you have configured. The screen should be shown look like this picture.

To change the chart type from Line to Pie. Update column DASHTYPE of table DASH_WIDGET_PROP of the record to "pie".

To change the series type from Line to Pie. Update column CHART_TYPE of table DASH_WIDGET_CHART_PROP of the record to "pie".

Click the training page again. The screen should be shown as below The new chart represents the Income comparison between Bangkok and Upcountry by a quarter in the Pie chart.

Once you configure the dashboard completely and click Save, the dashboard configurations are stored in the database. To deploy the dashboard you have configured, you have to move your configuration data from the development database to the new database. It can be done by exporting the data and importing data to the new database.

Change chart to column stack

• Insert another record into table DASH_WIDGET_CHART_PROP following these values

• To change series type form Line to Column. Update column CHART_TYPE of table DASH_WIDGET_CHART_PROP of the previous 2 records to "column"

• To create stacked group BANGKOK. Update column STACK_GROUP of table DASH_WIDGET_CHART_PROP of BANGKOK to "BANGKOK"

• To add Chiang Mai to stacked group UP_COUNTRY. Update column STACK_GROUP of table DASH_WIDGET_CHART_PROP of CHIANGMAI to "UP_COUNTRY"

• To change chart type to Column stacked. Update column DASHTYPE of table DASH_WIDGET_PROP of your widget to "stacked_group_column"

Click the training page again. The screen should be shown look like this picture. The new chart represents Income comparison between Bangkok and up country by quarter in Column chart.

To add another series, change chart type back to Line chart.

• To change chart type form Pie to Line. Update column DASHTYPE of table DASH_WIDGET_PROP of the record to "line".

• To change series type form Pie to Line. Update column CHART_TYPE of table DASH_WIDGET_CHART_PROP of the record to "line".

• Insert another record into table DASH_WIDGET_CHART_PROP following these values.

Click the training page again. The screen should be shown look like this picture. The new chart represents Income comparison between Bangkok and Chaingmai by quarter.

To change color of series, update column FIELD_COLOR of table DASH_WIDGET_CHART_PROP of Bangkok to "green".

Click the training page again. The screen should be shown look like this picture. The new chart will change color of Bangkok to green color.