Unit 7 Lab A: LiveView Web Visualization Configurations

TIBCO Live Datamart 2.1.x Application Development

TIBCO Software Inc. Page 1

Unit 7 Lab A: LiveView Web Visualization Configurations

Overview In this lab you will start Studio, import a project that contains tables and a live feed of data, run

the project (which will publish data into the tables) then use LiveView Web to visualize data.

You will configure various LiveView Web visualization types, including both the format for the

display data itself as well as conditional formatting. In addition, you will configure drill down in

both visualization types that support that functionality and via chart linking for the visualization

types that do not support built-in drill down capability.

From the Project’s README: This project illustrates connecting to a real-time streaming feed of updates to the Wikipedia Free Encyclopedia (https://www.wikipedia.org/), the English version (https://en.wikipedia.org/), performing geo location (IP address to geographical coordinates) for anonymous edits, and storage of the raw edit events in Live Datamart tables, along with pre-computed aggregate views of the data by editors, or by page names. In this lab, you will then use the data to display a rich LiveView Web dashboard to showcase various visualization features and functionality available in the product. NOTE: this lab and its screenshots are designed specifically for LiveView Web version 1.3. Using a version of LVWeb earlier than that should use the “Unit7_Lab.docx” or “Unit7_Lab.pdf” file, not this version of the lab instructions.

Objectives Configure a variety of LiveView Web visualization types

Configure conditional formatting

Format display data

Configure drill down capability

BONUS: configure a new type of Alert (similar to the last unit, but with a different

action. This alert will aid in use of one of the visualization types).

Prerequisites Access to a machine with Live Datamart 2.1.x installed as well as LiveView Web 1.3. There is a

project file required to start this lab: Unit7_LabFile.zip.

Notes: 1) A common error is that data does not flow, and this can be caused by a firewall

preventing traffic over the IRC port (TCP 6667). You will see an error about a socket not being able to be bound, in the server startup console.

https://en.wikipedia.org/

Unit 7: Visualization Configuration in TIBCO LiveView Web

Page 2 TIBCO Event Processing

2) There is no table trimming configured on any of the tables in this project as delivered. You may wish to use your knowledge from the previous unit to watch the fill level (number of tuples) in each table. Based on the size of your tables, you may wish to define table trimming alerts on each of the tables.

Directions Complete the exercises that follow.



Lab A — Exercise 1: Set Up

Overview In this exercise, you will import the project and configure an alert.

Steps

1. Import existing LiveView Project

Start StreamBase

At the dialog for a workspace name, enter “Unit7”

From the Welcome screen, choose “Workbench” from the upper right corner

From the StreamBase Studio Demos perspective, choose “Go to Authoring” in the

upper right hand corner

Choose File->Import

♦ In the selection Dialog, expand the General tab and select Existing Projects into

Workspace, then click “Next”



In the Import Projects dialog, select radio button for “Select archive file” and its

accompanying Browse button. Traverse your disk to location of Unit7_LabFile.zip.

Select that file and select “Open”

Ensure the Unit7_SBLV_WikiEdits project is selected from within the selected zip file

and click “Finish”:

Dismiss the Subversive Connector Discovery Dialog (Click “Cancel”)

Set the focus on Unit7_SBLV_WikiEdits, Right click and pick “Open LiveView Project

Viewer”



Your studio should now look like this:



2. Run the Project

Start the project running (click white arrow in green circle upper right)

Wait for animations on tables to stop before proceeding to next step

3. Attach LiveView Web to the Running Project

Open your web browser

Go to the URL: http://localhost:10080/lvweb

4. Create a Page

This project has never been used with LiveView Web before; therefore, no

dashboard is associated with it.

REMINDER: once you build a dashboard with pages and cards, that

configuration will be saved with the project. Each additional time you

access the project and use LVWeb, you will see whatever set of pages and

cards you last saved. However, for this lab, we started a new workspace

and a new project; therefore you have no dashboard.

Dismiss the help tutorial dialog; press “OK”

Dismiss the next help tutorial dialog; press “OK”

