Integrating a Chart and a Zoombar to Implement Financial Charting

Kiril Matev / Monday, March 14, 2011

Integrating a chart with a zoombar control allows users to easily navigate the chart and to quickly locate the exact data they need. One scenario where this functionality is particularly valuable is financial charting. It is one of the most demanding scenarios because of the amount of data to be visualized, and the level of interactivity and responsiveness required. Implementing such scenarios requires high-speed charting components supporting zooming, panning, trendlines and financial indicators right out of the box. Infragistics NetAdvantage for Data Visualization delivers a fast chart, capable of quickly summarizing millions of points and handling 50ms chart refresh frequency for both WPF and Silverlight. This blogpost shows how to synchronize multiple XamDataCharts and integrate them with a zoombar in WPF, allowing users to easily navigate the chart data.

A fully-functional free 30-day trial of the NetAdvantage for Data Visualization product is available.

Synchronizing the XamDataCharts

Let’s take a look at how we can synchronize the two charts, one showing the price of the commodity and the other, the volume traded. Each XamDataChart has a SyncManager, which controls synchronization with other charts. To enable synchronization between two or more charts, you need to initialize the SyncSettings for each chart with the same value for the SyncChannel property, also setting the direction in which the charts will be synchronized using the SynchronizeHorizontally and SynchronizeVertically properties of the SyncSettings. In our case, we’re synchronizing two charts horizontally, so each of them need to declare the SyncSettings as shown:

<ig:XamDataChart x:Name="priceDataChart" HorizontalZoomable="True">
            <ig:SyncManager.SyncSettings>
                <ig:SyncSettings SyncChannel="charts" SynchronizeHorizontally="True" SynchronizeVertically="False" />
            </ig:SyncManager.SyncSettings>
            …
            …

</ig:XamDataChart>

<ig:XamDataChart x:Name="volumeDataChart" HorizontalZoomable="True">
            <ig:SyncManager.SyncSettings>
                <ig:SyncSettings SyncChannel="charts" SynchronizeHorizontally="True" SynchronizeVertically="False" />
            </ig:SyncManager.SyncSettings>
            …
            …

</ig:XamDataChart>

Integrating the XamDataCharts with a Zoombar for simple data navigation

When declaring the Zoombar, we need to synchronize its selected range with the range of the XamDataChart. This can be done with a simple binding of the Range property controlling the selected range in the Zoombar with the Range property of the HorizontalZoombar of one of the XamDataChart instances – priceDataChart. Here’s the binding setting:

<ig:XamZoombar Name=”xamZoombar1” VerticalAlignment=”Bottom”

Range="{Binding ElementName=priceDataChart, Path=HorizontalZoombar.Range, Mode=TwoWay}">

We also need to set the content which will be shown in the zoombar itself – that would be a XamDataChart, showing the relevant dimension the user would use to navigate the data. In our scenario, that is the price data, which is the same data used in the top-most chart. You can set the content using the HorizontalPreviewContent property, as shown below:

<ig:XamZoombar Grid.Row="2" VerticalAlignment="Bottom"
                       Name="xamZoombar1"
                       Range="{Binding ElementName=priceDataChart, Path=HorizontalZoombar.Range, Mode=TwoWay}">
            <ig:XamZoombar.HorizontalPreviewContent>
                <ig:XamDataChart DataContext="{StaticResource stockDataBuffer}">
                    <ig:XamDataChart.Axes>
        …

</ig:XamDataChart.Axes>

<ig:XamDataChart.Series>

…

</ig:XamDataChart.Series>

</ig:XamDataChart>

</ig:XamZoombar.HorizontalPreviewContent>

</ig:XamZoombar>

Summary

In this blogpost we integrated a chart with a zoombar to deliver advanced data navigation capabilities to business users. Setting a few properties, we synchronized two charts showing differently scaled and presented dimensions of a time-series, and added a zoombar to allow users to quickly find the relevant data. Now that this functionality is within your reach, reach out to your users and see how they might benefit from such capabilities in the applicaiton you're working on.

If you have any questions or comments, you can reach me at kmatev@infragistics.com