Developing an Analytic Dashboard From Developer Studio

In this section:

How to:

Before you begin to develop your Visual Discovery components, you create the following objects:

  1. The data file. See Creating Visual Discovery Output Files.
  2. The canvas for your components using the HTML Composer in Developer Studio. See How to Create a WebFOCUS Visual Discovery Analytic Dashboard.

After you have created your canvas and inserted a Visual Discovery component, you can begin to edit the component properties. For example, you can select the data, assign color, show labels, and more. The topics in this chapter cover tasks and options that are available for all Visual Discovery components (unless noted). For a tutorial on creating a Visual Discovery dashboard using sample data, see Tutorial: Building a Visual Discovery Analytic Dashboard. For tasks and options that are graph-type specific, see Visualization Components: Descriptions and Usage.

Important: It is necessary that when you are editing your component properties, you load your data first, and then select your X and Y fields from the loaded data.


Top of page

x
Procedure: How to Create a WebFOCUS Visual Discovery Analytic Dashboard
  1. Open Developer Studio.
  2. From the Developer Studio Explorer right-click the HTML folder in your project folder and select New, HTML File. The Add HTML File dialog box opens.
  3. Enter a name for the file and click Open. The HTML Composer opens.
  4. From the Insert menu, select Components, then click Visual Discovery Control or select Visual Discovery Control from the ActiveX drop-down menu on the tool bar.

    The ActiveX drop-down button is shown in the following image, it has a red square around it to identify it.

  5. Drag your mouse across the canvas to insert the component. The Insert ActiveX Control dialog box opens.

    Tip: When you insert a component, its size (height and width) defaults to predefined dimensions. However, after you select the type of component from the Insert ActiveX Control dialog box (step 6), you can change its size using any standard resizing feature.

  6. Select a Visual Discovery component and click OK.
  7. Right-click the component and select ActiveX Properties.
  8. Add data and edit your graph properties as desired.

Top of page

x
Naming Components

When you add a new Visual Discovery component to the HTML Composer canvas, the HTML Composer assigns a default Name and Unique Identifier to it. The naming convention for the component is activexn, where n is an iterative number.

For example, when you add the first component, it is assigned the name activex1. When you add the next component, it is assigned the name activex2, and so on.

If you rename a component in the Properties pane with a more descriptive Name and Unique Identifier, then the next component added will be named by default activex1 if no other component with the same name is found, or the number will increase by 1.


Top of page

x
Selecting Data

How to:

Reference:

All components in an analytic dashboard share the same data source. This means that when you begin to create the components for your dashboard, once you select the data for the first component, those data sources are automatically available for all the other components you add.

Add data sources and select data fields from the Data tab in the Properties dialog box.

Important: It is necessary that when you are editing your component properties, you load your data first, and then select your X and Y fields from the loaded data.



x
Procedure: How to Add and Select Data
  1. Right-click the component and select ActiveX Properties.
  2. From the Data tab, click Browse, change Files of type to All files and navigate to your data source (*.txt file).

    Important: If you are developing remotely, you must either map a drive to the remote location of the data source, or copy the data source to the local machine.

  3. Click Apply. Repeat Step 2 as necessary.
  4. Add fields by clicking in the box adjacent to the field. Click once to add the field to the x-axis, click twice to add the field to the y-axis.
  5. Click Apply.


x
Reference: Data Tab

Note: The brief description provided on the Data tab is there to guide you as to which types of fields, and how many fields you can select for the particular component type. The bar chart component was used for the example shown here.

Size is...

Determines the method to calculate the size of the glyph. See What Is a Glyph?.

Data File
Files loaded

Enables you to select a file from a list of files you have already looked at. After you select the file name and click Apply, the file is loaded and its tables and fields are displayed in the tree view panel. You can also enter a path or a URL to a file.

Browse

Enables you to browse your computer for a data source.

Delete Table

Deletes the selected table.

Reset Data Pool

Removes all data sources from the data pool.



x
Reference: Data Tab Icons

The following table shows the possible icons that appear in the Data tab and what they indicate for the field.

Icon

Indicates...

A table with no items colored.

A table with a field that colors the graph.

The field is a real number.

The field is a real number and colors the graph.

The field is a number (integer).

The field is a number (integer) and colors the graph.

The field is a string.

The field is a string and colors the graph.

The field is a date.

The field is a date and colors the graph.

An x-axis selected field.

A y-axis selected field.

The field is not available for selection.



x
Assigning Color to the Data and the Graph

How to:

Reference:

You can use color to change how your graph displays. You can change the color scale of the glyphs based on a field that you select. See What Is a Glyph?. You can also change the colors of the basic graphical elements (such as background color, foreground color, label color, selected variables, and overlay text color) in your graph component.