Add a new page; click the New Page button

The focus is on the tab within LVWeb for the new page. Enter “Gauge Page” and

press return

5. Define an Alert

Pick the Bell Icon to invoke the Alert viewer (at initial startup, there are no alerts so

the Alerts view dialog will be empty):



Click Alert Rules List

Click Add alert rule – an Alert Rule Configuration Editor will be presented:

NOTE: we are going to define an alert to let us know when a large edit

occurs. Large is set to anything greater than 1000 characters. When the



alert fires, we will add a message to the Alerts table using a parameter

syntax. The parameters will be evaluated at runtime and thus the

message written into the Alerts table will be specific to the page and the

number of characters changed on that page.

The table used has a field named lineDelta. That field is actually the

character count of the change, not a line count.

♦ Alert Rule Name: “Large Edit”

♦ Message: $pageName ($lineDelta characters)

♦ Non-aggregate Condition

♦ Query Based Alert (this button is picked by default)

- Table: Edits

- Condition: “abs(lineDelta) > 1000

- Execute actions: immediately

- Do NOT enable quiescence



Scroll to see the Actions portion of the Alert Rule Configuration Editor. Click the Add action

button.

♦ From the Actions area, expand your newly created Publish Alert action by clicking

on the side arrow

♦ From the newly visible area of the configuration editor, check each of the options:



- Override generated key: slider should be in the “off” position (to the left)

- Override Message: should be in the “off” position (to the left)

- Recipient: enter an asterisk

- Do NOT choose to add any rows

Click Save in the Alert Rule Configuration Editor dialog

NOTE: because we are getting live data from Wikipedia, we do not know how long it

will take to see a large edit. However, chances are it should happen fairly soon. In

the next exercise, you will create a visualization to let you see how many times this

Alert fires per minute.

In the Alert Rule List, use the slider (move it to the right) to enable this newly

defined alert:

Dismiss the Alerts dialog by clicking on the Bell Icon again



Lab A — Exercise 2: The Gauge

Overview In this exercise, you will configure a gauge as your visualization type.

Steps

1. Create a Card

Click “New Card”. You will be presented with the card editor:

Click “Untitled” and name your card “Alerts per Minute”

2. Query the Alerts Rules table

Pick the LVAlertsRulesStatus table from the query builder “Choose a table”

pulldown

From the Query builder, unselect ALL the fields EXCEPT AlertsPerMinute

Click “Save”

3. Configure the AlertsPerMinute Card to use a Gauge

Click Visualization in the card editor:

Up to this point, we have only used the default visualization type, the

grid. The Visualization portion of the editor presents all possible other

visualization types for use.

Pick the gauge icon



Once you choose a visualization type, the Settings for that specific

visualization will be shown.

Pick which type of gauge you want (needle or filled – pick needle)

The Value Field pull down has only one choice because the query is returning only

one field from the table

Change the Max Gauge Value to be “10”

Leave all other fields as the defaults:

Click Save

Your gauge should look something like this:



Your gauge should show the number of alerts that have fired in the past

minute. In addition, each time the alert fires, you should see a message

on your LiveView dashboard. Also, in the Alert Viewer, there should be a

message for each fired Alert (see image below).



Lab A — Exercise 3: Conditional Formatting

Overview In this exercise, you will create a query, display the results in the grid, then configure one of the

fields to have conditional formatting.

Steps

1. Create a new page

Name: Conditional Formatting

2. Create a new card

Name: Live Edit Stream – 100 most recent

Query:

Order By in LiveQL (and in SQL) sorts the result-set in ascending order.

DESC makes the order be descending instead of the default. Thus, the

highest number of edits by page are listed first.

LIMIT 100 limits the result-set to only 100 total items

3. Configure the Conditional Field

Click Visualization

Expand lineDelta

o Exgtractor field: lineDelta (this cannot be changed)

o Column label: Edit Size

o Column label tooltip: (leave blank)

o Display value as: (leave as default: Integer)

o Format tooltip: ${lineDelta|number:0}

o Under Conditional formatting click “Add condition”

