416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Using Charts

Hide navigation
RSS
Modified on Tue, 29 Apr 2014 07:23 PM Categorized as Chart, Data Controls
Click to return to: Documentation | Designing Dashboards | DV Controls | Chart


Overview

There are many types of charts that visualize in different ways. Choose the right ones for your metrics to visualize them along one or more dimensions, and use the many features of the chart to communicate the data most effectively. This article explains how to use the common chart features.

Elements of a chart

The figure below shows the main elements of a chart control.

Elements of a bar chart with a contextual line series.

Elements of a bar chart with a contextual line series.


A data series is made up of a related group of data points. The figure above displays a bar series and a line series, where each data point is displayed as a bar or a portion of the line.

The axes of the chart provide a reference for the coordinates used to plot the data points, with the help of one or more scales that are displayed along each axis. Tick marks, grid lines and labels are displayed along each scale on an axis. Axes can be primary (usually on the left or bottom) or secondary (usually on the right or top.)

The sections that follow in this article detail each of the chart elements and how they can be customized.

An area chart demonstrating primary and secondary axes.

An area chart demonstrating primary and secondary axes.


Z-Index

By default, chart elements within a single chart are displayed in a particular z-order, so that important elements are not hidden beneath other elements when they overlap. The default z-order for overlapping items is as follows, in order from bottom to top:
Each chart element has its own Z-Index property, which can be used to customize the z-order, i.e. the order in which elements are displayed on top of other elements: elements with a higher z-index are displayed on top of elements with a lower z-index. Use the properties filter or click the Show Advanced Properties button to find the Z-Index property for an element.

Getting started

Choosing a chart

Each of the different types of chart controls can be accessed from the Charts folder of the Dashboard Designer Toolbox. The chart control you choose will determine the chart type initially used for each series and which styles the control uses, but you can change the chart type of one or more series to mix different compatible chart types.

  1. Choose a chart type that makes sense for your metrics and drag it from the Toolbox to the Canvas.
  2. Drag a KPI or dataset from the Toolbox and drop it on top of the chart.

You can add as many KPIs, datasets and contextual metrics as you like to the chart, and each one will appear as another series. You may not be able to drop data onto the chart that is missing required metrics or dimensions. If the values are not compatible, a new axis may be created for the series automatically.

Charts in the Toolbox.

Charts in the Toolbox.


You can also choose a type of chart control as the preferred data visualization for a KPI or dataset. In this case, when you drag the KPI or dataset to the Canvas, it will be displayed automatically as the selected chart. (By default, it is a Bar Chart.)

The General tab of the KPI Designer.

The General tab of the KPI Designer.


Changing chart types

When displaying a KPI with a contextual metric or otherwise comparing multiple series in one chart, you may want to change the chart type of a series:

  1. Locate the Series of the chart control and click its ellipsis button.
  2. In the Series property window, set the Chart Type property to the desired chart type.
    Series property.
  3. Click Close.
  4. If the new chart type accepts more metrics than the original (for example, when switching from Line to Range), you may want to use the data settings configuration wizard now to select each of the new metrics.

Note: When mixing different chart types, only rectangular chart types are compatible with each other. See Types of Charts for more details.

Axes

Transposing axes

A bar chart with transposed axes.

A bar chart with transposed axes.

For bar charts (including Stacked Bar and 100% Stacked Bar), a very common step is to switch or transpose the X and Y axes, so that the bars are plotted horizontally instead of vertically. (This is possible but much less common on other chart types.) This switches the axes so that the primary X axis is on the left and the primary Y axis on the bottom, which may be a better use of space, and easier to read when the X axis labels are longer.

Use the Switch X & Y Axes property on the chart control to transpose the axes.
Switch X & Y Axes Property.

Switch X & Y Axes Property.


Changing scale types

The X and Y axes each have their own scale that you can set, which can be one of three types:

  • Category: Designed for people, places, things or events. Displays values of any type of data, one after the other in sequence. The sort order can be changed using the Sort Order property.
  • Date/Time: Designed for date and time values. Data can be plotted along continuous linear time, even if data is missing.
  • Numeric: Designed for numeric data.

The scale type will be set for you when you first drop your data onto the chart from the Toolbox, but if your data is compatible you can change it:

  1. Locate the X Axes, Secondary X Axes, Y Axes or Secondary Y Axes property of the chart control and click its ellipsis button.
  2. In the Axes property window, locate the Scale property and click its ellipsis button.
  3. Choose a new scale type from the Item Type drop-down list at the top of the Scale property window.
    Image
  4. Click OK, then save and preview your dashboard.



Labels, tick marks and grid lines

Formatting

The scales of a chart axis determine the format of axis label text unless specified somewhere else. If not set already, the formatting of axis label text is automatic to be only as specific as the data. For example:
  • The numeric scale only displays as many decimal places as the values in the original data source.
  • The date/time scale will only show months, days, hours, etc., if the data occurs at this interval, or if the intervals were set manually.
  • (The category scale typically displays text, and does not modify the format of its values automatically.)

To change the label format:

  1. Locate the axes list on the chart control containing the axis that you want to change and click its ellipsis button.

  2. In the Axes property window, locate the Scale property and click its ellipsis button.

  3. The scale provides formatting options:
    • The Label Format property can be set to a format. To use the Format Text dialog, click the ellipsis button.

    • Or, on date/time scales, you can set up different formats to be used depending on the label interval, instead of using a single format regardless of what data is displayed. To set up multiple formats, clear the Label Format property and open the Period Formats property window.
      Image

      • Period formats may have been created automatically if you added a KPI or dataset that uses a time dimension, based on the time dimension's format settings. Click Add or Remove to change how many period formats are specified for this axis.
      • Set Interval Type to an interval type that identifies the period: Years, Months, Weeks, Days, Hours, Minutes, Seconds or Milliseconds.
      • To specify a period of more than one of an interval type, set Interval to that number. For example, quarters can be represented by a period of 3 Months.
      • Set Format on a period to a format. To use the Format Text dialog, click the ellipsis button.

        Tip: Quarter numbers are supported for periods of 3 Months, and week numbers are supported for periods specified in Weeks. Use the format character s, as in Week s or Week ss.

      • Other properties can be used for customizing automatic intervals or for adding axis label grouping.

  4. Click Close to return to the dashboard canvas.

Note: The X Axis Label Text advanced property on chart series takes priority over the scale's formatting. This may have been set automatically in earlier versions of Dundas Dashboard, or if you added a KPI or dataset based on a virtual cube. You can clear this property to allow the scale's formatting to be displayed.

Tip: Use \n to split the format into multiple lines if you want to ensure the formatted text is split into multiple lines.

For example, the format MMM\nyyyy displays as: Jun
2012



Intervals and margins

