Flow Chart Properties

Use the Vizlib Flow Chart properties panel to configure dimensions and measures, customize appearance, and manage interactivity, alternate states, and tooltips.

Dimensions, Measures, Sorting, Data Handling

Vizlib Flow Chart supports one measure with multiple dimensions. You can add dimensions or metrics dynamically and decide whether they should be used directly or added as alternative dimensions or measures, which can be selected when you're in analysis mode.

Data - Dimensions and Measures

You can add dimensions, measures, and alternative dimensions and measures in the Data section.

The dimension and measure name are always visible; click the arrow (>) on the right to view its details.

Click the dots (...) on the farthest right of the dimension or measure name to drag it to a new section.

Figure 1: Data options - Dimensions and Measures

Adding Dimensions

From the Data section, click Add in the Dimensions section.
Set the Field and Label, and click in the checkbox if you want to Include null values.
Use the Calc. condition field to specify a conditional expression to show or hide the flow chart's dimension.
Slide the Node Color toggle to the left to specify a Custom color for the dimension using the color picker or entering a Hex code in the expression field.
Slide the Node Label toggle to the right to show the dimension label.
Slide the Node Value toggle to the right to show the measure value.

Figure 2: Dimensions showing the Custom color options

Adding Measures

From the Data section, click Add and drag the option down to the Measures section.
Enter the type of measure in the Expression field.
Enter the measure's name in the Label field.
Select a Number formatting option from the list: Auto, Number, Money, Date, Duration, Custom, or Measure expression.

Figure 3: Measures

Alternative Dimensions and Measures

Below the main Dimensions and Measures sections, the button Add alternative is displayed.

After you've added alternative dimensions and measures, a small arrow displays beside the name.
Click the arrow to view the list of alternatives.
Click the alternative you want to view.

Figure 4: Alternative Dimensions and Measures

Sorting Options

The Sorting settings include:

Enabling a General sort by node size applies to node size across all dimensions. Or, if not enabled, a 'Nord Sort' setting is added for each dimension.
Setting the order to be either Ascending or Descending.
Clicking the checkbox to Show others on the end.

Figure 5: Sorting options

Data Handling Settings

Note: Increasing the value with large datasets can deteriorate the browser's performance.

The Data Handling settings include:

Turning on a Flow Chart Nodes Limit - specifies the maximum number of nodes per dimension that can be rendered on the Flow Chart.
Clicking the check box to Filter first dimensions.
Using the expression field to enter the Max Nodes Per One Dimension.
Entering a Displayed message in the expression editor that displays when a dataset limit is exceeded.

Figure 6: Data Handling options

Data Downloading

Use the Data downloading feature to manage performance. The three options include:

Allowing the default Initial Loading is limited to the first 5000 rows.
Defining the maximum records manually in the expression field that displays.
Allowing All data to download.

Other adjustments with Data downloading include the options to:

Click the check box to Suppress Zero Values.
Set a Calculation Condition to display the chart if a condition is met.
Editing the default message, 'The calculation condition is not met...' in the expression field.

Figure 7: Data Handling

Appearance

The Appearance settings control the look and feel of your Vizlib Flow Chart.

General Appearance Settings

In the General section, slide the Show titles toggle to the right to show or hide a Title, Subtitle, and Footnote.

Slide the Show details toggle to the right if you want to Show or Hide details. Details include the descriptions, measures, and dimensions used.

Figure 8: General

Links Styling

Links Styling contains settings for styling the links in the flow chart.

Slide the Color mode toggle to the right to choose the option to blend in (that is, inheriting the colors of connecting nodes and blending them together), or apply a solid color.

Use the slider to set the Links Opacity (set as a percentage).

Slide the Links Value Labels toggle to the right to Show a label. You can also set the:

Link Label Font Color - using the color picker or entering a Hex code.
Links Label Font Size - enter the font size or use the slider to select the size.
Links Label Font Style - apply bold, italics, or underlined formatting.