Condition: lineDelta > 100 || lineDelta < -100

SELECT pageName, diffURL, editor, lineDelta, comment, ts FROM

Edits ORDER BY ts DESC LIMIT 100



Name: large edit

Click Text Box for Change background color

Choose a color (light pink)

Click Save

Your grid should now show some number of pink background Edit Size fields:



Lab A — Exercise 4: Tree Map

Overview In this exercise, you will configure a tree map visualization.

Steps

1. Create a new Page

Name: Tree Map

2. Create a new Card

Name: Top Ten Edited Pages

Query:

3. Configure the Tree Map

In the Levels area, select pageName

In the Value area, select avgeditsize

Click Save

The tree map has built in drill down. If you had hierarchical data, you

could list each level of the hierarchy in the Levels area. The most generic

or broad level should be listed first, then each subsequent level of the

Select * from EditsByPage ORDER BY numedits DESC LIMIT 10



hierarchy. In the sample shipped with LiveView Web, the sample data

has a color designation; within the different colors, there are categories;

within the categories there are sku’s. In this way, if you had a

visualization that supports built-in drill down, you put the color as the

outer most designation and when you click into a specific color, the

visualization would change to show you the specific category values that

are within the chosen color. Similarly, when you click on a category, such

as Toy, you would see the specific sku’s and toys in the toy category.

Shown here is a level setting for the data set in the sample shipped with

LiveView Web as well as a starburst visualization showing the hierarchical

data relationship.



For this Tree Map, we will not have any drill down. Your tree map should look something

like this:



Lab A — Exercise 5: Geo Map

Overview Configure a Geo Map

Steps

1. New Page

Name: Anonymous Edits

2. New Card

Name: 20 Largest Anonymous Edits Last 24h

Query:

4. Configure the Geo Map

Click Visualization

Region

o Region: America

o Default zoom level: 4

Data Points

o Point Settings – click to add a point to the map

o Name: Edit

o Lattitude Field: editor_lat

o Longitude field: editor_lon

SELECT pageName, editor, lineDelta, ts, editor_lat, editor_lon FROM Edits

WHERE !(isnull(editor_lat)) AND !(isnull(editor_lon)) WHEN ts

BETWEEN now()-days(1) AND now()

ORDER BY lineDelta DESC

LIMIT 20



o Default Icon: pick a blue marker

o Click to add a Conditional Icon

Condition Name: very large edit

Expression: lineDelta > 5000 || lineDelta < -5000

Icon: pick a red marker

Data Lines

o Leave items in this area all as default

Data Point Tooltip

o Uncheck editor_lat and editor_lon (thus those coordinates will not be

shown on the data point tooltip)

Save

Your Geo map card should look something like this:



Lab A — Exercise 6: Chart Linking

Overview In this exercise you will manually link two visualizations together. Some visualizations support in

place drill-down. Chart linking allows a choice made from one chart to drive what is see in the

other chart. Chart linking can thus be used to implement drill down in visualization types that

do not have built-in drill down capabilities.

Steps

1. Create a new Page

Name: Chart Linking


Name: Number of Edits by Continent

Query:

Note: this card will be the card that controls the second card. We call this

the controller.

3. Configure the Bar Chart

Click Visualization

Click Charts

Type: Bar

o Vertical Axis

Axis Name: Continent

Field: Select editor_continent from the pulldown

SELECT editor_continent, sum(editcount) AS editcount FROM EditsForMap

Where !(isnull(editor_continent))

Group By editor_continent



o Horizontal Axis

Axis name: Number of edits

Leave “Logarithmic” check box unchecked

Leave “Fix zero at middle” slider to the left

Leave “Show one more value axis?” unchecked

Fields:

Select editcount to be displayed (remove any other fields)

Which value axis to use: “Number of Edits” from pulldown

Name in legend: Edits

Tooltip: use default (${editcount|number:0})

o Reference Lines & Hilighted Areas

Leave all the settings in this portion of the editor as defaults – do

NOT add any reference lines or highlighted areas