x
Procedure: How to Change Graph Element Colors
  1. Right-click the component and select ActiveX Properties.
  2. Click the Colors tab.
  3. Select the colors:
    • Using one of the Standard Tool Element Colors options. When you select one of these (Black, Blue, or White), the colors in the Component Element Colors field automatically change to the colors associated with that color scheme.
    • Manually in the Component Element Colors field. For details on each component in the Component Element Colors field, see Colors Tab.
  4. Click Apply or OK.


x
Reference: Colors Tab

Color Using Field

These settings apply to the entire Visual Discovery Web page.

Table

Specifies the name of the table for the current view. Other tables may be selected, even if they are not shown by the current view, by entering the table name in this field. If you have entered the name before, you may select the arrow key to the right of the entry field and scroll down to the desired name.

Field

Names the field in the table that is used to color the graph. If no field is selected, the table is not colored.

Re-apply Color to Field

Reapplies the color scale to a subset of data.

Color Scale

Changes the color scale for the graph. See Coloring a Graph by a Field.

Standard Tool Element Colors

Changes the background color of the graphs to black (the default setting), blue, or white. A default set of visualization component element colors is automatically selected for each background color.

Component Element Colors
Background

Specifies the color behind the graph. By default, the background color is black. A default set of element colors is automatically selected to go with the black background. Select this to change just the background color. If you want to change the entire color scheme, select one of the options in the Standard Tool Element Colors section.

Foreground

Specifies a data element in the visualization component. For example, sometimes it is the color of the outline of the glyphs.

Selected

Specifies the color of the items that are selected. If a color scale has been used, the color scale is used instead of the default selected color if the graph corresponds to individual colored data items.

Missing

Specifies the color of values that are missing.

Goal Line

Specifies the color of the visualization component line that you can create and place in bar and line graphs.

Overlay

Specifies the color of the label or labels (including text and/or items) and any graphs that may be used to denote the items in focus.

Shine

Specifies the color of the outline of the bottom and/or right of the graph objects. It helps provide the appearance of depth to the graph. This applies only to bar chart and line chart graphs.

View Title

Specifies the color for the title of the visualization component. You can change the title text from the Titles tab.

Background2

Specifies the color of the second background element, if one is available. For example, in the data sheet visualization component, a second background color (by default, gray) is used to make rows of data easier to read.

Label

Specifies the color of the static text or graphic that identifies items on a graph; for example, the field names for the X and Y-axis in the bar chart, histogram, or line chart graphs.

Unselected

Specifies the color of the items that are not selected.

Border

Specifies the color of the line that is drawn around glyphs so they stand out from the background. This applies only to bar chart and line chart graphs.

Overplotting

Specifies the color of the small tick marks (shown at the top of the graph) that indicate items are plotted on top of or overlapping other items.

This element is available for the bar chart, line chart, and time table graphs.

Selector

Specifies the color of the shape, indicated in the Selector Shape section of this tab, used to select items.

Shadow

Specifies the color of the outline of the top/left of graph objects. It helps provide the appearance of depth to the graph. This applies only to bar chart and line chart graphs.

Axis Title

Specifies the color for the X and Y axis titles.


Top of page

x
Coloring a Graph by a Field

How to:

When you color a graph by a field, you provide another level of meaning to the graph. It is a way to add more information, an additional variable, to the graph. The field you choose to control color is usually based on the type of data you want to analyze and how you want it to appear. Coloring by a particular field helps you study the effect of that field on your data. You can also use color to highlight exceptional values (for example, the high values in a distribution), as well as categories of values.

Coloring depends on the color scale you select; for example, the Rainbow color scale ranges from blue to red. Color is uniformly applied as a continuous scale across the entire range of values in that column. Colors are assigned from low to high for numeric values and in alphabetical order for string values.



