Building an Analytic Dashboard With Visual Discovery Components
This section of the tutorial illustrates how to create
an analytic dashboard that contains two bar charts, a data constellation,
a pie chart, and a summary sheet. The first four controls show revenue
by different values (store, region, city, product type). The last
control (summary sheet) shows various values (quantity, returns,
and revenue) for each sales representative. The data constellation
is placed on top of a map of the United States.
The final output of this section should look similar to the
following image.
Note: On any webpage, colors and appearance can vary slightly
from machine to machine. Visual Discovery is particularly sensitive,
because it is an ActiveX object. Consequently, the images included
in this tutorial may appear slightly different from the result you
achieve.
Visual Discovery controls use data from a .txt or .fex (with
PCHOLD FORMAT VISDIS) output file. To understand how to create this
type of file, see Developing an Analytic Dashboard. You create analytic dashboards using
HTML Composer, which you can access from:
- The Developer Studio
project area.
- WebFOCUS Environments:
Data Servers.
- WebFOCUS Environments:
Repository.
Tip: As you perform the steps in the tutorial, save your
work frequently.
x
Procedure: How to Create the HTML File
-
In your
project or application folder, right-click the HTML Files folder
and click New, then select HTML
File.
If you are working in the Repository, right-click a folder
and select New, HTML File.
-
Enter vzMySales as
the file name and click Open.
If the Template Selector opens, click No, thanks to close
it.
HTML Composer opens, as shown in the following image.
x
Procedure: How to Create the Bar Charts
-
Click
the Vis (Visual Discovery) button on the
components toolbar.
-
Drag
your cursor across the canvas. The Insert ActiveX Control dialog box
opens.
-
Click Visual
Discovery Bar Chart and click OK.
-
Click
the Empty Bar Chart component. The Properties
and settings dialog box opens.
You need to associate data with the control before specifying
the characteristics of the bar chart.
-
Click Add
Data Pool in the Properties and settings dialog box.
-
Navigate
to your data file and click Open. In this
example, we are using a file named vzstoresales.txt. You can copy
this file to your current application from the \ibi\apps\session
directory.
-
Click ActiveX
Properties to open the Visual Discovery Bar Chart Properties
dialog box.
-
In the
Data tab, expand the data tree to see the available fields.
The bar chart in this example uses the Revenue and Store
Name fields.
-
Click:
- Once on Store
Name so an X appears in the box. This is the x-axis
field.
- Twice on Revenue so
a Y appears in the box. This is the y-axis field.
The
following image shows the x-value and y-value selected in the Data
tab.
-
Click
the Bar Chart tab, as shown in the following
image.
- Confirm the orientation
of the chart is set vertically by clicking the first icon in the
Orientation field.
- Set Labels Shown
to All, as shown in the following image.
-
Click
the Colors tab, as shown in the following image.
In the Field list, click Product Type. This
colors the bars according to the values in the Product Type field.
-
Click the Fonts tab,
as shown in the following image.
For Label Font, click the Font button
and set the font to 10, as shown in the following image.
-
Click
the Titles tab, as shown in the following image.
Change the following:
- Title Text
to Revenue by Store.
- X axis title
to blank (no title).
- Y Axis title
to Revenue.
-
Click Apply and
then click OK to return to the HTML Composer
window.
-
Save
your work.
-
Access
the Properties pane on the right (if needed, click Properties on
the View menu).
From the Properties drop-down list, select activex1 <OBJECT>,
if not already selected. For information on the way that Visual Discovery
names components, see Naming Controls.
Specify
the attributes as follows and then save your work:
- Name: vzBarOne
- Position: Left: 10px
- Position: Top: 70px
- Size: Height: 245px
- Size: Width: 200px
- Unique Identifier: vzBarOne
Tip: You
do not need to enter px for pixels. That is the default value.
The
following image shows the Properties pane.
-
Run
the webpage. The output should look similar to the following image.
-
Close
the webpage to return to HTML Composer.
-
Create
another bar chart component by repeating Steps 1 through 18 in this
procedure. When you create the second bar chart, note the following:
- The vzstoresales.txt
data source is already part of the data pool.
- From the Data
tab, select Region as the x-axis field, then
select Revenue as the y-axis field.
- From the Bar
Chart tab, set Labels Shown to All.
- From the Titles
tab, change the title text to Revenue by Region and
leave the x-axis title blank.
- On the Properties
pane, remember to select activex2 <OBJECT> from
the drop-down list, if not already selected. Set these attributes
as follows, and then save your work:
- Name: vzBarTwo
- Position: Left: 220px
- Position: Top: 70px
- Size: Height: 245px
- Size: Width: 280px
- Unique Identifier: vzBarTwo
-
Run
the webpage. The output should look similar to the following image.
-
Close
the webpage to return to HTML Composer.
x
Procedure: How to Create the Data Constellation
-
Insert
another Visual Discovery control.
-
This
time, click Visual Discovery Data Constellations.
We are going to bring in a map with dimensions of about
512 x 256.
-
Click
the Empty Data Constellations component,
then select vzstoresales.txt from the Available Data
Pools list on the Properties and settings dialog box.
In the Properties and settings dialog box, note that the
data source is already available in the Available Data Pools list
since you added it for the bar charts. Visual Discovery controls
share the same data pool. If you want to add additional data, you
can add more tables here.
-
Click ActiveX
Properties. The Visual Discovery Data Constellations
Properties dialog box opens.
-
In the Data
tab, expand the data tree and select City.
-
Click Apply.
-
Click
the Data Constellations tab, as shown in the
following image. In the:
- Label area,
select the Label selected check box.
- Node and Link
Selection area, select Nodes Only and No
Linking. This shows only the specific cities as data points
(nodes) and does not link the nodes.
- Uncheck Show
Unselected. When the webpage runs, all the glyphs that
are not selected are removed.
-
Click
the Nodes/Links tab, as shown in the following
image. In the Nodes area:
- In the Label list,
click City.
- In the Height list,
click Revenue.
- Move the Scale slider
to the right to increase node size.
This labels all
of the data points (nodes) with the value in the City field and determines
the height of the node from the value in the Revenue field. It also
scales the nodes so that they are visible on the map.
-
Click
the Placement tab. Add the map image and
the coordinates for longitude and latitude. In the Position File
input area, three distinct parameter strings are required, each
separated by a space, as follows:
longfield,latfield 'imagepath' minmax1~ minmax2
where:
- longfield,latfield
Are the actual names in the data source for the fields that
contain the X,Y (longitude and latitude) coordinates for the nodes,
respectively.
- 'imagepath'
Is the full path of the map image. Use the Browse button
to enter this value.
- minmax1~ minmax2
Are the minimum X and Y (lower-left corner of the map) and
maximum X and Y (upper-right corner of the map) values, separated
by a tilde (~) and a space.
-
In the Position area, click the map position image (the first
image in the second row).
-
Click Browse and navigate to the map file.
In this example, we are using a file named usMainlandDark-125.5+23.5-67+50.jpg.
Change the Files of type drop-down list to All Files, then copy
this file to your current application from the \ibi\apps\session
directory.
-
Click the Position File text box and preceding
the image path, enter the field names for the X, Y (longitude and
latitude) coordinates. Ensure there is a space between Latitude
and the path designation. For example:
Longitude,Latitude 'C:\ibi\apps\session\usMainlandDark-125.5+23.5-
67+50.jpg'
-
In the Position File text box, go to the end of the string.
Add the minimum X and Y and maximum X and Y values. Ensure the values
are separated by a tilde (~) and a space, for example:
Longitude,Latitude 'C:\ibi\apps\session\usMainlandDark-125.5+23.5-
67+50.jpg'-125.5,23.5~ -67,50
The following image
shows the Placement tab.
-
Click
the Colors tab. Confirm that Product Type is
selected from the Field drop-down list for Color Using Field. This
colors the nodes by the values in the Product Type field.
-
Click
the 3D tab, as shown in the following image.
Select Parallel from the Projection field.
-
Click
the Fonts tab.
For Label Font, click the Font button
and set Size to 9.
-
Click
the Titles tab and for the Title Text, enter Revenue
by City.
Confirm that Show view title is checked.
-
Click Apply,
and then click OK. Save your work.
-
Access
the Properties pane on the right. From the drop-down list, select activex3
<OBJECT>, if not already selected.
Specify the following values and then save your work:
- Name: vzMap
- Position: Left: 10px
- Position: Top: 325px
- Size: Height: 365px
- Size: Width: 605px
- Unique Identifier: vzMap
-
Save
your work.
-
Run
the webpage. The output should look similar to the following image.
-
Close
the webpage to return to HTML Composer.
-
To enable
handles on the map, which allows you to rotate the image during
run time, change the data constellation 3D projection setting to Perspective.
To change the 3D projection setting:
- Run the form.
- Right-click on the
map and click Properties.
- Click the 3D tab,
and then click the Perspective radio button.
- Drag the handles
at the corners of the map to rotate the image.
x
Procedure: How to Create the Pie Chart
-
Insert
another Visual Discovery control and click Visual Discovery
Pie Chart.
-
Click
the Empty Pie Chart component, and then select vzstoresales.txt from
the Available Data Pool list.
-
Click ActiveX
Properties.
-
In the
Data tab, expand the data tree and click:
- Once on Product
Type so an X appears in the box. This is the x-axis
field.
- Twice on Revenue so
a Y appears in the box. This is the y-axis field.
-
On the
Pie Chart tab:
- Set Rotation
to 45.
- Set Labels
Shown to All.
The following image
shows the Pie Chart tab.
-
Click
the Titles tab and change the Title Text
to Revenue by Product Type.
Confirm that the following is checked: Show view title.
-
Click Apply,
and then click OK.
-
Save
your work.
-
Access
the Properties pane on the right. From the drop-down list, click activex4
<OBJECT>, if not already selected.
Specify the following values and then save your work:
- Name: vzPie
- Position: Left: 570px
- Position: Top: 70px
- Size: Height: 245px
- Size: Width: 250px
- Unique Identifier: vzPie
-
Run
the webpage. The output should look similar to the following image.
-
Close
the page to return to HTML Composer.
x
Procedure: How to Create the Summary Sheet
-
Insert
another Visual Discovery control and click Visual Discovery
Summary Sheet.
-
Click
the Empty Summary Sheet component, and then
select vzstoresales.txt from the Available Data Pool list.
-
Click ActiveX
Properties, and then click the Data tab.
-
Click Sales
Rep as the x-axis field. Click Revenue as
the y-axis field.
-
Click
the Summary Sheet tab. Click Revenue from
the Sort By drop-down list and click Reverse Sort By.
The following image shows the Summary Sheet tab.
-
Click the Titles tab
and remove any titles from the summary sheet.
-
Click Apply,
and then click OK.
-
Save
your work.
-
Access
the Properties pane on the right. From the drop-down list, click activex5
<OBJECT>, if not it is already selected.
Specify the following values:
- Name: vzSummary
- Position: Left: 620px
- Position: Top: 325px
- Size: Height: 365px
- Size: Width: 305px
- Unique Identifier: vzSummary
-
Save
your work.
-
Run
the webpage. The final output should look similar to the following image.
-
Close
and save the page.