o Dynamic Bar Sets

Leave all settings in this portion of the editor as defaults – do NOT

check the “Enabled” check box

o Bar Settings



Leave all sliders to the left as the default

o Stacking Settings

Leave all sliders to the left as the default

o Legend Settings

Show legend?: uncheck

Save this card


Name: Continent Details

Query:

Note: this card will be the card that will be controlled. A click in the

controller card will control what is displayed in this card. We call this the

controlled card. Controlled cards must use a parameter in the query. It

is this parameter that will receive the value from the Controller card.

What is clicked in the controller is sent to the controlled. The value sent

is substituted into the variable in the controlled query.

If you hit save now, no data will show in your chart because the variable

has no default value. This chart will not work correctly until we configure

the chart linking so the controller sends a value to the variable in this

query.

5. Configure the Pie Chart

Click Visualization

Click Drill-Down Pie

Level Settings:

SELECT editor_continent, editor_countrycode, editor_statecode,

editcount FROM EditsForMap

WHERE "" = $continent OR editor_continent = $continent



o Level 0: select editor_countrycode from pulldown

o Level 1: select editor_statecode from pulldown

Value Settings:

o Value field: select editcount from pulldown

Display Settings:

o Labels: check “Show level” AND “Show percentage”

o Tooltip: check “Show value” (leave other 2 unchecked)

Save this card

6. Configure the Chart Linking

Invoke the Chart Link Editor

o From the Number of Edits by Continent card, hover over the settings icon.

o From the menu, choose “Edit Chart Links”



o Leave the left side alone (we do not want any cards to control the Number

of Edits by Continent card)

o On the right, click the “+” to add a card to be controlled by Number of Edits

by Continent card:

o From the dialog, choose “Continent Details”:

Once you choose a card to be controlled, an additional portion of the

dialog appears:



o In the new area of the dialog, choose “editor_continent” from the pulldown

to be mapped from the Number of Edits by Continent card. It is this field

that will be substituted into the variable ($continent) in the query of the

Filtered Country card:

o Click Save on the Chart Link Editor Dialog

Your charts are now linked. When you click on a continent in the

Controller card (Number of Edits by Continent) the selected continent is

sent to the Controlled card (Filtered Country). Click North America and

your Pie Chart should show the edits happening in North America:



The Filtered Country pie chart is a drill down pie. You configured it to

have two levels of data. Thus, if you click on one of the slices of the pie,

the pie will drill-down into that particular state:

Notice at the top of the chart, the label lets you know you are inside of

Canada within North America. If you click on “CA”, your pie will go back

up to the continent level vs. this drilled-down level.

Another option: flip

Minus the grid, each chart type has a flip option :

When you click on the flip icon, the visualization changes to a grid and shows the data that is

being shown in the visualization. In this example, our Edits By Continent bar chart is linked to

the Continent Details chart. We clicked on North America in “Number of Edits by Continent”



and our Pie chart is now showing the Edits by Country within North America. We can flip the pie

chart and see the details of the data driving the pie chart:

To flip the chart back to a pie, click the chart icon:

The flip option is a simple toggle. You either see the visualization you configured, or flip to see

the grid. If you flip back, you leave the grid and return to the chosen visualization.

Stop the project

Lest your project continue to run, fill tables and exhaust your system resources, stop

the project



For more examples of different types of charts and configurations, please

see the LiveView Web tutorials (specifically, video 4: Introduction to

column, bar and other related chart types). Those videos are available off

the devZone:

https://devzone.tibco.com/display/LEARN/TIBCO+LiveView+Web+Tutoria

ls

This concludes the Lab (exercises 1 through 6) of LiveView Web Visualization Configuration in

TIBCO Live Datamart for Unit 7 of the TIBCO Live Datamart 2.1.x Application Development

course.

https://devzone.tibco.com/display/LEARN/TIBCO+LiveView+Web+Tutorials

https://devzone.tibco.com/display/LEARN/TIBCO+LiveView+Web+Tutorials

Unit 7 Lab A: LiveView Web Visualization Configurations

Documents