The scales of a chart axis are responsible for positioning labels, tick marks and grid lines along an axis. These elements are always positioned at a regular interval for readability. By default, this interval is calculated automatically to display rounded values while reserving some amount of space between the elements, or on category scales to attempt to display a label for each category.

An interval offset of 14 Days from the first of the month, and an interval of 1 Month.

An interval offset of 14 Days from the first of the
month, and an interval of 1 Month.

To change how automatic intervals are calculated or to set custom intervals:

  1. Locate the axes list on the chart control containing the axis that you want to change and click its ellipsis button.
  2. In the Axes property window, locate the Scale property and click its ellipsis button.
  3. To access minor interval properties, click the Show Advanced Properties button at the top of the properties grid.
  4. Set the desired properties, described below.
  5. Click OK and Close to return to the dashboard canvas.

Intervals

The interval properties determine how often an element is displayed along the scale between the minimum and maximum of that scale. Separate interval properties exist for labels, major tick marks, minor tick marks, major grid lines and minor grid lines. Changing the Default Interval property will change the interval for labels, tick marks and grid lines all at once, unless the other interval properties are changed from their default value of Auto.

  • On a numeric scale, to display an element at 0, 5, 10, etc., set an interval of 5.
  • On a date/time scale, to display an element at January, February, March, etc., set an interval of 1 and an interval type of Months.
  • On a category scale, to display an element only for every other category, set an interval of 2.

Interval Offsets

