Current filter:
                                You should refresh the page.
                                  • I am in the process of trying to convert a web application that uses a Highcharts chart to a WPF application using your chart control.  I have most of it implemented but there is one feature I'm struggling with.

                                    The current chart has a zoom feature where the user can select one of several canned date ranges (1 hour, 1 day, 1 month, 6 months, 1 year, etc).  The chart then updates to show the data for that date range.  I am currently using data filters on my series objects to provide that capability.

                                    In the Highcharts control, there is also a section that shows the overall date range of the data and allows the user to select a date range using a set of slider controls.  (See the attached image.  The section is in the red box.)

                                    I would like to provide that functionality in my WPF app, but am struggling to figure out how to do it.  It seems like the DateTimeChartRangeControlClient might be an option, but I can't figure out how to tie it together with my chart.  Is there some way to provide that feature using your controls?


                                1 Solution

                                Creation Date Importance Sort by

                                Hi Scott,

                                Please refer to the following ticket and download a sample project that illustrates how to integrate RangeControl with ChartControl:

                                How to bind ChartControl to RangeControl.

                                Should you need further clarification, feel free to ask. We will be happy to help you.

                                Show all comments
                                • Scott Damge 11.25.2015

                                  That example either doesn't work or doesn't do what I need it to do.  It is using an obsolete property so that could be part of the problem.  When I change the date range in the range control, I want the upper chart to change to zoom in to show the new range.  That is not happening in the sample project.

                                • Alex (DevExpress Support) 11.26.2015

                                  Hi Scott,

                                  Attached is a sample project upgraded to the latest version of DevExpress components (v15.1). Let me know how it works for you.

                                • Scott Damge 11.30.2015

                                  It's still not doing what I want it to do.  See the attachment for a comparison between the app I'm trying to convert and the sample DevExpress app.

                                • Alex (DevExpress Support) 12.01.2015

                                  Hi Scott,

                                  It appears that you are using the Zoom and Scroll bar instead of modifying the selected range (see a similar issue described in the The ChartControl linked to RangeControl is not updated in certain situations ticket). I have created a screencast to illustrate how the Range Client and ChartControl range integration works: sample screencast. As an alternative solution, remove the RangeControl from your application and enable the built-in Zooming and Scrolling feature for ChartControl. This should make it possible to zoom and scroll the chart diagram area without a separate RangeControl.

                                • Scott Damge 12.01.2015

                                  The built-in zooming and scrolling could work for me.  However, my app has a series of buttons that allow the user to quickly set a range i.e. 1 hour, 1 day, 1 month, 1 year, etc.  When they click one of those buttons, I need to zoom/scroll the chart to that specific range.  How can I do that in an MVVM fashion?  I have RangeStart and RangeEnd date properties in my view model.  Can I bind some properties of the chart to those values to automatically adjust the zoom/scroll values?

                                • Alex (DevExpress Support) 12.02.2015

                                  Hi Scott,

                                  It is possible to use the Binding expression to initialize the VisualRange property value in the XAML markup. Please refer to the sample code snippet:

                                  <dxc:ChartControl Name="chartControl1" BoundDataChanged="chartControl1_BoundDataChanged">             <dxc:ChartControl.Diagram>                 <dxc:XYDiagram2D                     Name="diagram"                     EnableAxisXNavigation="True"                     EnableAxisYNavigation="True"                     Zoom="diagram_Zoom">                     <dxc:XYDiagram2D.AxisX>                         <dxc:AxisX2D>                             <dxc:AxisX2D.WholeRange>                                 <dxc:Range AutoSideMargins="False"/>                             </dxc:AxisX2D.WholeRange>                             <dxc:AxisX2D.VisualRange>                                 <dxc:Range Name="visualRange" MinValue="{Binding ZoomMin}" MaxValue="{Binding ZoomMax}"/>                             </dxc:AxisX2D.VisualRange>                         </dxc:AxisX2D>                     </dxc:XYDiagram2D.AxisX> .. public partial class MainWindow : Window     {         public double ZoomMin { get; set; }         public double ZoomMax { get; set; }         public MainWindow()         {             InitializeComponent();             this.DataContext = this;         } .. //TODO: adjust  ZoomMin, ZoomMax values at runtime


                                • Scott Damge 12.02.2015

                                  We're getting closer but still not quite there.  I created a sample that illustrates what I'm trying to accomplish.  I am binding the visual range of the X axis to date properties as you've suggested.  As you will see, when the app initializes, the zoom range is set to the bound values.  If you click on the bar items to change the range, the zoom updates accordingly.  That is exactly what I want to happen.
                                  However, as soon as you manually adjust the zoom slider, then clicking the buttons no longer has any effect.  The properties that the visual range is bound to are getting updated but the UI is not changing to reflect the updated values.  Why is that?  Any time a button is clicked and the zoom values are updated, I want the chart to zoom to reflect those values.
                                  Also, I'm curious why the X-axis scale values are disappearing when I click the All button initially.  Am I missing a property setting somewhere?  All of the other canned ranges are fine.

                                • Alex (DevExpress Support) 12.03.2015


                                  To process your recent post more efficiently, I created a separate ticket on your behalf: T319971: Using binding expressions to initialize the visual range and modifying the zoom level manually. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.