Unit 7 Lab A: LiveView Web Visualization Configurations
Transcript of 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.
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.
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 3
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”
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 4 TIBCO Event Processing
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”
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 5
Your studio should now look like this:
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 6 TIBCO Event Processing
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):
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 7
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
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 8 TIBCO Event Processing
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
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 9
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:
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 10 TIBCO Event Processing
- 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
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 11
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
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 12 TIBCO Event Processing
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:
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 13
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).
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 14 TIBCO Event Processing
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
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 15
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:
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 16 TIBCO Event Processing
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
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 17
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.
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 18 TIBCO Event Processing
For this Tree Map, we will not have any drill down. Your tree map should look something
like this:
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 19
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
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 20 TIBCO Event Processing
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:
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 21
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
2. Create a new Card
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
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 22 TIBCO Event Processing
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
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 23
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
4. Create a new 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
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 24 TIBCO Event Processing
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”
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 25
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:
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 26 TIBCO Event Processing
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:
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 27
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”
Unit 7: Visualization Configuration in TIBCO LiveView Web
Page 28 TIBCO Event Processing
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
TIBCO Live Datamart 2.1.x Application Development
TIBCO Software Inc. Page 29
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.