x
Procedure: How to Color a Graph by a Selected Field
  1. Right-click the component and select ActiveX Properties.

    Note: If you are selecting colors for a bar chart, histogram, line chart, or pie chart that has more than two fields, make sure the Stack Colors check box is selected on the chart-specific tab.

  2. Click the Colors tab.
  3. From the Field drop-down list, select the field you want to color the graph by. If you have more than one table in your data pool, you will first need to select the appropriate table from the Table drop-down list.
  4. In the Color Scale field, select the color scale:
    • Green/Red goes from green on one end to red on another. This color scale uses the stop light metaphor (green - go or OK, yellow - caution, and red - stop or immediate attention).
    • Pastel is a red to blue scale using pastel shades.
    • Equalized is an alternate scale with equal perceptual changes between each entry in the scale.
    • Categorical is a field for which values represent categories or classes. Categorical variables do not have natural scale or units of measurement. A field containing country names, such as the United States, United Kingdom, and Germany, is categorical.
    • Rainbow is the common red-to-blue scale. This is the default.
    • Gray enables unselected items to be shown in gray, making them seem to fade from view. The Gray color scale uses shades of black and white, instead of a set of colors, to show differences or similarities between/among items.
    • Thermal mimics the color changes in heated iron, from cold (black) through warm (yellow) to extremely hot (white).
    • Smallest Values are High Priority. By default, the highest values are set to the highest priority. This means that the values are assigned a color based on the placement of the value within the selected color scale. The highest value is at one end of the color scale; the lowest value is at the other end. By selecting this option, the coloring of the values is reversed.
  5. Click Apply or OK.

    Note: When you select a subset of data and exclude the unselected items, you might want to apply the color scale to the range of values in the subset instead of it remaining applied to the entire set of data. If the remaining items (the subset) are from the same area of the original data set, the colors of all the items might be very similar. If you reapply the color just to those remaining items, each item might stand out more because the color scale is applied to a smaller range.

    To reapply the color scale to a subset of data, select Re-apply color to field in the Color Using Field section and click Apply.


Top of page

x
Choosing Selection Options

Reference:

In interactive data visualization components, selection enables you to retrieve data of interest (and effectively answer questions about the data) just as written queries do. However, many of the methods to visually select data are different from written queries. Since all components in your dashboard share the same data pool, when you select data in one component, the same data is selected in all components.

You select by sweeping an area of the interactive data visualization component with the mouse and clicking on items. Additionally, in the data sheet component, you can perform textual selection.

The Selecting tab controls how selection with the mouse works. These properties affect all views, not just the current view. In addition to selecting a group of items with the mouse, you can also select, unselect, exclude all data, and toggle the selection states using the pop-up menu.

Note:



x
Reference: Selecting Tab

Selector Shape
Rectangle

The default shape used to select items. To select, or sweep, using a rectangle, move the cursor to one corner to the desired data, press and hold the left mouse button, move the cursor to the opposite corner of the desired area, and release the mouse button. The data within the rectangle is selected.

Lasso

When Lasso is selected, you may draw a free style curve. When the left mouse button is pressed, the lasso follows the cursor and selects items the cursor passes until the mouse button is release.

Circle

When Circle is selected, it enables you to sweep, or select, data within a circle whose center is the position where the left mouse button was initially pressed, and the perimeter is where that mouse button is released. When the Circle selector shape is active, a dot appears in the small circle next to the text.

Rectangular Brush

When Rectangular Brush is selected, a rectangle follows the mouse and identifies objects that it passes over.

Circle Brush

When Circle Brush is selected as the selector shape, a circular shape follows the mouse and identifies objects that it passes over.

Interactive Labeling
Details

Options include the following. Note that details cannot be presented in a histogram because the histogram displays the distribution of single continuous fields; individual values are not shown.

Hover or Shift - The detailed information about a glyph appears when you hover over or move the cursor over an item while holding down the Shift key. This is the default.

Hold Down Shift - Turns on the detailed information when you press the Shift key and pass over the items. When you are not over an item, the option turns off until you press the Shift key again.

Continuous - When you pass over an item, the detailed information appears about that item.

Location

Options include:

Continuous - The coordinates (location on the X and Y-axis) of a glyph appear when you move the cursor over the item. This is the default.

Hover or Shift - When you hover over or move the cursor over an item while holding down the shift key you see the coordinates for that point.

Hold Down Shift - Turns on the location information when you press the Shift key and pass over the items.

Flicker Free Drawing

When the cursor moves over a graph, it may cause flickering. Select this option to eliminate the flicker. Graphs may take longer to render with this option set.

Selector Operation
Replace

Replaces the existing selection set with the next items identified.

Toggle

Reverses the selection state of items. Selected items become unselected. Unselected items become selected.

Add

Select this option to add identified items to the selection set.

Subtract

Removes identified items from the selection set, if they are in it.

Intersect

Selects only those items that were previously selected and are in the set of identified items.


Top of page

x
Specifying Fonts and Titles

Reference:

The Fonts tab sets the font type and size for the view title (the title for the component or graph, which you set in the Titles tab), the axis titles, and the labels. The Titles tab sets the titles of the view (the graph) and the axes of the graph.



x
Reference: Fonts Tab

To change the font, font style, or font size, click the appropriate Font... button.



x
Reference: Titles Tab

Type the titles in the text fields. If you do not alter the titles, they will default to the field names from the data table you selected in the Data tab.

This tab is not available for the counts, data sheet, parabox, or time table components.


Top of page

x
Using Goal Lines

How to:

You can use goal lines in a bar or line chart.

