Skip to end of metadata
Go to start of metadata

UXChart is thoughtfully designed with various great user experience features, many of which are built into the products without requiring additional property sets. This topic provides an in-depth overview of the interaction features available in the UXChart control.

 

On this page:

Zoom Animation

One of key user experiences in UXChart is the dual-mode zooming feature. This feature allows users to intuitively zoom in to focus on certain parts of interesting data, or zoom out to see the overall data of the chart. This feature is particularly useful when you have a lot of data to visualized which are clutterred in the chart. 

The zooming capability in UXChart applies to data pointgridline, and axis. There are several zoom mode that can be customized through the ZoomMode property as follows. 

  • X - Only zoom horizontally
  • Y - Only zoom vertically
  • Both - Zoom both horizontally and vertically
  • None - Cannot do zoom

There are several input gestures to perform zooming in UXChart, which are explained in the following sections.

Use Mouse Wheel

You can use mouse wheel to move zoom, in or out, slide in to get zoom in effect and slide out to get slide out effect. Your pointer mouse must be inside chart area in order to work. The position of mouse cursor will determine zoom point position, which means where the zoom will be centered.

Use Mouse Click (double click)

Another way to zoom in is to double click on the part where you want the zoom to take action.

Use Zoom Bar

Using zoom slider bar in the bottom or left chart. Drag the left thumb or right thumb to the opposite side to reflect how much zoom you want to get, the percentage of zoom that can be applied can be seen from how much the zoom bar remains. You can also customize the appearance of the thumb and the visibility. And zoom bar will appear as the mouse enter the area, and fade out as mouser leave, the thumb will appear as mouse is on top of zoom bar.

Use Zoom Box

You can draw box in chart area to represent how much area percentage zoom you want to apply by simply click and hold the left button, and drag it until the box are drawn. You can activate it by holding the SHIFT key, or using property EnableZoomBox in UXChart. By default the zoom box is not enabled since its gesture is used for panning interaction. However, you can enable this feature by setting the EnableZoomBox property to true.

Otherwise, you can just hold the SHIFT key in your keyboard while click and hold your mouse and then drag your mouse until your mouse pointer create some transparent-like rectangular shape. The zoom box reflects how much zoom coverage to apply on the chart. Finally, you can set the zoom box style through the ZoomBoxStyle property.

Panning

In UXChart, you can perform panning while the chart is zoomed in order to see the other part of charts that were not visible in the current chart area. There are two ways to do panning.

Use Mouse

Just click and hold your mouse left button and drag it to the left or right until it reached desired position. The panning function also depends on zoom mode. If EnableZoomBox is enabled, you must hold the SHIFT key to perform panning.

Use Zoom Bar

Use the zoom bar's center thumb which is located between left and right thumb, just put your mouse pointer between the thumbs and hold/drag your mouse to the left or right direction to move until the desired chart area becomes visible.

Enable Zoom Animation

You can also determine whether you want to enable zoom animation when zooming by setting the EnableZoomAnimation property. Furthermore. you can also customize the zoom animation effect using the following property.

Maximum Zoom level

In certain cases, you may want to set a limit for the depth of the zooming function by setting the MaximumZoomLevel property.

The following example shows how to set maximum zoom level.

XAML

Linked Zoom

UXChart supports linked zoom feature in which the zoom properties of a chart, i.e, the zoom level and the zoom position, will be synchronized automatically to the other charts that were configured to link to the main chart. In this case, when users zoom in or zoom out on a chart, all of the linked charts will follow. To enable this feature, simply specify the chart instance's name that you would like to link through the LinkedChart property.

The following example shows how to use the linked zoom feature.

XAML

Initial Zoom

There are times when you want to display a chart that already initially zoomed in to certain position without gesture input from users.

To achieve this configuration, simply set the initial zoom by setting the InitialZoomLevel property, and set the InitialZoomPoint property to determine where the zoom will be centered. Note that the value of initial point should be percentage of the screen real estate where 0,0 is the top left most and 1,1 is the bottom right most.

The following example shows how to define initial zoom in UXChart.

XAML

Cross Hair

In UXChart , CrossHair is a set of two (vertical and horizontal) lines used to locate with precision a particular point on the chart. The crosshair is helpful when identifying the relationship between some points on the graph that are aligned on or near the same axis values. The lines of the crosshair intersect at the position that corresponds to the horizontal (x-axis) or vertical (y-axis) location of the mouse cursor.

You can snap cross hair to nearest data point by setting CrossHairSnap to true, and you can also set CrossHairMode to vertical, horizontal, or both.

Series Animation

Beside zoom animation, UXChart also includes several built-in animations as follows.

Start up Animation

Start up animation is an animation that will be executed when the series is loading for the first time or when the items source of the series are changed at run time. This animation might vary for each series. You can turn on/off the animation through one of the following properties:

  • EnableSlidingAnimation
    Animation that occur from left side to right side, it happen on line based chart, like line chart, spline chart, step line chart.
     
  • EnableFadingAnimation
    Animation that make element to look fade out at first and then more solid after that. this animation used to most series.
     
  • EnableValueAnimation
    Animation type that happen to bar, colum, area, etc, it make data point move from zero point to target point, it also occur when data point value source was changed.

Furthermore, you can also customize the AnimationSequence and AnimationSequenceDuration properties which are used to determine which data point should be animated first through AnimationSequence property as follows:

  • FirstToLastAnimate the first data point followed with the second data point and so on.
  • LastToFirstAnimate from the last data point until the first data point.
  • SimultaneousAll data point will animate together simultaneously, e.g fading.
     

Data Point Animation

Data point animation is an animation applied when the data point value is changed at run time. To enable this feature, you must set the EnableValueAnimation property to True.

Learn More

In the above section, you've learnt the basics of charting data visualization and learnt how to visualize your data in the simplest way. The following links describe more advanced concepts and features of the charting control with in-depth explanation and samples.