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:
- Move the previously plotted data points to the left on one unit interval on X axis,
- Plot the new data point on the right age of X axis in accordance with its Y axis coordinate value,
- 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.13 Answers, 1 is accepted
Rank 1
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
Rank 1
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.
Rank 1
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
Rank 1
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
Rank 1
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
Rank 1
Rank 1
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
Rank 1