Goal lines are lines you can place on a bar or line chart in the report output. Goal lines display in front of the graphed data, enabling you to compare your data with one or more set values. You can see what values are above or below a level you specify.

Before selecting glyphs above or below a goal line, negative and positive values are added. If your graph contains negative and positive numbers, some glyphs that you may initially expect to appear above or below the goal line (depending on which button you select) may, in fact, have a cumulative value different than you might expect and the glyph will not be selected.

Note: Goal lines are not available when you are using a spine plot since the bar glyphs are the same height.



x
Procedure: How to Add Goal Lines
  1. Ensure Show Goal Lines is selected on the bar chart or line chart pop-up menu.
  2. From the pop-up menu, select Create Goal Line. A blue line appears.
  3. Repeat step 2 for each desired goal line.


x
Procedure: How to Move Goal Lines

Select a goal line and drag it to the desired value. Use the focus information to position the goal line.



x
Procedure: How to Hide Goal Lines

From the pop-up menu, clear the check mark for Show Goal Lines.

Note: This does not permanently remove the goal line from the graph.



x
Procedure: How to Remove Goal Lines
  1. Move the cursor over the goal line.
  2. Click the close (X) button.


x
Procedure: How to Select Values Above/Below the Goal Line
  1. Move the cursor over the goal line.
  2. Click the:
    • Up button to select all values above the goal line.
    • Down button to select all values below the goal line.
    The graph changes to reflect your selection.

Top of page

x
Animating Data

How to:

You can animate data in a bar, line, or pie chart.

Animation is when each glyph is sequentially highlighted and then restored to its original state. Animation is especially helpful when you are analyzing two or more interactive data visualization components at the same time because you can easily see the highlighted items in all displayed components simultaneously. Animation is also helpful when you are viewing complex data because it can highlight unexpected relationships.

When you set and control animation in a component (bar chart, line chart, and so on), the animation effect occurs in all the displayed components that use the same data source.



x
Procedure: How to Animate a Bar, Line, or Pie Chart
  1. In the Properties dialog box, click the chart-specific tab (either the Bar Chart tab, Line Chart tab, or Pie Chart tab).
  2. Select the Animate check box and click Apply.
  3. To control animation click:
    • Backward to go backward one bar. Backward does not reverse animation.
    • Pause to temporarily stop animation temporarily.
    • Resume to restarts the animation after it has been paused.
    • Forward to go forward one bar. Forward does not restart animation.
  4. To change the speed of animation click:
    • Slower to slow down animation place.
    • Faster to speed up animation.
    • Normal to return the animation to the default pace.

Tip: From the pop-up menu select Animate.


Top of page

x
Selecting Primary and Secondary Order

How to:

You can select primary and secondary order in a bar, line, or pie chart.

Order controls the sequence in which glyphs are presented. You can select primary and secondary order in bar, line, and pie charts.



x
Procedure: How to Select Primary and Secondary Order
  1. In the Properties dialog box, click the chart-specific tab (either the Bar Chart, Line Chart, or Pie Chart tab).
  2. In the Order field, select the Primary order:
    • Original Order is the order in which the data was initially presented. This is the default.
    • Label order is alphabetical by category name.
    • Size displays the categories by the number of cases (from the largest count to the smallest).
    • Total Selected displays the categories by the number of cases selected.
    • Percent Selected displays the categories by the percentage of cases in that category that are selected.
  3. Select the Secondary order option. The order options for secondary are the same as for primary. Secondary order is applied at the same time as the primary order and becomes apparent only when two or more items have the same value according to the primary order.
  4. Click Apply or OK.

Note: From the pop-up menu, select Primary Order and than select an option.


Top of page

x
Displaying Labels

How to:

You can display labels in a bar, line, or pie chart.

You can choose how and which labels to display in the component when you are creating the component. You can also show and hide individual labels using the pop-up menu.

Note: Labels for the X- and Y-axis come from the field names in your data source.



x
Procedure: How to Select Label Mode
  1. In the Properties dialog box, click the chart-specific tab (either the Bar Chart, Line Chart, or Pie Chart tab).
  2. Select the desired option from the Labels Shown drop-down list. Options include:
    • Best Fit displays labels in equally spaced increments that make them easy to view. This is the default.
    • Selected displays labels only for the data that is selected (colored).
    • All displays labels for all data on the graph.
    • Off displays no labels.
    • Custom enables you to select which labels to display.
  3. Click Apply or OK.

Tip: From the pop-up menu select Label Mode and then select the desired option.



x
Procedure: How to Show/Hide Individual Labels Using the Pop-up Menu
  1. Right-click the label you want to show or hide.
  2. Select Label 'name' from the menu.

WebFOCUS