The interval offset properties determine how far from the start of the scale the axis elements should start along that scale. Separate interval offset properties exist for labels, major tick marks, minor tick marks, major grid lines and minor grid lines. Changing the Default Interval Offset property will change the interval offset for labels, tick marks and grid lines all at once, unless the other interval offset properties are changed from their default value of Auto.

  • On a numeric scale that starts at zero, to display elements at 2.5, 7.5, 12.5, etc., set an interval offset of 2.5 (and an interval of 5.
  • On a date/time scale that starts at January 1st, to display elements at January 15th, February 15th, March 15th, etc., set an interval offset of 14 and an interval offset type of Days. (Also set an interval of 1 and an interval type of Months.)
  • On a category scale, to display an element halfway between each category, set an interval offset of 0.5. For example, to display tick marks halfway between the axis labels, set the Major Tick Interval Offset property to 0.5.

Note: A Default Interval Offset of Auto positions labels, tick marks and grid lines at rounded values and allows for more flexible intervals when intervals are set to be automatic: for example, when displaying multiple years of daily data points, the intervals can automatically offset to show labels corresponding to only the beginnings of months or years. This is the default setting for new charts. To always show intervals corresponding to the interval between data points, set an interval offset of zero: for example, to ensure labels always show individual dates when displaying daily data points.

Axis Margins

Intervals added within the axis margins.

Intervals added within the axis margins.

Axis margins reserve some amount of space before and after the data point values along the axis scale. If automatic axis margins are enabled and minimum and maximum have not been set to specific values, margins are added before and after the range of data point values along the scale based on the default scale interval.

Note: If pixel/percent margins are used, the pixel distance or the percentage of the axis length that you specify will be reserved before and after everything else displayed along that axis, including other margins, data points, labels, tick marks and grid lines.

These properties on the axis can be used to customize the margins:

  • Auto Margin Enabled: Enables or disables the automatic interval margins.
  • Auto Margin Intervals: Set to False for axis element intervals to begin with the first data point and end at the last data point, otherwise set to True for intervals to span the entire axis.
  • Auto Margin Mode: Determines how the margins are calculated.
    • Auto: Adds symmetrical margins to X axes and rounded margins to Y axes.
    • Rounded: Expands the minimum and maximum to rounded values based on the interval.
    • Symmetrical: Expands the minimum and maximum by (at least) one interval.
  • Minimum Margin Size: Set to a specific pixel size or percentage of the axis to reserve as a margin at the minimum of the axis. This margin is separate from Auto Margins.
  • Maximum Margin Size: Set to a specific pixel size or percentage of the axis to reserve as a margin at the maximum of the axis. This margin is separate from Auto Margins.

Tip: You can use a different interval for the automatic margins than the interval used for labels, tick marks and grid lines by customizing properties on the scale: set Default Interval to the interval to use for margins, and set the Label Interval, Major Grid Interval, Major Tick Interval, etc. to assign the other elements a different interval.

Removing Gaps

A candlestick chart with weekends and holidays removed

A candlestick chart with weekends and holidays removed

The Remove Gaps property can be used on numeric and date/time scales on X axes. If set to True, any gaps in a regularly-occurring interval in the dimension values are removed along the axis scale. For example, if data exists for Monday through Friday but not Saturdays and Sundays, the scale will skip from the end of Friday to the beginning of Monday without leaving any space for the missing days. By default, this property is set to False for a date/time scale (meaning gaps will appear if applicable).

Customizing Automatic Intervals

Leaving interval properties set to their default value of Auto offers the most flexibility for smart axis labeling when the data can change or if the chart is resizable, but you may want to change how the intervals are calculated:

  • The Auto Interval Minimum Length property specifies the minimum distance between the intervals along the scale in pixels for intervals that are set to Auto. Increase this value to create more space between the automatic intervals, or decrease to make them closer together. (This setting does not apply to category scales.)

  • The Auto Interval Lower Limit on numeric scales can be used to prevent automatic intervals from being calculated below the specified value. For example, set to 1 to prevent fractional numbers from being displayed.

  • On date/time scales, period formats can also be used to customize which intervals can appear when they are automatically calculated:
    1. Open the scale's Period Formats property window.
    2. Add a period format with an Interval and Interval Type to allow the specified interval to be displayed by automatic intervals when it would not normally be displayed.
    3. Set a period format's Disable Automatic Intervals property to True for automatic intervals to skip the specified interval.

Appearance

The appearance of axis labels, tick marks and grid lines is controlled by the axis for all scales along that axis. To access these properties:

  1. Locate the axes list on the chart control containing the axis that you want to change and click its ellipsis button.
  2. To customize the minor tick marks or minor grid lines, click the Show Advanced Properties button at the top of the properties grid.
  3. Locate the Labels, Major Grid Lines, Major Tick Marks, Minor Grid Lines or Minor Tick Marks properties and expand them.

Note: The minor tick marks and minor grid lines are hidden by default. To display them, set their Visibility properties to Visible.

Axis labels have the most appearance properties, which allow you to fine-tune how the labels are arranged for the text to fit. By default, the labels are arranged for you automatically using one of several methods to display them at the font size you choose without overlapping the text. In most cases it is best to leave this feature enabled and to configure the way it works using the properties detailed below, especially if the chart is in a resizable dashboard or dashblock. If you know exactly how you want labels to be arranged, you can disable automatic fitting by setting the Enable Auto Fit property to False.

To adjust how labels are arranged, click the Show Advanced properties button at the top of the properties grid, and locate the properties you want to change:

  • Alignment: Aligns labels that are rotated perpendicularly to the axis, for example labels along the vertical axis of a horizontal bar chart.
  • Angle: Sets an angle in degrees clockwise for the label text to be rotated. (If Enable Auto Fit is set to True and the text does not fit at the set angle, the text may be rotated to another angle automatically.) Any positive or negative angle can be specified.
  • Auto Fit Methods: Controls which label arrangements are attempted when automatically fitting the labels. Uncheck a method if you do not want it to be used:
    • Decrease Font: Labels will be displayed as close as possible to the font size set with the Font Size property, but may be resized as small as the size specified with the Auto Fit Min Font Size property if they do not fit.
    • Stagger: Labels may be displayed alternating between two rows.
    • Rotate 45: Labels may be rotated 45° clockwise.
    • Rotate 90: Labels may be rotated 90° clockwise.
    • Rotate 315: Labels may be rotated 45° counterclockwise.
    • Rotate 270: Labels may be rotated 90° counterclockwise.
    • Wrap: The text of the labels may be wrapped into multiple lines where there are spaces.
  • Auto Fit Min Font Size: Controls the minimum font size (in pixels) of the labels if auto fit is enabled and Decrease Font is checked above.

Note: Only the first row of axis labels are affected by alignment, angle, staggering and wrapping options. Only the font size options above affect the data table and grouping labels.

When displaying a data table, axis label groupings, range annotations or an Analytical Chart, you can control the borders and fill of the lines around the text by clicking the Show Advanced Properties button at the top of the properties grid and changing the Grouping Stroke and Grouping Fill properties.

Data Table

If you want to be able to easily see the Y (measure) values of your data points and do not want to depend on tooltips or use data point labels, you can display a data table of Y axis values along the X axis that matches up with the data points corresponding with axis labels. The data table is best used when each data point has a corresponding axis label.

To enable the data table:
  1. Click the X Axis or Secondary X Axes property on the chart control containing the axis that you want to change and click its ellipsis button.
  2. Locate the Labels properties and expand them.
  3. Set Display Data Table to True.
  4. Click Close.

Note: This feature is not supported in analytical dashboards.

If your data is not rounded correctly or you want to customize how it is displayed, each data series can have a custom format:
  1. Click the Series property on the chart control and click its ellipsis button.
  2. Click the Show Advanced Properties button.
  3. Set the Data Table Format property to a format. To use the Format Text dialog, click the ellipsis button.
  4. Click Close.

To exclude a data series from the data table, set the Include In Data Table advanced property of the series to False.

A chart with a data table enabled.

A chart with a data table enabled.


A built-in legend is displayed with the data table. To customize its text, set the Legend Text property of the series.

Grouping

Axis labels can be grouped by one or more additional rows of labels into categories, hierarchies or time periods. Groupings can come from values from the KPIs and datasets added to the chart, or from different time periods that you choose along an axis date/time scale.

Note: This feature is not supported for stubbed KPIs or stubbed datasets.

There are two ways data from KPIs and datasets can be used to group axis labels:


Note: Only the axis dimension of a KPI is displayable, so other dimensions cannot be used for adding column groupings. You can add the KPI axis dimension, KPI measures, dimension hierarchy levels, or dataset columns as groupings.

Each data grouping definition is displayed as an additional row of labels, in order, from the axis outward. Dimension hierarchy groupings will not be displayed if they are at a lower level than the data that is displayed in the chart to prevent redundant grouping labels from being displayed when a grain filter is changed.

To add groupings based on KPI and dataset values:

  1. Find the Series of the chart and click its ellipsis button.
  2. Find the X Axis Label Groupings property and click its ellipsis button.
  3. Using the Add button drop-down menu, either choose a Column Grouping or Dimension Hierarchy Grouping.
    Image
  4. Set Data Column or Hierarchy Level to the values that you want to use to group the values displayed along the axis.
  5. To change the formatting of the values that are displayed, click the Show Advanced Properties button and set the Format String property. All values with the same formatted grouping value will be grouped together.
  6. Repeat steps 3-5 to add additional groupings if desired. Click Close to return to the dashboard canvas.

Product category groupings.

Product category groupings.


Groupings based on time periods can be added using period formats on date/time axis scales:

Image
  1. Find the property for the axes on the chart to which to add groupings, and open its collection editor window.
  2. Find the Scale property and click its ellipsis button.
  3. Find the Period Formats property and click its ellipsis button.
  4. Click Add to add a new period format.
  5. Set Interval and Interval Type to the time period corresponding to the groupings you want to display.
  6. Set Format to a format. To use the Format Text dialog, click the ellipsis button. Quarter numbers are supported for periods of 3 Months, and week numbers are supported for periods specified in Weeks, using the format character s as in Week s or Week ss.
  7. Set Show Groupings to True.
  8. Repeat steps 4-7 if desired. Click Close and OK to return to the dashboard canvas.

Time period groupings will not be displayed if they are at or below the length of the interval used for the axis labels. This is to prevent redundant grouping labels from being displayed, for example, when a grain filter is changed.

Time period groupings.

Time period groupings.


Minimum and maximum

By default, the minimum and maximum values of a chart's axis scale at viewing-time is determined automatically based on the range of data values returned in your data. You can influence the automatic minimum and maximum a number of ways.

  1. Start in the dashboard designer by locating the appropriate axis property of the chart control (Y Axes, for example) and clicking the ellipsis button.
  2. If there are multiple axes, select the axis to change.
  3. Some options are on the axis scale. In this case, locate the Scale property and click its ellipsis button.

These options are available on axes or axis scales:

  • On Y axes with numeric scales, change the scale's Start From Zero property. If set to True, the axis will start from zero even if none of the metric values are near zero. This prevents the Y axis from being misleading, but it can make it harder to see small differences between data. An alternative to setting this to False is to use scale breaks.

  • For more control, numeric axis scales also have properties that can restrict the automatically-calculated minimum and maximum to be no lower and/or no higher than the values you specify. In the numeric scale's properties, click the Show Advanced Properties button and locate the following properties:
    • Auto Minimum Lower Limit
    • Auto Minimum Upper Limit
    • Auto Maximum Lower Limit
    • Auto Maximum Upper Limit

  • Set the axis Auto Margin Enabled property. This determines if the scale of the axis will extend past the original range of data values. See the section on intervals for details and options.

  • Set the Reversed property of an axis to True to reverse the minimum and maximum of the axis. (This also changes the axis origin so that the adjacent axis will switch to the other side. For example, if you reverse the X axis, the Y axis will switch from the left to the right.)

Tip: By default, Start From Zero is set to True on all charts except Stock and Candlestick.

You can also determine the minimum and maximum yourself either using the corresponding properties on the scale itself, or by specifying the minimum and maximum in the associated KPI definition.

To specify the minimum and maximum via the properties of the scale:

  1. Locate the appropriate axis property of the chart control and click its ellipsis button.
  2. In the Axis property window, locate the Scale property click its ellipsis button.
  3. In the Scale property window, locate the Minimum property and choose the New Value option from the drop-down menu in order to enter your own value.
  4. Set the Maximum property in a similar fashion.
    Minimum and maximum scale properties.
  5. Set the Min/Max From KPI property to False.
  6. Click Close, then save and preview your dashboard.

Tip: By default, the scale's Min/Max From KPI property is set to False if the associated KPI does not define any minimum or maximum measure values for visualization purposes.

To have the chart's scale use the minimum and maximum measure values as defined by the associated KPI:

  1. Locate the appropriate axis property of the chart control and click its ellipsis button.
  2. In the Axis property window, locate the Scale property click its ellipsis button.
  3. Set the Min/Max From KPI property to True.
  4. Click Close, then save and preview your dashboard.

KPI General tab: Specifying minimum and maximum measure values.

KPI General tab: Specifying minimum and maximum measure values.


Tip: By default, the scale's Min/Max From KPI property is set to True if the associated KPI does define a minimum or maximum measure value for visualization purposes.





Strip lines

A bar chart and a legend displaying two strip lines.

A bar chart and a legend displaying two strip lines.

Strip lines are lines or bands that you can position across the chart at specific locations along an axis. They can be useful to display a goal line or a range of values for context.

If your KPI or dataset has states defined that range between constant values, strip lines will be added to the Y axis scale for you when you add it to the chart. You can change or disable the state group used with the chart using the Data Settings Configuration Wizard.

Tip: You can also use state styles to display KPI or dataset states, and if states range between metric values rather than constants, these will be added automatically instead of strip lines.

To configure strip lines:

  1. Locate the appropriate axis property of the chart control and click its ellipsis button.
  2. In the Axis property window, locate the Scale property and click its ellipsis button.
  3. In the Scale property window, locate the Strip Lines property and click its ellipsis button.
  4. Here, you can modify the properties of strip lines, click Add to create a new one, or click Remove to remove one.
  5. The State property links a strip line to KPI or dataset states that range between constant values. Set it to a state to use the boundaries defined in the KPI or dataset, or set it to None to unlink it from states. If set to a state, the strip lines will update automatically if the boundaries in the KPI or dataset are changed.

Note: Strip lines are not visible without a Fill or Stroke, and a position. Use the Start Value or Interval Offset to position your strip line, or ensure its State property is set to a state if your strip line is linked to a KPI or dataset state.

A chart displaying X axis strip lines indicating weekends.

A chart displaying X axis strip lines indicating
weekends.

Strip lines can occur at a regular interval along an axis scale the same way that axis labels, tick marks and grid lines do. This can be useful, for example, to highlight weekends in a different color. The steps below walk through this example:

  1. Follow the steps above up to #4.
  2. From the Start Value property menu, choose New Value.
  3. Set the Start Value property to any Saturday occurring before the data displayed in your chart. (It will not hurt the performance of the chart if the Saturday occurs long before your data.) This will start the strip lines on Saturday mornings at midnight.
  4. Because our data does not have times specified, the data points will be positioned at midnight. We can move the strip lines backwards by half a day to prevent overlapping with data points by setting the Interval Offset property to -0.5 and the Interval Offset Type to Days.
  5. Set the Strip Width property to 2 and the Strip Width Type property to Days.
  6. Set the Interval property to 1 to make the strip line repeat.
  7. Set the Interval Type property to Weeks.
  8. Click Close, OK, and Close, then save and preview your dashboard.

For more information on axis element intervals and interval offsets, see the "Intervals" section above.

Multiple and secondary axes

The Dundas Dashboard Chart supports multiple axes on each side of the chart on any rectangular chart type. Each series can be assigned to any of those axes, so that it can have a separate set of values from the others. While this can make understanding the values more difficult for the viewer, it may be a useful option in some cases in order to compare trends between two series with very different ranges of values.

A chart with two primary Y axes, a chart with both primary and secondary X and Y axes, and two associated legends.

A chart with two primary Y axes, a chart with both primary and secondary X and Y axes, and two associated legends.


If you drop two KPIs or datasets on a chart that do not have compatible data types or have different units defined, a new axis may be created for you automatically. To configure multiple or secondary axes yourself:

  1. Locate the axis property corresponding to the axis you want to use on the chart control and click its ellipsis button. (Primary X axes are displayed on the bottom by default, while secondary X axes are displayed on the top. Primary Y axes are displayed on the left by default, and secondary Y axes are displayed on the right.)
  2. If there is not already an axis present where you want it, click Add.
  3. Change some of the axis properties if you like, then click Close.
  4. Locate the Series on the chart control and click its ellipsis button.
  5. For each series, set the X Axis Type, X Axis, Y Axis Type and Y Axis properties to display it on the appropriate axis.

Note: If you set the Reversed property of an axis to True, this reverses the minimum and maximum of the axis, and changes the axis origin so that the adjacent axis will switch to the other side. For example, if you reverse the X axis, the Y axis will switch from the left to the right.

Tip: There is a small amount of space reserved between each axis by default when you display multiple axes on the same side of the chart. To change this space, follow the steps above to step 3, click Show Advanced Properties at the top of the properties grid, and set the Multiple Axis Margin property.

Scale breaks

A conventional chart displays only one scale along an axis, meaning there are no discontinuities between its values. If there may be large differences between the metric values of your KPI or dataset, you may consider it worthwhile to enable automatic scale breaks. This feature automatically detects differences in data larger than the threshold you specify, and generates scale breaks to remove those empty spaces. With large unused spaces removed, there is more room for the rest of the values making it easier to recognize small differences between the values. Breaks in the axis scale can make charts misleading, so it is recommended to display a jagged or wavy line to clearly indicate the presence of a scale break, which is enabled by default.

Tip: You can also use a scale break as a visual cue that the Y axis does not start at zero, as shown in the left figure below. This is an alternative to setting the Start From Zero property to False.

To enable scale breaks (supported on Y axes only):
  1. Locate the Y Axes or Secondary Y Axes property containing the Y axis you wish to change, and click its ellipsis button.
  2. Expand the Scale Breaks properties.
  3. Set the Enable Automatic Breaks property to True, and adjust other properties if you like.
  4. Click Close, then save and preview your dashboard.

Two examples of charts with automatic scale breaks enabled.

Two examples of charts with automatic scale breaks enabled.


Aligning charts

Different charts may have different lengths of axis labels, different axis titles or different axes altogether, causing different amounts of spacing around the edges of the plotting area. You can easily line up the positions of axes for aesthetic reasons using position alignment.

Note: Aligning of axis positions only affects the padding reserved between the axes and the edges of each chart, and does not rearrange the charts on your dashboard. The positions of the chart controls should line up with each other in the dashboard designer.

When displaying charts with metrics that are meant to be compared, the automatic axis minimum and maximum can make comparisons misleading. Use data alignment to ensure the axes of each chart takes the data from other controls into account.

Two charts without alignment.

Two charts without alignment.

Two charts without alignment.

Two charts without alignment.

Two charts using data alignment.

Two charts using data alignment.

Two charts with horizontally-aligned position.

Two charts with horizontally-aligned position.


To align the positions and/or data of axes:
  1. Set Align Axes With on one chart to another to visually line them up. It does not matter which chart is set to align with the other.
  2. If there are additional charts, align them with either of the charts from step 1.
  3. Set Alignment Orientations to Horizontal, Vertical, or both.
    Image
    Horizontal alignment affects vertical axes, and is normally used when charts are horizontally next to each other. Likewise, vertical alignment affects horizontal axes, and is normally used when charts are vertically stacked.
  4. Set Alignment Types to Position to visually line up the positions of the axes, Data to match up the values displayed along the axes, or both.

Alignment properties.

Alignment properties.


Note: Alignment does not affect Pie or Funnel charts.

In some more advanced scenarios, the options above may be too simple. For example, for two charts that are stacked vertically, you may want to align the positions of the horizontal axes, but the minimum and maximum of the vertical axes. Or, you may have a table of charts, where ideally each row should be aligned horizontally, and each column vertically, rather than aligning all charts both horizontally and vertically. You can use the advanced alignment properties to control how alignment works in more detail:

  1. Follow steps 1-4 above, allowing all alignment types and orientations that may be needed.
  2. Click the Show Advanced Properties button, and set the following properties:
    • Alignment Data Horizontal Group: Aligns the data of vertical axes in controls with the same data horizontal group.
    • Alignment Data Vertical Group: Aligns the data of horizontal axes in controls with the same data vertical group.
    • Alignment Position Horizontal Group: Aligns the positions of vertical axes in controls with the same position horizontal group.
    • Alignment Position Vertical Group: Aligns the positions of horizontal axes in controls with the same position vertical group.

Titles

A chart with a Y axis title.

A chart with a Y axis title.

While Label controls can be used to give charts and other controls titles, they are difficult to use for labeling axes since they frequently need to shift position when data changes and may be displayed vertically. Axes can be assigned a title that automatically centers along the axis:

  1. Find the axes of the chart to which you want to assign a title and open its collection editor window.
  2. Set the Title property of the axis to the title text.
  3. To change the rotation of the title on vertical axes, set the Title Rotation property to your preference of Clockwise, Counterclockwise, or Toward Axis (clockwise for right axes and counterclockwise for left axes.)
  4. To change the spacing between the axis title and other axis elements like labels and tick marks, set the Title Margin property.
  5. Click Close to return to the dashboard canvas.

Crossing axes and quadrants

Axes can be positioned so that they cross each other inside the plotting area, rather than intersecting at the edges. To change the position of an axis:

A chart with the X axis crossing the Y axis at zero, but marks at the plotting area edge.

A chart with the X axis crossing the Y
axis at zero, but marks at the plotting
area edge.

  1. Open the axes collection editor on the chart containing intersecting axis. For example, to position an X axis along a Y axis, open the Y axes collection.
  2. Find the Crossing Position properties under the Layout category. The following types of crossing positions are available:
    • Auto: The intersecting axis should cross at the minimum of this axis if primary, or at the maximum if secondary.
    • Minimum: The intersecting axis should cross at the minimum of this axis.
    • Maximum: The intersecting axis should cross at the maximum of this axis.
    • Center: The intersecting axis should cross halfway between the minimum and maximum of this axis.
    • Value: The intersecting axis should cross at the value specified in the Crossing Value property.
  3. Click Close to return to the dashboard canvas.

By default, the axis labels and tick marks will be displayed along the axis if it located in the middle of the chart. To display the labels and tick marks of an axis along the outside edge of the plotting area, set that axis' Marks Next To Axis advanced property to False.

When both X and Y axes cross each other inside the plotting area, they can be used to divide the chart into quadrants. The quadrants are assigned numbers based on quadrants in mathematics, as shown below. You do not normally need to pay attention to the quadrant numbers, but if one or both axes are reversed, the positions of the quadrants change to follow the minimum/maximum of each axis.

Chart quadrants.

Chart quadrants.


Image
Fewer than four quadrants may be visible if one or more axes do not cross through the middle of the plotting area.

Each quadrant can be assigned its own title and/or background brush using the chart's Quadrants property window. Click to select a quadrant on the left, or hold SHIFT while clicking to select multiple quadrants, and set properties on the right:
  • Background: Paints a separate background for a quadrant of the plotting area. (Optional.)
  • Title: Displays the specified text as a quadrant title. Quadrant titles are displayed closer to the plotting area than axis titles.
  • Title Horizontal Alignment: Aligns the title within the quadrant Left, Center or Right.
  • Title Horizontal Placement: Positions the title Inside the plotting area horizontally, or Outside on the left or right.
  • Title Vertical Alignment: Aligns the title within the quadrant Top, Center or Bottom.
  • Title Vertical Placement: Positions the title Inside the plotting area vertically, or Outside on the top or bottom.
  • Text Alignment: Aligns the text within the title Left, Center or Right if it there are multiple lines.
  • Font properties can be used to customize the title font.

A business matrix can be formed by assigning meaning to quadrants corresponding to the business metrics:

A growth-share matrix.

A growth-share matrix.


Data series

Reordering

The order of the series on the chart determines which series are drawn on top of other series; or for multiple bar series, which series come first in a group. Series that are first are drawn on the bottom (or left), while later series are drawn on top (or right).

At left, the bar series is first and the line series second. At right, the order is reversed.

At left, the bar series is first and the line series second. At right, the order is reversed.


The series on the chart have the same order as the KPIs/datasets. To change the order:

  1. Click the menu button at the top-right corner of the chart.
  2. From the menu, choose Data Information.
  3. Click and drag the KPIs and datasets into the order that you prefer.

Another option is to set the Z-index of a series higher than the others to make it appear on top, or lower than the others to make it appear below. Bear in mind that all elements of the chart have a default z-index of zero, meaning any element with a z-index other than zero will appear on top of or below all other elements by default. Follow the steps below to set the series z-index:

  1. Locate the Series property of the chart and click the ellipsis button.
  2. Click the Show Advanced Properties button at the top of the properties grid.
  3. Locate and set the Z-Index property. There are also separate Label Z-Index and Marker Z-Index properties for data point labels and markers.
  4. When finished, click Close to return to the dashboard canvas.

Text properties

To provide more details and context with your data points, you can display as many values as you like using data point tooltips, data point labels, legend text and X axis labels. You can set these by following the steps below:

  1. Locate the Series property of the chart control and click its ellipsis button.
  2. If customizing an advanced label text property, click the Show Advanced Properties button at the top of the properties grid.
  3. In the Series property window, locate the appropriate text property and set it using chart keywords. Click the ellipsis button to use the keywords editor.

By using chart keywords, the text will display the unique values for each data point, and you can choose to format and combine multiple values however you like.

The following series text properties are available, and support keywords:
You can also set some of these properties on series point styles to change the text displayed based on some conditions.



Data point labels

Enabling

Individual data points can be labeled, displaying whatever data point information you choose. You can enable labels on all points in a series, or on select points of interest.

To enable labels on all points in a series:

  1. Find the Series property of the chart control and open its collection editor window.
  2. Select a series, and set one of two properties:
    • To display the Y value with default formatting, set the Show Y Value Label property to True.
    • To customize the format or values displayed, set the Label Text property. This is one of the chart's text properties, which allow chart keywords. (If set, this property takes priority over Show Y Value Label.)

To label only points of interest, enable one or more point styles and set the Show Y Value Label or Label Text property on the style.

A line chart labeling high and low points.

A line chart labeling high and low points.


Note: For Stock and Candlestick charts, choose which price value is used when calculating which data points to label by using the Aggregate Value property.

Positioning

A line chart with default label positioning.

A line chart with default label positioning.

On all rectangular charts, data point labels are positioned adjacent to the Y axis value of the data point by default, and are automatically adjusted to attempt to avoid overlap by default by moving to another side of the Y-value. You can customize the positioning by following the steps below.

  1. Locate the Series property of the chart control and click its ellipsis button.
  2. In the Series property window, click the Show Advanced Properties button at the top of the properties grid.
  3. Locate the Label Alignment and Label Offset properties.
    • The Label Alignment provides the option of positioning labels in any one direction relative to the Y-value of the data point or centered over it. By default, it is Auto.
    • The Label Offset allows you to change how far away from the Y-value the label is positioned in pixels.
  4. When finished, click Close to return to the dashboard canvas.

Tip: When changing Label Alignment from its default value of Auto, it is possible for data point labels to be positioned partially or completely outside of the plotting area. To ensure that labels are not cut off at the edge of the chart control, set the advanced Padding property of the chart to reserve around the outside of the chart for them.

Certain types of charts provide more options for positioning labels, detailed below.

Bar series (including stacked bar and 100% stacked bar) also provide the option to position labels inside the bars.

  1. Locate the Series property of the chart control and click its ellipsis button.
  2. Locate the Label Location property and set it to Inside.
  3. To access the advanced inside label properties, click the Show Advanced Properties button at the top of the properties grid.
    • Inside Label Alignment: allows you to choose between Top, Bottom or Center labels. (When bars are horizontal, Bottom is closest to zero.)
    • Inside Label Margin: reserves a certain amount of space from the edge of the bar when Inside Label Alignment is Top or Bottom.
    • Inside Label Overflow Hidden: when True, labels that do not fit within the bar are hidden.
    • Inside Label Rotation: allows you rotate the labels 90° clockwise or counterclockwise, which is useful for vertical bars.
  4. When finished, click Close to return to the dashboard canvas.

A bar chart with data point labels centered inside the bars.

A bar chart with data point labels
centered inside the bars.


Pie charts have three ways to position labels:

  1. Locate the Series property of the chart control and click its ellipsis button.
  2. Locate the Label Location property and choose between Inside and Outside.
  3. If labels are Outside, locate the Outside Alignment property and choose between Radial and Side. Radial labels are positioned at approximately the same distance away from the pie all the way around, while Side labels are lined up in columns to the left and right of the pie.
  4. To access the advanced outside label properties, click the Show Advanced Properties button at the top of the properties grid.
    • Outside Horizontal Line Size: sets the length of the horizontal portion of the lead lines connecting labels to the pie as a percentage relative to the size of the chart.
    • Outside Minimum Spacing: reserves a minimum number of pixels between data point labels to prevent them from looking cluttered.
    • Outside Radial Line Size: sets the length of the angled portion of the lead lines connecting labels to the pie as a percentage relative to the size of the chart.
  5. When finished, click Close to return to the dashboard canvas.

A pie chart with outside data point labels lined up at the side.

A pie chart with outside data point labels lined up at the side.


Funnel charts provide five ways to position labels:

  1. Locate the Series property of the chart control and click its ellipsis button.
  2. Locate the Height Labeling Type and/or Width Labeling Type property, and choose between Center, Left Side, Right Side, Left Column, and Right Column. The width and height values can each be positioned separately.
  3. When finished, click Close to return to the dashboard canvas.



Markers

Markers are symbols displayed at the location of the Y-value over the data points of any chart type. They make locating this value easier on a chart, and are especially useful for charts related to Line, Area and Spline charts to pinpoint the data values along the line or area shape, but are supported by all chart types except Bubble. On point charts, markers are used as the data points.

A spline chart with markers visible.

A spline chart with markers visible.


To customize data point markers, you can customize the chart palettes, or you can set the marker properties on the series:

  1. Locate the Series property of the chart control and click its ellipsis button.
  2. Locate the Marker Visibility property and set it to either Visible or Collapsed.
  3. Set other marker properties to change marker appearance or layout if desired, then click Close to return to the dashboard canvas.

    Image
    Image

Tip: If the axis auto margins are disabled, markers may be positioned at the edge of the chart in some cases. To prevent them from being cut off, you can set the advanced Padding property on the chart control to reserve space for them.

Palettes

To give each data series or data point a distinct appearance, the chart provides series and data point palettes. Palettes style each data series or each data point in sequence, so that different styles are applied to the data regardless of the number of series or points displayed when you view your dashboard.

Tip: If you are using a KPI with a splitter dimension, multiple series may be generated when the dashboard is viewed, so the series palette properties on the chart control are very useful.

To set a palette on a chart yourself, you can use the palettes provided, or customize one. To use a palette provided with Dashboard, change the Series Palette property of the chart control. To modify the palette, locate the Series Custom Palette property and click its ellipsis button. You can style the following data point/data series properties in a palette:

  • Fill
  • Stroke
  • Stroke Thickness
  • Stroke Pattern (Advanced)
  • Visual Effect (Advanced)
  • Marker Fill
  • Marker Width
  • Marker Height
  • Marker Shape
  • Marker Stroke
  • Marker Stroke Thickness

A bar chart using a series palette with four series.

A bar chart using a series palette with four
series.


To apply a different style to each data point within a single series, use the Points Palette and Points Custom Palette properties on the series, by accessing your series from the Series property of the chart control.

Tip: On pie and funnel charts, the series palette will automatically be applied in sequence to each point instead of each series, so you do not need to use the points palette properties.

A bar chart with one series using a points palette.

A bar chart with one series using a points
palette.


Note:
  • The palette settings can be overridden on a series by changing the property on the series that corresponds to a palette property above from its default value of Auto, None or (Use Palette) to a value you choose. Reset the property to one of these values in order to use the palette value.
  • The points palette properties on the series take priority over the series palette properties of the chart. By default, the points palette properties are set to None, so that the series palettes take effect.


Skins

Some types of charts have various skins available to change the aesthetics of the data series:


Skins add textures and effects to the data points, some of which can't be accomplished using other properties. You can access these properties on the series:

  1. Locate the Series property of the chart control and click its ellipsis button.
  2. Set the Bar Skin, Pie Skin or Funnel Skin property.

Two bar charts with the same colors but using different bar skins.

Two bar charts with the same colors but using different bar skins.


Animations

There are two types of animations that can be used when there are changes in data: easing animations and trend animations.

  • Easing animations are designed to transition the data points of the chart smoothly when loading, when data refresh is enabled on the chart and values change, or when a dashboard parameter changes that affects a KPI or dataset displayed on the chart. This helps to emphasize changes in data on your dashboard by giving users a period of time in which to see that data is changing, which data points, and in what direction. If enabled when loading or if the axis scales have an automatic minimum or maximum that has changed as a result of data changes, the labels, tick marks, grid lines and strip lines will also animate along the axes.

  • Trend animations animate new data points one-at-a-time in sequence when they are loaded. Each data point starts from the previous data point's metric value and shifts to the new value, helping to demonstrate changes in trend. Each data point gets an equal amount of time out of the total trend animation duration to animate, so faster movement indicates a larger change in value. If both trend animations and easing animations are enabled, trend animations take priority for new data points, and easing animations will be used for existing data points whose values have changed.

Animations are supported by all chart types, and are enabled using properties on the data series:

  1. Locate the Series of the chart control and click its ellipsis button.
  2. To enable easing animations, locate the Easing Animations Enabled property and set it to True.
  3. If you want the data points and axes to animate when they are first loaded using easing animations, set Easing Enabled On Load to True.
  4. To animate new data points one-at-a-time in sequence using trend animations, locate the Trend Animations Enabled property and set it to True.
  5. When finished, click Close to return to the dashboard canvas.

Additional settings on the series are available for more advanced customization, available after clicking the Show Advanced Properties button:
  • To change the lengths of the animations, set the Easing Duration and/or Trend Animation Duration properties.
  • The Easing Function and Trend Animation Easing Function properties can be used to change the mathematical formulas used to determine when the animations speed up and slow down. The Easing Function is used by easing animations, and for each individual data point during trend animations. The Trend Animation Easing Function is used to determine how the trend animation progresses across the entire set of new data points.
  • The Label Fade Duration property determines how long it takes for data point labels and annotations to fade in after the animation has completed for a data point. Data point labels and annotations are hidden whenever a data point animates.

Point styles

Point style properties are available on the series that allow you to customize data points of interest to change their appearance, label them, display them in the legend or hide them. These point style properties are available:

  • High Point Style — Data point(s) with the highest Y-value in the series
  • Low Point Style — Data point(s) with the lowest Y-value in the series
  • First Point Style — The first data point displayed along the X-axis in the series
  • Last Point Style — The last data point displayed along the X-axis in the series
  • Empty Point StyleEmpty data points calculated by the KPI or dataset in place of null or missing data
  • State Styles — Data points with metric values within the range of a KPI or dataset state
  • Change Point Style — Data points mathematically determined to represent a shift in data using change point analysis
  • Outlier Point Style — Data points calculated as statistical outliers

Note: If more than one point style gets applied to a data point, they are applied with priority given according to the order above. Some properties can be set to Auto, Default or Inherit to allow a lower-priority style or the series to provide the value.

To enable and customize a point style other than state styles:

  1. Locate the Series property of the chart control and open its collection editor window.
  2. On a series, locate the point style property and choose the New Value option from its drop-down menu.
    Image
  3. Customize the desired properties under the expanded point style property.
    Image
  4. To customize how outliers are calculated, set the Outlier Method and Outlier Threshold advanced properties on the series. Points with a Y-value beyond the outlier threshold are considered outliers according to the method chosen:
    • Standard Deviation: The outlier threshold is the specified number of standard deviations away from the mean of the series Y-values.
    • Interquartile Range: The outlier threshold is the range between the upper and lower quartiles times the specified constant.
  5. To customize how change points are calculated, set the Change Point Threshold advanced property on the series. This threshold is the minimum percentage of likelihood that a point is a change point for it to be labeled.

State styles may be created for you automatically when you add data to the chart if you defined states that use metrics as boundaries. You can customize these styles, or add your own styles for any KPI or dataset state:

  1. Locate the Series property of the chart control and open its collection editor window.
  2. On a series, locate the State Styles property and open its collection editor window.
  3. Select an existing state style or click Add to create a new style, and customize any desired properties.
  4. To link a style to a state, set the KPI/Dataset State property at the top.
  5. To remove a style, click Remove.



Large datasets

A line chart displaying 100,000 points and a tooltip.

A line chart displaying 100,000 points and a tooltip.

Charts based on line, area, range or point chart types are capable of displaying up to hundreds of thousands of points and supporting full interactivity under certain conditions:

  1. Markers and point chart data points must be assigned brushes that use solid, 100% opaque colors. Gradients, images, and semi-transparent colors cause more expensive rendering.
  2. Data point properties should not be changed on many points using script, except for the following properties: IsSelected, XValue and YValues.
  3. The points palettes on series should not be used (series palettes on the chart can be used.)
  4. Data point labels should not be enabled on many points.
  5. The Type of Items Displayed legend property on the series should not be changed to Data Points.

Tip: New charts initially meet all of these conditions. If you have an existing point chart that uses a gradient marker fill, you can change the marker fill to a solid color or apply the Athens style resource which ships with Dundas Dashboard to display large datasets with a point chart.

These chart types can be used with large datasets:
Other chart types are not recommended for large datasets and application performance may be affected.

There is a maximum amount of time allowed for the chart to attempt to display given its current data and settings before it stops and displays an error message. To change this length of time, set the Timeout advanced property of the chart to a length in milliseconds (click the Show Advanced Properties button at the top of the properties grid to access this property.)



Legend

Like most data controls, the chart can be connected with a legend. See the article Using the Legend Control for details.

The following elements are able to be displayed in the legend with text and a matching marker:
  • Data series
  • Data points
  • Point style data points
  • User annotations
  • Data annotations
  • Strip lines

To customize all legend items displayed by a chart, find the chart's legend properties:
Image
  • Legend: Sets the legend control connected to this chart.
  • Legend Category: Sets the category (optional) for all of this chart's legend items, unless overridden elsewhere.
  • Reverse Legend Items: Reverses the order of the legend items displayed by the chart if set to True. When you drag a stacked chart control onto the dashboard from the toolbox, this property is enabled by default so that the legend items match the bottom-to-top vertical order of the series.

A stacked bar chart and a legend with reversed legend items.

A stacked bar chart and a legend with reversed legend items.


To customize data series and/or data point legend items, open the chart's Series collection and find the series legend properties:
Image
  • Legend Category: Sets the category (optional) for the legend items of this series and its data points, taking priority over the chart's legend category.
  • Legend Text: Sets the legend item text for this series and/or its data points. Like other text properties, this property supports chart keywords.
  • Reverse Legend Items: Reverses the order of the legend items displayed by this series and its data points if set to True.
  • Type of Items Displayed (advanced): Determines if this series is displayed in the legend, and if one item is displayed for the entire series or if each data point is displayed separately. Set to Auto to display according to the chart type default, Series to display one item for the series, Data Points to display an item for each point, or None not to display.
  • Each point style property contains a Displayed In Legend property. Set this to True to display those individual data points in the legend, and set its Legend Text to customize its text.

User annotations, data annotations, and strip lines each have the following properties:
  • Display In Legend: Set to True to display in the legend, or False to hide.
  • Legend Category: Sets the category (optional), taking priority over the chart's legend category.
  • Legend Text: Sets the legend item text (keywords are not applicable.)

Viewport

The viewport of the chart is the visible area of the chart's axes and data. Normally, the entire length of a chart axis is visible from its minimum to its maximum, but rectangular chart types can be "zoomed in" so that only a portion is visible and data points are placed farther apart. This can be used to get a closer look at a dense cluster of data points.

The viewport has two dimensions: X and Y, corresponding to the axes of the chart. Each viewport dimension affects all axes displayed along that dimension, including all primary and secondary axes. Each dimension has its own set of properties available through the X Viewport and Y Viewport properties of the chart.

Zooming and scrolling

The chart can be zoomed into along one or both dimensions, either when the user does so using the chart cursor, when data loads with more than a specified number of points, or by writing script.

  • To allow the user to interactively click and drag across the chart to zoom in using the chart cursor, expand the chart's Chart Cursor property and set the X Axis Enabled and/or Y Axis Enabled properties to True. Ensure the Zoom Enabled property is set to True.
    Image

  • For the chart to automatically zoom into some number of points with a scrollbar available to view the rest:
    1. In the chart's properties, click the Show Advanced Properties button.
    2. Find the X Viewport of the chart and click to expand it.
    3. Set the Maximum Visible Points property.
      Image

  • To control the zoomed-in area using script, set the StartPosition and Size properties (only accessible in script) on the X and/or Y viewport. A history of multiple zoom-ins can be saved by calling the Zoom method to zoom in, and restored by calling the UndoZoom method. When zoomed out, the viewport start position is zero and the size is one. To zoom in, set the Start Position to a value greater than zero and/or set the Size to a value less than one.

Zooming in with the chart cursor.

Zooming in with the chart cursor.

A zoomed-in chart.

A zoomed-in chart.


When the chart is zoomed in along a dimension, a scrollbar will appear if enabled to allow the user to interactively scroll the viewport along the entire axis dimension. If the scrollbar is visible, the user has access to an undo-zoom button for each dimension that will zoom out the viewport to the previous view when clicked.

The viewport zoom out buttons.

The viewport zoom
out buttons.


The scrollbar can optionally be hidden, or its position and size can be customized:
  1. In the chart's properties, click the Show Advanced Properties button.
  2. Find the X Viewport and/or Y Viewport properties of the chart and click to expand them.
  3. Set the Scrollbar Visible property to False if you want to hide the scrollbar.
  4. Set the Scrollbar Position property to Primary or Secondary, corresponding to the side of the chart where the primary or secondary axes are displayed for that dimension.
  5. Set the Scrollbar Thickness to set the size of the scrollbar in pixels perpendicular to the axis.

The Viewport User Changed Interactions of the chart are triggered when the viewport is zoomed-into using the chart cursor, when it is scrolled, and when the undo-zoom button is clicked, allowing you to perform any action you choose based on the area of the chart that is visible by using script.

Zoom animations

When the chart is zoomed in or out, the data points can optionally be animated into their new size and position. The labels, tick marks, grid lines and strip lines along the axes will also animate. When enabled, zoom animations will take effect when the user interactively zooms in using the chart cursor, or when the Zoom or UndoZoom methods are called in script.

By default, zoom animations are enabled. To disable or to customize them:
  1. Find the X Viewport and/or Y Viewport properties of the chart (they are advanced)
  2. Set the Easing Enabled property to True or False to enable or disable zooming animations, respectively.
  3. Set the Easing Duration property to determine how long the animation will take to complete after the chart has been zoomed in or after a zoom was undone.
  4. Set the Easing Function property if you want to customize how the animation accelerates and decelerates as it progresses.

Chart Cursor

The chart has its own cursor, which allows the user to interact with the chart with the mouse by selecting and marking a position or range on the chart. The lines of the cursor reach the axes to make it easier to relate the cursor's position to the values of the axis.

The chart cursor selecting a single position.

The chart cursor selecting a single position.


Clicking within the plotting area of the chart with the mouse button will position the chart cursor at that point, while clicking and holding the mouse button down while moving the mouse will select the area ranging from when the mouse button was pressed to where it is released. The cursor can be combined with script to perform any action you choose based on what was selected, or automatic zooming can be enabled to zoom into the selected area when the mouse button is released.

To access the chart cursor properties, locate the Chart Cursor property of the chart and expand it.

Image

The following properties affect the behaviour of the chart cursor:
  • The cursor can be enabled along one or both axis dimensions using the X Axis Enabled and Y Axis Enabled properties.
  • Automatic zooming can be disabled by setting Zoom Enabled to False.
  • Allow the user to click and drag a range that has already been selected by the cursor by setting the Can Move property to True.
    Image
  • Allow the user to resize the range selected by the cursor by setting the Can Resize property to True.
    Image
  • Show cursor lines at both the start and end of the selected range by setting the Show Line At Start property to True. A cursor line is always shown at the end of the selected range. If the cursor is resizable, enabling this property will allow the user to resize both ends of the cursor.

The Chart Cursor User Changing Interactions and Chart Cursor User Changed Interactions of the chart are triggered as the user changes the cursor's position and after the changes are made, respectively. These interactions allow you to perform any action you choose based on the area of the chart that is selected by using script.

Related topics


Click to return to: Documentation | Designing Dashboards | DV Controls | Chart

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.