Lab H: Configuring Live Data Visualizations

Lab H: Configuring Live Data Visualizations

TIBCO Software Inc.


Overview In this lab you will start Studio, import a project that contains tables and a recorded 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. Then you will connect to the

live data stream with a Spotfire analyst and visualize data using a Spotfire visualization.

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 LiveView tables, along with pre-computed aggregate views of the data by editors, or by page names. The project is large, and as such, takes a fair amount of time to start up the first time. It has authentication enabled (you will have to provide login credentials to both LiveView Web and the Spotfire analyst client when you connect to the Live Data Stream. Within LiveView Web, there are pre-configured cards available in the library. These cards were created by another user and shared. Use of the library is outside the scope of this lab; however, it is noted here that the cards exist in case you click on the library icon within LiveView Web. Finally, the project is configured with several alerts. In this lab, you will use the streaming data to create a 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.5 and Spotfire X.

Objectives

Configure a variety of LiveView Web visualization types and queries

Connect to a live data stream with Spotfire X.

Configure a Spotfire visualization using the live data stream

Prerequisites Access to a machine with LiveView 10.5 installed

There is a project file required to start this lab: LabH_ConfigVisualizations.zip.

Directions Complete the exercises that follow.

https://en.wikipedia.org/

Developing TIBCO LiveView™ 10.x Applications in TIBCO Streaming 10.x

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 LabH_Config_Visualizations

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

LabH_ConfigVisualizations.zip. Select that file and select Open

Ensure the only the second one of the two projects are selected from within the

selected zip file and click Finish:


TIBCO Software Inc.

You will notice the project has a red X indicating a problem. This is a false report of a

typecheck error. The project is, in fact, fine and will run.

Set the focus on LiveWikiData, right-click and select Run as -> LiveView

fragment


Dismiss the Typecheck Errors Found dialog. This is a falsely flagged error. If

there are real type check errors in your project, it will not start.

This project takes a long time to start. However, it has a .launch file which configures the

project to start in background mode. For reference sake (especially if you wish to configure

other projects to have their start up in the background), the run configuration looks like this:


TIBCO Software Inc.

While the project is starting, you can browse different areas of the project, such as the many

table definitions (src/main/liveview folder of the project) or the configuration files for the

project (src/main/configurations). Although this project has authentication in place, it is NOT

using encryption. The usernames and passwords are humanly readable. The password strings

can be encrypted; however, that topic is beyond the scope of this course. In order to know if

the project is ready, you can watch the console for a message such as:

(fragment deploy): *** All tables have been loaded. LiveView is ready to

accept client connections. Total start time(ms): 335047 ***

Alternatively, you can attempt to access the project with the LiveView Web client (following the

directions in step 2). If the project is not yet ready, the authentication screen will display in red

font a message that the server is still starting


2. Attach LiveView Web to the Running Project

Open your web browser

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

Authenticate

♦ Username lvadmin

♦ Password: BigManOnCampus

NOTE: the lvadmin has ALL privileges available and is provisioned to see multiple dashboards.

This project contains multiple dashboards and the lvadmin user has permission to see all of

them. At login time lvadmin is presented with a dialog to ask which of the several available

dashboards should the user log into:

Select lvwebprinciple’s dashboard and click Open. You will be presented with a

dashboard that has one page and one card. Read the message on that card before

continuing on with the exercises.

http://localhost:10080/lvweb


TIBCO Software Inc.

Exercise 2: 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

Choose Grid

Expand lineDelta

o Extractor field: lineDelta (this cannot be changed)

o Column label: change to be Edit Size

o Column label tooltip: (leave blank)

o Display value as: (leave as default: ${lineDelta|number:0})

RECALL: the formatting for display values uses an angular format. Each

data type has a default format. Details on those defaults as well as

options and examples are in this page on the community:

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

Edits ORDER BY ts DESC LIMIT 100


https://community.tibco.com/wiki/formatting-options-display-data-

liveview-web

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

o Under Conditional formatting click Add condition

Condition: lineDelta > 100 || lineDelta < -100

Name: large edit

Slide the slider bar to Change background color

Choose a color (light pink)

Click Save

Dismiss the card editor and resize your card so you can see all the column headers.

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

https://community.tibco.com/wiki/formatting-options-display-data-liveview-web

https://community.tibco.com/wiki/formatting-options-display-data-liveview-web


TIBCO Software Inc.


Exercise 3: 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

Switch to the Visualization portion of the card editor

Select Tree Map

In the Levels area, select pageName

For each level you configure, there will be an entry for color configuration

In the Colors area, expand pageName

o Ensure the slider bar is to the right for Random color

In the Value Settings area, select avgeditsize from the pulldown:

Select * from EditsByPage ORDER BY numedits DESC LIMIT 10


TIBCO Software Inc.

Click Save

Dismiss the card editor and resize your card

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

hierarchy. This particular table of live Wikipedia edits does not have any

hierarchical data.

Shown below 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:


TIBCO Software Inc.

Exercise 4: Geo Map

Overview Configure a Geo Map

Steps

1. Create a new Page

Name: Anonymous Edits

2. Create a new Card

Name: 20 Largest Anonymous Edits Last 24h

Query:

4. Configure the Geo Map

Click Visualization

Select Geo Map

Region

o Region: America

o Default zoom level: 4

Point settings

o Name: Change the default value to Edit

o Lattitude Field: editor_lat

o Longitude field: editor_lon

o Default Icon: pick a blue marker

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 Click to add a Conditional Icon

Condition:

Name: very large edit

Icon: pick a red marker

Leave Change tooltip unchecked

Data Lines

o Leave items in this area all as default

Advanced settings

o Leave items in this area as the default

Save

Dismiss the card editor and resize your card

Your Geo map card should look something like this (remember, this is live data, so your number

of markers and color of markers is expected to be different than what is shown here):

lineDelta > 5000 || lineDelta < -5000


TIBCO Software Inc.

Exercise 5: Spotfire Data Streams

Overview In this exercise you will use a Spotfire Analyst and connect to the same live data stream as used

in the previous exercises. Create a bar chart using Spotfire.

Steps

1. Start the Spotfire analyst

If using an AMI, find the shortcut on your desktop

2. Connect to the stream

Use the side bar to display the choices. Select Connect to

Scroll down the list of connectors and select TIBCO Spotfire Data Streams

Click the New Connection button


3. Configure the connection

Enter the LiveView Server URL

NOTE: the port number is assumed to be 10080. We are running our project locally

and on port 10080. Therefore a URL of simply localhost will suffice. However, if you

were running on another machine on a non-standard port, you would need a URL

such as: 50.232.240.46:80 (<machineIP:PortNum>)

Choose Username and password from the pulldown

o Username: SFwiki

o Password: SFdashboardWiki

Press Connect

4. Select tables of interest

In the Views in Connection dialog, select each of the Edit, EditsByEditor, and

EditsByPage tables, then click Add:


TIBCO Software Inc.

Click OK

An Add data to analysis dialog is presented:

NOTE: each table is marked as External

Click OK


5. Create a new Spotfire table visualization

In the Your data is ready! Area, click Start from visualizations

Choose the Table visualization type from the list.

Recall: not all Spotfire visualization types support live data.

Immediately a table (the equivalent of a Grid in LiveView Web) is presented with

data from the Edits table. The edits are happening in real-time, so the table should

be updating fairly quickly. Each time the data changes, the table is updated.

6. Create a new Spotfire bar chart

In the side bar, click the icon to see the visualization types

Click Bar Chart icon:


TIBCO Software Inc.

On the horizontal axis, choose editor_continent

The default data shown is Row Count

Choose Color By pulldown and select editor_country:


Click into one of the bars (shown here, North America). Notice how the edits from

that continent are automatically highlighted in the table visualization:

7. Clean up

Stop the project. Click the red and blue square to terminate the LiveView Fragment

Stop your Spotfire analyst client

Dismiss the browser that was running LiveView Web

Remember: your pages and cards will be retained. They are stored, by default, along

with the alerts in the project in the /src/main/resources folder in a file named

LiveView.h2.db.

Lab H: Configuring Live Data Visualizations

Documents

Transcript of Lab H: Configuring Live Data Visualizations