In this section: |
|
Before you begin to develop your Visual Discovery controls, you create the following objects:
After you create a canvas, and insert a Visual Discovery control, you can begin to edit the control properties. For example, you can select the data, assign colors, show labels, and more. The topics in this chapter cover tasks and options that you may apply to all Visual Discovery controls (unless noted).
Important: When you edit the properties of a control, it is necessary to load the data first, and then select your x-axis field and y-axis field from the loaded data.
For a tutorial on creating a complete Visual Discovery dashboard using sample data, see Tutorial: Building a Visual Discovery Analytic Dashboard with Advanced Chart Controls.
For graph-type specific tasks and options, see Visualization Components: Descriptions and Usage.
The HTML Composer canvas opens.
Note: Visual Discovery controls are not available if you choose to create an HTML page using templates. You can click the Don't show again check box to turn the Template selector off. The next time you create an HTML page using HTML Composer, the Template selector will not appear. For more information, see the Designing a User Interface for a Web Application With HTML Composer manual.
Tip: When you insert a control, its size (height and width) defaults to predefined dimensions. However, after you select the type of control from the Insert ActiveX Control dialog box (Step 6), you can change its size using any standard resizing feature.
When you add a new Visual Discovery control to the HTML Composer canvas, HTML Composer assigns it a default Name and Unique Identifier. The naming convention for the control is activexn, where n is an iterative number.
For example, when you add the first control, it is assigned the name activex1. When you add the next control, it is assigned the name activex2, and so on.
You can view and modify the Name and Unique Identifier of a control in the Properties pane. If you rename a control, using a more descriptive Name and Unique Identifier, then the next control you add will still increase by 1.
How to: Reference: |
All components in an analytic dashboard share the same data source. This means that when you select a data source for the first control, that data source is automatically added to the Available Data Pools list, and made readily available for all subsequent controls.
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.
The following image shows the Properties and settings dialog box.
Enables you to select a data file to use to populate the Visual Discovery control. After you select the file name, and click ActiveX Properties, the file is loaded. Its tables and fields display in the tree view panel on the Data tab.
Enables you to select a data file to use to populate the Visual Discovery control and add it to a list of available data pools.
Removes all data sources from Available Data Pools drop-down list.
Opens the Visual Discovery Properties dialog box, where you can edit the fields, colors, control features, font style, and titles for a particular Visual Discovery control.
The first tab in the Visual Discovery Properties dialog box is the Data tab. It will guide you on which types of fields, and how many fields you can select.
The following image and brief description of the Data tab is to guide you as to which types of data fields, and how many fields you can select for a particular control.
The bar chart control was used for the example shown in the following image.
The text that appears above the Size is drop-down selection menu, on the top-right corner of the Data tab, instructs you on how to select a category field for the x-axis, and one or more category fields for the y-axis.
Determines the method to calculate the size of the glyph. For more information, see What Is a Glyph?
Note: When creating Visual Discovery controls in HTML Composer at design time, you select the data source through the Properties and settings dialog box. At run time, this dialog box does not appear. Instead, you can select your data source, .txt files only, through a modified version of the Data tab.
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. |
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. For more information, 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 control.
The Visual Discovery Properties dialog box for the selected control opens.
The following image shows the Colors tab in the Visual Discovery Properties dialog box.
These settings apply to the entire Visual Discovery webpage.
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.
Names the field in the table that is used to color the graph. If no field is selected, the table is not colored.
Reapplies the color scale to a subset of data.
Changes the color scale for the graph. See Coloring a Graph by a Field.
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.
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.
Specifies a data element in the visualization component. For example, sometimes it is the color of the outline of the glyphs.
Specifies the color of the items that are selected. If a color scale has been used, that color scale is used instead of the default selected color if the graph corresponds to individual colored data items.
Specifies the color of values that are missing.
Specifies the color of the visualization component line that you can create and place in bar and line graphs.
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.
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.
Specifies the color for the title of the visualization component. You can change the title text from the Titles tab.
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.
Specifies the color of the static text or graphic that identifies items on a graph. For example, the field names for the x-axis and y-axis in the bar chart, histogram, or line chart graphs.
Specifies the color of the items that are not selected.
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.
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.
Specifies the color of the shape, indicated in the Selector Shape section of this tab, used to select items.
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.
Specifies the color for the x-axis and y-axis titles.
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.
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.
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.
How to: |
Another way to color your Visual Discovery controls is through an HTML Composer Visual Discovery integration feature called Values are VisDis Color By. Values are VisDis Color By is an option only available through the Properties and settings dialog box of a list box, drop-down list, or double list box. You must first create a canvas using HTML Composer, add a Visual Discovery control, and then add a list box, double list box or drop-down list that contains the field names from the data pool of the Visual Discovery control.
When you run the HTML page, you are able to select a field name from the list to change the colors of the Visual Discovery control.
The following procedure provides the steps to color a Visual Discovery control using the Values are VisDis Color By option.
Note: You may also choose a list box or a double list box instead of a drop-down list.
The Properties and settings dialog box appears, as shown in the following image.
Note: If the Properties and settings dialog box does not appear, you must select it from the View menu.
Note: The Values are VisDis Color By check box only appears when Visual Discovery controls are on the HTML page.
The New button drop-down list changes to allow the selection fields from data pools, only when you have clicked the Values are VisDis Color By check box.
You can also click Add All Items, which adds every available field name option to the drop-down list control.
When you run the HTML page, select a field from the drop-down list. Notice that the colors of your Visual Discovery control are now colored according to the selected field.
Reference: |
In interactive data visualization controls, 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 controls in your dashboard share the same data pool, when you select data in one control, the same data is selected in all controls.
You select by sweeping an area of the interactive data visualization control with the mouse and clicking on items. Additionally, in the data sheet control, 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:
The following image shows the Selecting tab in the Visual Discovery Properties dialog box.
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.
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.
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.
When Rectangular Brush is selected, a rectangle follows the mouse and identifies objects that it passes over.
When Circle Brush is selected as the selector shape, a circular shape follows the mouse and identifies objects that it passes over.
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.
Options include:
Continuous. The coordinates (location on the x-axis 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.
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.
Replaces the existing selection set with the next items identified.
Reverses the selection state of items. Selected items become unselected. Unselected items become selected.
Select this option to add identified items to the selection set.
Removes identified items from the selection set, if they are in it.
Selects only those items that were previously selected and are in the set of identified items.
Reference: |
The Fonts tab sets the font type and size for the view title (the title for the control 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.
The following image shows the Fonts tab in the Visual Discovery Properties dialog box.
To change the font, font style, or font size, click the appropriate Font button.
The following image shows the Titles tab in the Visual Discovery Properties dialog box.
Type the titles in the Title Text field. 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 controls.
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 which 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 have a cumulative value different than you might expect and the glyph will not be selected.
Note: Goal lines are not available when what you are using a spine plot, since the bar glyphs are the same height.
Select a goal line and drag it to the desired value. Use the focus information to position the goal line.
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.
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 controls at the same time because you can easily see the highlighted items in all displayed controls 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 control (bar chart, line chart, and so on), the animation effect occurs in all the displayed controls that use the same data source.
Tip: From the pop-up menu, select Animate.
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.
Note: The Primary drop-down list and the Secondary drop-down list contain the same options.
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.
Note: On the pop-up menu, click Primary Order and then select an option.
How to: |
You can display labels in a bar, line, or pie chart.
You can choose how and which labels to display in the control when you are creating the control. You can also show and hide individual labels using the pop-up menu.
Note: X-axis and y-axis labels come from the field names in your data source.
Tip: From the pop-up menu, select Label Mode and then select the desired option.
How to: |
You can preselect values of a Visual Discovery control that display at run time, by adding the onInitialUpdate() function to the Embedded JavaScript tab of HTML Composer. When you run the HTML page, the values you preselected display.
An example of the onInitialUpdate() function code, with two preselected values, is shown in the following image.
When you run the page, the preselected values will display on the Visual Discovery control, as shown in the following image.
How to: |
Using HTML Composer, you can add custom parameters that pass data between Visual Discovery controls and reports on a webpage. You can build a webpage in which a Visual Discovery control passes data to a report, or a webpage in which a report passes data to a Visual Discovery control. Each option requires use of the same data pool.
The following procedure provides steps to create a Visual Discovery control parameter that passes data to a report at run time.
The Get source file dialog box opens.
The New Parameters dialog box opens.
Select specific data in your Visual Discovery control, and click the Run button to view the report results, as shown in the following image.
The following procedure provides steps to create a report parameter that passes data to a Visual Discovery control at run time.
The parameter Properties and settings dialog box opens.
Note: The same parameter name will be used in the report.
A new Properties and settings dialog box opens, as shown in the following image.
Once you have created the HTML webpage with a Visual Discovery control, you must then create a report that will pass data to the Visual Discovery control.
The Field Properties for Field dialog box opens, as shown in the following image.
The Drill Down Parameter dialog box opens, as shown in the following image.
Note: When you run the report, the chosen parameter field appears with underlined text, as shown in the following image.
Click an underlined text field. Notice that the Visual Discovery control you created earlier appears with the appropriate parameter selected, as shown in the following image.
For more information, see the Designing a User Interface for a Web Application With HTML Composer manual.
How to: |
Using the HTML Composer chaining feature, you can integrate Visual Discovery controls and data within a listbox, double list, or drop-down list. Adding this functionality to your dashboard creates an interactive webpage from which end users can select values in the list and automatically view them in a Visual Discovery control.
Note: Because a Visual Discovery control is always multi-select, you must always use a multi-select parameter.
Note: You may also use a double list or a drop-down list instead of a list box.
The HTML page shows your list box, populated with the values, and your Visual Discovery control, as shown in the following image.
Selecting values from the list box will display data in the Visual Discovery control, for those values only. The following image shows three values selected with the corresponding data displayed in the Visual Discovery control.
How to: |
In addition to the Visual Discovery selection features at run time, you can use the exclude and restore hyperlink actions to link Visual Discovery controls and button controls on a webpage. With this option, end users can select data on a control and click the Exclude button to view only the selected data. To restore the unselected data, end users can click the Restore button.
The Hyperlink Properties dialog box opens, as shown in the following image.
Select Visual Discovery Exclude from the Action drop-down list.
Select your controls data pool from the source drop-down list.
Note: Target Type and Target/Template Name are not available.
Name the button Restore and click Visual Discovery Restore from the Action drop-down list.
When selecting data from the Visual Discovery control, you can click the Exclude button to hide all of the unselected data, as shown in the following images.
When you click the Restore button, the hidden data is brought back.
WebFOCUS |