Note: Use italics sparingly, as they can reduce readability.
Links Label Position - use the slider to select the position of the Link Label (for example, if it's set at 50%, the labels display in the middle of each node).

Figure 9: Links Styling

Nodes Styling

Nodes Styling allows you to apply styling to the nodes in the flow chart.

Use the sliders to set the Nodes Width and Distance between nodes (measured in pixels).

You can also set the Border Color using the color picker or enter a Hex code. And use the slider to set the Nodes Border Width (measured in pixels).

Figure 10: Nodes Styling

Label Settings

The Label settings have the same style settings as the Link Labels:

Label Font Color - using the color picker or entering a Hex code.
Label Font Size - enter the font size or use the slider to select the size.
Label Font Style - apply bold, italics, or underlined formatting.

Note: Use italics sparingly, as they can reduce readability.

Click on either vertical or horizontal to choose the Label Orientation.

Click the option to have the Label inside the node or deselect the option so the label displays closer to the middle.

Click the option to set the Node label length limit. Set the character limit using the slider that displays. The label length maximum is 100 characters.

Figure 11: Nodes Styling Label

Value Styles

The settings for Value styles are the same as Label styles.

Applying Colors

There are two options for applying Colors to a flow chart. Select whether to color by Dimension or by Node.

Color options include using custom colors (comma-separated list of HEX colors) or one of the color schemes offered. You can also reverse the colors, which inverts the selected colors.

Coloring by Node

Use the Color by Node option to choose a Coloring Type:

Gradient - colors the node based on measure value.
Classes - colors each node distinctly.
Expression - an expression field displays for you to enter a custom color (Hex code) that applies the color to each node displayed.
Sequential - colors the nodes with a user's defined range.

Figure 12: Color by Node

Using Sequential Colors

Sequential colors are defined by the user manually selecting the range at which colors are presented. The following animation shows that the colors are presented based on the defined parameters.

Figure 13: Sequential Coloring

Coloring by Dimension

Select Color by Dimension to highlight the dimensions in your flow chart.

Figure 14: Color Scheme options

Dimension Titles

Slide the Dimension Titles toggle to the right to Show the dimension titles.

Select either Top or Bottom for the title's Position. Other style options for Dimension titles include:

Font Color - using the color picker or entering a Hex code.
Font Size - enter the font size or use the slider to select the size.
Font Style - apply bold, italics, or underlined formatting. Please note: use italics sparingly, as they can reduce readability.
Background Color - using the color picker or entering a Hex code.
Background Opacity - use the slider to set the opacity (set as a percentage)

Use the options:

Show alternative count - using an Alternate state.
Show drill-down breadcrumbs - drill-down view showing any hidden dimensions.

Figure 15: Dimension Titles

Measure Title

Slide the Measure Title toggle to the right to Show the measure title. The settings for Measure Title are the same as Dimension Titles.

Figure 16: Measure Title

Interactivity, Alternate States, Viztips and Tooltips

These settings control user interaction, alternate states, and tooltip behavior for your Vizlib Flow Chart.

Interactivity Settings

Use the Interactivity settings to control how users interact with your Vizlib Flow Chart.

Selections

Slide the Allow Selections toggle to the right to convert visualizations from the read-only mode, where no selections can be made on the chart.

Click the check box beside Enable Multiselect to allow users to select multiple values and accumulate selections until you apply them.

Note: All options must be selected within a single dimension, and the first selection in your multi-select determines this dimension.

Highlight

Slide the Highlight toggle to enable the path or links trails to be highlighted when a user's mouse hovers over them.

Select from Left trail, Right trail, Left & Right, or Single to apply the highlighting.

Figure 17: Interactivity options for selections and highlighting

Animations

Slide the Animations toggle to the right to enable animation in the chart. Use the field to set the Animation speed in milliseconds.

Slide the Fullscreen Icon toggle to the right to display the fullscreen icon (the two diagonal arrows beside the context menu).

Click the icon to open a full-screen version of the flow chart.

Figure 18: Animations options

Viztips and Tooltips

The Viztips and Tooltips settings help you to manage tooltips in Vizlib Flow Chart, and you can also enable Viztips to add dynamic tooltips.

Please read more in our Viztips - Overview article.

Slide the Tooltips toggle to the right, then the message Enabled displays. After Tooltips are enabled the Viztips options display, and you can start working with dynamic tooltips.

Please also see our Viztips example app.

Figure 19: Viztips and Tooltips

Using Master Items with Viztips

Viztips can present Master Items on the Flow Chart nodes and connections.

Figure 20: Viztips used as a master item added to a Vizlib Flow Chart

Alternate State

Alternate State allows you to assign the Vizlib Flow Chart to an alternate selection state. Please see our article on Alternate States to learn more.

Figure 21: Alternate State