Can I build dynamically-changing RadCartesianChart with line series using RadChartView ?

14 posts, 1 answers
  1. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016

    Posted 26 Jul Link to this post

    Hi! I'going to use RadChartView for displaying of dynamically-built RadCartesianChart with line series. I have a timer in my application. With each timer's tick I read the new value of register 'A' from outer device via serial port. After I obtain this new value I must:

    1. Move the previously plotted data points to the left on one unit interval on X axis,
    2. Plot the new data point  on the right age of X axis in accordance with its Y axis coordinate value,
    3. Connect the new point with the previouse last point with the segment of a straight line.

    Thus the chart dynamically builds and moves from left to right. Please see 'SignalChart.PNG' file attached.

    Since this morning (no is 5:02 PM), I climbed on a forum dedicated to RadChartView but did not find anything significant about my question. So I decided to write this my post. Is it possible to build such a dynamically-changing chart in RadChartView? I would be very grateful if you give me an example of plotting of such dynamic chart.
  2. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016

    Posted 26 Jul in reply to Yaroslav Link to this post

    I want to explain a bit here about "2. Plot the new data point  on the right age of X axis in accordance with its Y axis coordinate value,". Here "its Y axis coordinate value" phrase is meant the every next value read from the register "A".
  3. UI for WPF is Visual Studio 2017 Ready
  4. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    138 posts

    Posted 26 Jul Link to this post

    Hi Yaroslav,

    You can indeed make a LineSeries data dynamic. This is accomplished by working with a bound ObservableCollection<T> and adding items dynamically. Whatever changes you make to that collection will be shown in the series.

    To explain better, I have built you a small demo (attached) that adds a new data point to the LineSeries every half second using a timer.

    Run the attached app and click the "Start" button, you'll see the data points get plotted on a DateTimeContinuousAxis. As new data points get added they're plotted to the right of the previous one because I use DateTime.Now, the axis will render it to the right of the previous point.

    After you're run the app, go to MainViewModel.cs and examine the AddDataPoint() method.

    /// <summary>
     /// this method gets run every 500 milliseconds and increases or decreases the line
    /// </summary>
    private void AddDataPoint()
    {
                var valueToUse = incrementingInt % 2 == 0 ? incrementingInt++ : -incrementingInt++;
     
                var nextDataPoint = new ChartDataPoint
                {
                    DataTimestamp = DateTime.Now,
                    DataValue = valueToUse
                };
     
                ChartData.Add(nextDataPoint);
     
                //To keep the demo from getting too large, I keep the datapoints to within 30
                //this keep the the Chart scrolling along
                if(ChartData.Count>30)
                    ChartData.RemoveAt(0);
     }


    As you can see, I do not interact with the ChartView or the Series directly, instead the changes are made to the bound collection.

    Additionally, you can configure the DateTimeContinuousAxis to display the values to your needs, see here for more information.

    If you have any further questions, please let us know.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  5. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016

    Posted 27 Jul in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Hello, Lance. First - thank you very much for your help and support. I've just launched your application and now I have the note:

    From the very begining, the chart itself takes up (occupies) the entire length of the time (horizontal) axis. That is, at the start of plotting, the first unit interval on the time axis occupies the entire length of the time-axis. By adding of the subsequent unit intervals, their length decreases. Therefore changing the scale on the time-axis has place. But I need a PERMANENT SCALE on the time axis.

    Therefore, with your permission, I ask the folowing question: Is it possible to set a permanent scale on the time-axis and to define a fixed length of a single unit interval. For example, set the unit interval length as 1/75 of the length of of time-axis. Then (on timer tik), add the first point, to draw it on the Y-axis (where the Y-value will correspond to the point value read from device register) and add a time-mark to the beginning of the time-axis (DateTimeContinuousAxis). When the next point will be obtained then move the first point from Y-axis (in our case to the right) on the determined length of time-axis unit interval (and also move the time-mark of the first point), plot the new point on Y-axis and connect these two points with the segment of a straight line. And do  this way, adding each new point. So, our chart will be moved (in our case) from left to right. I think it will be possible to use WPF ScrollViewer control to scroll to view of the chart as it will go beyond the length of the visible part of the time-axis. So, is it possible to build such changing and moving in real-time chart with using of RadChartView control ?

    As an example, I give the picture of the fluid flow chart in 'FluidFlowChart.PNG' file attached. Although the diagram there moves from right to left, but in our case it does not matter.

    Once again, thank you very much, Lance, for your support. Your help for me means a lot. I'm waiting for your reply. Thanks in advance.
  6. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016

    Posted 28 Jul in reply to Yaroslav Link to this post

    Please help. I'm in need of you help and support very.
  7. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    138 posts

    Posted 29 Jul Link to this post

    Hi Yaroslav,

    You can configure the Axes's properties to your needs, using MajorStepUnit, LabelInterval, TickOrigin and PlotMode (please go here to see the most common properties and configuration options for axes). 

    Notice the "Dynamic Labels Position" checkbox, it sets the AlignmentDate binding (TickOrigin="{Binding AlignmentDate}") and is responsible for making the axis labels move with the data points.

    Additionally, remember that the bound collection is what determines the points to plot on the chart. If you need empty space on either side of the data, you may need to add datapoints that do not have any value ahead of/behind the line you want plotted.

    To explain this better. please go to this online Silverlight demo (open this in Internet Explorer as it requires Silverlight, also the code is identical for WPF). The demo is similar to what you want to achieve and a good starting point for you (to see the code for the demo, look at my attached screenshot).

    If you're still having trouble after reviewing the demo and applying the configuration, please put together a small sample project using your model and load sample data into the chart like I have done in my original demo. With that sample app, we can investigate further.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016

    Posted 02 Aug in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Hello, Lance. I've added in my application (in its appropriate Prism module) a View and a View Model as in Silverlight demo which you gave me in your last post. Now my application (and correspondingly the new added part) is compiled and run good (timer ticks, e.t.c) but one trouble has place: When I write XAML for 'telerik:RadCartesianChart' the following design-time error occurs: "Unable to find a resource themes / genericwindows8touch.xaml". And such a thing happens not for the first time with some of your controls. Due to this design-time error, the telerik:RadCartesianChart itself is not visible in the View in run-time. My telerik' binaries are updated now to 2016.2.613.45 version and my application itself was succesfuly upgraded via Telerik UpgradeWizard. But the abovementioned error has place. What can I do? How to eliminate this error? Please help.
  9. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    138 posts

    Posted 02 Aug Link to this post

    Hello Yaroslav,

    That error can occur when the Theme resources are missing, but I can't tell you exactly what is wrong without seeing your project.

    Since it's asking for a specific version, "Windows8Touch", you can run the Configure Project Wizard to repair it. Notice the 2nd step of the wizard is to select a Theme. It will add the DLL for that theme to your project's references and configure your app's MergedDictionaries to load the appropriate theme files.

    For more information on how ImplicitStyling works and to make sure your project is using the correct items in your MergedDictionaries, see this documentation topic.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  10. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016

    Posted 03 Aug in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Configure Project Wizard didn't help unfortunately. The error persists.
  11. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    138 posts

    Posted 03 Aug Link to this post

    Hello Yaroslav,

    At this point, we need to investigate your issue directly as the information you've provided is not sufficient to determine the problem. Additionally, we've resolved what you initially started this thread for, so a new thread is needed to continue.

    Please do the following to get the fastest support for this matter:

    1- Open a WPF ChartView support ticket here
    2- Zip up your project and attach it to the ticket - Note: if your project has external dependencies and the app is not runnable, we'll need a small sample project that reproduces the issue.
    3- Include steps-to-reproduce (i.e. how to get to the chart and throw the error) and provide relevant screenshots.

    By opening a support ticket, you'll get 24 hour turnaround time instead of 72 hour turnaround time of a forum thread and I'll be able to escalate this matter directly to the developers of the RadChartView for further investigation.

    Thank you for your understanding.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  12. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016

    Posted 04 Aug in reply to Lance | Tech Support Engineer, Sr. Link to this post

    Hello, Lance. Thank you very much for your help and support. As you advice, I prepair the project and open ticket but tomorrow. I'll do it tomorrow because now I'm up to my ears in work in my job. Thank you again.
  13. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016

    Posted 07 Aug Link to this post

    Hello, Lance. I'm very busy on my job now and have no free time. But I try open support ticket diring this week.
  14. Answer
    Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    138 posts

    Posted 08 Aug Link to this post

    Hi Yarloslav,

    I just wanted to update you to let you know that since we're going to continue this conversation in a Support Ticket, I'm closing this thread.

    Note that, if necessary, you can reopen this thread in the future by responding again.

    Regards,
    Lance | Tech Support Engineer, Sr.
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  15. Yaroslav
    Yaroslav avatar
    123 posts
    Member since:
    Jan 2016
Back to Top
UI for WPF is Visual Studio 2017 Ready