Create a dashboard

The Dashboard Builder is used to create an HTML5 dashboard. A dashboard allows users to look at data using one or more tabular or graphical visualizations. Dashboards can be used to view static, polled or streamed data. The dashboard to build for the tickerplant will contain a table grid of last traded prices, a line graph of time-bucketed trading volumes, and query the dhtRDB to obtain data for the table and the graph.

Start the dhtWorkflow. Select Tools > Open Builder > Dashboard Builder.

Screenshot

The Dashboard Builder will open in a separate tab.

Click on the document icon at the top of the screen to build a new dashboard.

Screenshot

Enter dhtDashboard in the dialog and click OK.

A dashboard is created, with its name in the top left corner. Save the dashboard using the disk icon.

Screenshot

Next, define a connection to the RDB process. Click the Connections button on the right side of the screen.

Screenshot

The Connection dialog appears. Click on the New Connection button.

Screenshot

Enter the relevant information for the RDB process, click Save connection and close the dialog.

Screenshot

Add a Data Grid component by dragging one into the workspace.

Screenshot

Resize the Data Grid to occupy the top half of the workspace.

Screenshot

Make sure the data grid is selected and then under Basics, click on Data Source on the right hand side.

Screenshot

This will pop up the Data Editor dialog. Click on the New button to create a new query.

Screenshot

Edit the Data Source:

  1. Right-click on the name and rename the datasource to lastTrade.
  2. Select dhtRDBConnection at the top of the dialog.
  3. Enter the query below into the query box.
  4. Set the subscription to Polling.
  5. Set the interval to 3 seconds.
  6. Change the max rows to 1000.
  7. Click Execute to populate the sample table at the bottom of the screen.
  8. Click Apply to save the changes.
  9. Click Close to close the Data dialog.
   select last price by sym from dhtTrades

Screenshot

The Data Grid will update every 3 seconds.

Screenshot

Save the dashboard.

Set up a Highlight rule to show changes in the data. A PRICE UP rule will color the price green if the current price is higher than the previous price.

Screenshot

A PRICE DOWN rule will color the price red if the current price is less than the previous price.

Screenshot

The table will now update according to the price change.

Screenshot

In Basics, disable Filtering and deselect Show Paging Control

Screenshot

Resize the Data Grid component to the size of the display table.

Screenshot

Save the dashboard.

Next, add a Drop Down component from the left.

Screenshot

Click the Data Source of the Drop Down component and complete the following

  1. Create a new Data source
  2. Right-click on the and rename the datasource to uniqueSymbols.
  3. Select dhtRDBConnection at the top of the dialog.
  4. Enter the query below into the query box.
  5. Click Execute to populate the sample table at the bottom of the screen.
  6. Click Apply to save the changes.
  7. Click Close to close the Data dialog.

Screenshot

Resize the Drop Down component to the width of the dashboard. The dropdown will not have any data yet.

Screenshot

In Basics click inside Selected value to open the View state dialog.

Screenshot

Create a new View State Parameter called name with a type of symbol and a default value of A. Click Select Item to confirm. This parameter will be used to link the Drop Down component to a Line Chart.

  • When setting the Default value, the Current value will update to the Default until changed by the user. When a dashboard is opened, default values will be used to populate the dashboard.

Screenshot

  1. Change Label to Select a symbol to chart.
  2. Set Width to 50, and Label Width to 175.
  3. In Data Source Mapping, set Value to sym and Text to sym.

Screenshot

To Add a line chart add a Canvas Chart component.

Screenshot

Resize the component to fit the layout area.

Screenshot

In Layers, create a new layer.

Screenshot

  1. Click in the datasource to open the source dialog.
  2. Create a new source.
  3. Right-click on the name and rename the datasource to symbolTrade.
  4. Select dhtRDBConnection at the top of the dialog.
  5. Enter the query into the Query Editor. The query returns the last 20 records with an additional column called time. It contains hours and minutes, where sym is an argument called name that we are passing into the query (as a user-input View State Parameter). To create the association between the query argument and the front-end View State Parameter, enter into the Value field the previously created <%name%> to link to the name argument in the query. See below.
  6. Click Execute. On successful execution, the lower panel grid will populate with the data from the query. Note how the time column adopts the hour and minute format.
  7. Click Apply to save changes.
  8. Click Close to close the Data dialog.

Screenshot

Modify the following attributes in the panel of the Canvas Chart component:

Screenshot

  1. Set the name to Size of trade.
  2. Set the X-Axis 1 Data to time.
  3. Set the Y-Axis Data to size.

Save and then Click Preview to study the interactions of the dashboard.

Screenshot

Switch values in the Drop Down component to change the Line Chart plot.

Screenshot
Line Chart

Save the dashboard; unsaved changes will show as a blue asterisk next to the save icon.

Screenshot

To open the Dashboard Manager drop down the list of Dashboard names in the top right and the dashboard manager icon is at the bottom of this list.

Screenshot

Screenshot

Make the dashboard the default dashboard by clicking the house icon next to dhtDashboard name. This will be the dashboard which appears when the application is loaded.

Screenshot