Data overview or zoom-bar window

Sometimes it is very useful to have a data overview window next to the zoomed-in chart. Such functionality can be done with ZoomBar and LiteZoomBar controls.

ZoomBar

ZoomBar is a custom XY chart, that can be used to get an overview of the whole dataset and to zoom the chart to specific areas. When a Zoom bar is created, it takes the chart (it is referring to) as a parameter. Since Zoom bar is a separate instance of LightningChart, it can be placed on a different container than the main chart. CustomControls namespace needs to be used in order to use Zoom bars.

using LightningChartLib.WPF.Charting.CustomControls;

// Creating a LightningChart object, then adding a Zoom bar referring to it. LightningChart _chart = new 
LightningChart(); mainGrid.Children.Add(_chart);
zoomBarGrid.Children.Add(new ZoomBar(ref _chart));

ZoomBar automatically shows all the series in the main grid. However, ZoomBarOptions, which contains all properties to control Zoom bar behaviour, has SeriesToUse option that allows hiding specific series types. It is possible to hide the line while keeping the points visible and vice versa. By default, points are hidden in Zoom bar, only the line is visible. Note that if the line or the points are not visible in the main chart, they cannot be shown in the Zoom bar either.

For example,

// Hiding all PointLineSeries lines in the Zoom bar chart.
zb.ZoomBarOptions.SeriesToUse.PointlineSeries.LineVisible = false;

ZoomBar A Zoom bar has been added below the main chart, giving an overview of the whole data. Data points of the Point Line Series are visible in the main chart but not for the respective series in the zoom bar.

In real-time charts, where new data is constantly added, the ZoomBar is unable to update itself automatically. In these cases, series specific add data method such as AddDataToPointLineSeries() or AddDataToHighLowSeries() should be called with the added data points as a parameter.

// Updating series in Zoom bar. The first parameter is the series index.
zoomBar.AddDataToPointLineSeries(0, seriesPointArray);

Alternative for updating ZoomBar chart is to call ZoomBar. Invalidate with input argument specifying which series type to update.

// Updating series in Zoom bar. The input argument specifies which series type to update.
zoomBar.Invalidate(InvalidateSeries.SampleDataSeries);

In version 12.4 Pan property is added to ZoomBar user-control. Pan property controls the direction of zoom-box movement inside this custom control. Previously (also the default behavior after 12.4) zoom-box can be dragged with mouse-cursor in both directions. With Pan it is possible to limit zoom-box dragging only to Vertical or Horizontal direction.

LiteZoomBar

From version 12.4 LiteZoomBar control can be used. LiteZoomBar is a UserControl for XY chart, which can be used to get an overview of the whole dataset and to zoom the chart to specific areas. As name suggest, LiteZoomBar is lightweight version of ZoomBar. It is basically a bitmap image (of reference chart) with range selection rectangle on top. Therefore, it lacks the normal interactivity of LightningChart or ZoomBar. However, the memory consumption is significantly reduced.

When a Zoom bar is created, it takes the chart (it is referring to) as a parameter. LiteZoomBar can be used as standard UserControl. For example, it can be placed in separate Window, Form, grid cell or even on top of the main chart. CustomControls namespace needs to be used in order to use Zoom bars.

using LightningChartLib.WinForms.Charting.CustomControls;

_Window = new Form();
_Window.Location = new Point(this.Left + 50, this.Top + 50);

LiteZoomBar liteZoomBar = new LiteZoomBar(ref _chart);
liteZoomBar.Dock = DockStyle.Fill;
_Window.Controls.Add(liteZoomBar);

LiteZoomBar does not have way to fully customize the appearance like in ZoomBar, but few options are still available. User can set Options to change appearance of selection box, visibility of axes, legendbox or chart title, or the size of the margins (Note, AutoAdjustMarginsInSnapshot should be disabled for ViewMarginsInSnapshot to be taken into account). LiteZoomBarOptions may be set like the following:

liteZoomBar.Options = new LiteZoomBarOptions()
{
    BorderColor = Color.FromArgb(0x66, 0xCC, 0xFF),
    BorderThickness = 2,
    ShowXAxisInSnapshot = false,
    ShowYAxisInSnapshot = false,
    ShowLegendInSnapshot = false,
    AutoAdjustMarginsInSnapshot = false,
    ViewMarginsInSnapshot = new Padding(50),
    ShowTitleInSnapshot = false,
};

LiteZoomBar has been added as separate window on to top of the main chart, giving an overview of the whole data.

When user needs to update/refresh LiteZoomBar / screenshot of main chart, one should call liteZoomBar. RefreshZoomBar() method.

ZoomBar​

LiteZoomBar​

ZoomBar

LiteZoomBar