Using the Drill Down Function when Creating Displays in RTDraw

This document describes one of the ways in which you can use "drill downs" to link one display to another. The example included here describes how you can view row data in a table in a different format in a different display by clicking on the table row.

Prerequisites

  • You should have completed the Building Your First Display and Dashboard in RTView Cloud document prior to running the flow in this document so that you are familiar with logging in, setting up a data server, attaching data, and publishing your display(s).
  • Make sure the PUBNUB-DATA demo server is added and available for use in RTDraw.

Creating Your Main (Top-Level) Display

First, we are going to create our top-level display.

  • Open a browser, navigate to http(s)://rtviewcloud.sl.com, and log in. If you do not have an RTView Cloud account, go to http(s)://rtviewcloud.sl.com/register and follow the instructions to create your account.

Note: If you log in using https, you must use https for your data server links as well. If you log in using http, you can use http or https for your data server links.

Once you have logged in, RTView Cloud displays.

  • Click the Design tab at the top of the browser.

RTDraw displays.

  • Select Default >Tables on the left menu, select the third table down (Advanced Table-Row Series), and drag-and-drop the table into the display.

  • Click the lower right blue “handle” of the table and drag it to the right to make the table larger.

  • Right-click on the table and select Attach to Data > Cache (Advanced).

The ATTACH TO CACHE_ADVANCED window displays.

  • Select PUBNUB-DATA from the Server drop down, select PnSensorNetwork from the Cache drop down, select current from the Table drop down, select * from the Column(s) drop down, and click the OK button.

Your table is populated with data from the PnSensorNetwork cache. Look at the values in the sensor_uuid column in the data attached to the table. Remember or write down one of the values, which we will use when defining a variable in the step. For our continuing example, we are going to use probe-0001.

  • Click File > Save As.

The SAVE AS window displays.

  • Specify a name for your display (for our example, we are going to use DDmain), and click Save file.

The display is saved and the name displays in the RTDraw top menu.

Creating a Drill Down Display

  • Click File > New to create a new display that will be used as the display to which you are drilling down.

  • Click Options > Variables from the top menu to create a variable that will be used to connect a row in the table on the main display to the chart on the drilldown display.

The LOCAL VARIABLES window displays.

  • Specify a name for the variable (DDsensor1, for our example), and click Add+.

The variable name is added to the list of local variables at the top of the LOCAL VARIABLES window with an empty Value field.

  • Specify a valid sensor_uuid Value from the table (probe-0001, for our example) and click Ok.

The variable is saved.

  • Click Charts > Line Charts and drag-and-drop a Basic Line chart into the display. Optionally, resize the chart using the blue handle on the corner of the chart object.

  • Right-click on the chart object in the display and select Attach to Data > Cache (Advanced).

The ATTACH TO CACHE (ADVANCED) window displays.

  • Select the following options and click Ok:

Server - select PUBNUB-DATA from the drop down list.

Cache - select PnSensorNetwork from the drop down list.

Table - select current from the drop down list.

Columns - select the two columns whose values you want to see in the chart. For this example, select time_stamp and photosensor. You will need to select them one at a time.

Filter Column - select the column in the table by which to filter the incoming data. For this example, select sensor_uuid.

Filter Value - specify the variable name we defined previously using a $ in front of the name. For example, use $DDsensor1. Adding this variable to the value will display the time_stamp value and the photosensor value in the chart for the sensor_uuid row you select in the main display.

The chart displays the photosensor values for the defined sensor_uuid at their respective timestamps.

  • To see which particular sensor_uuid we selected from the main display (and are viewing data for in the drilldown display), select Default > Text/Fields  and drag-and-drop a String object into the display.

  • In the Text field in the Label properties for the String object, enter text describing the object. For our example, enter Current Value for sensor_uuid.
  • Click the Value drop down list in the Data properties for the String object.

The ATTACH TO VARIABLE window displays.

  • Select your variable name (DDsensor1) and click Ok.

Your variable value displays in the String value box.

  • Next, we want to add an object that will allow us to click back to the main display. Click Default > Controls from the left menu, drag-and-drop the Drilldown object into the display, and click the  button in the Variables properties in the right menu.

The VARIABLES FOR CONTROL window displays.

  • Enter the name of your top-level domain (DDmain) in the Value text entry field next to the display variable, enter the text that will be used on the button in the display (Back To DDmain, for example), and click Ok.

The variable is saved and the text on the button has been updated.

  • Click File > Save As and save the display using the name DDdrilldown.

The new display name should display in the RTDraw top menu.

Connect the Main Display to the Drilldown Display

  • Click File > Open, select DDmain, and click Load.

The DDmain display opens in RTDraw.

  • Click the Name drop down list in the Drilldown properties.

The CHOOSE DISPLAY window displays.

  • Select the display to which you want to drill down (DDdrilldown), and click Use.

The name of the selected display (DDdrilldown) displays in the Name field and the message "You have 1 local variable(s) available" displays in the Variables text box.

  • Click the  button in the Variables box.

The VARIABLES FOR DRILLDOWN window displays.

  • Click the  button next to the DDsensor1 local variable to select the variable.

The variable name is moved to the Selected variables section in the window.

  • Click the Value drop down on the VARIABLES FOR DRILLDOWN window to display the CHOOSE COLUMN window.
  • Select sensor_uuid from the drop down list on the CHOOSE COLUMN window and click Ok on the CHOOSE COLUMN and VARIABLES FOR DRILLDOWN windows.

The variable name and its value display in the Variables text box.

  • Click File > Save to save your changes.

Test Your Drilldown

  • Click the  button in the upper right-hand corner to turn on "Preview Mode," which allows you to see how your displays work once you enable them.

The Preview mode is enabled message displays.

  • Click the row in the table containing the sensor_uuid that has a value of probe-0002.

The DDdrilldown display should open with photosensor and timestamp data from the row containing probe-0002.

  • Click the Back to DDmain button in your display.

Your are returned back to your main (DDmain) display.

You can now publish your displays so that others can use them. See Publishing Your Display for more information.