Home / Community & Support / Developer Productivity Tools Forums / WPF > Chart > Displaying 2048 new ints every 27ms

• Ben

  Posted on Feb 8, 2012 (permalink)

  I'm evaluating if your WPF component suite is capable of meeting our needs, and it's beginning to look like a no for the simple reason that I can't even get the tool to display my data. I have the following target:
  
  Get a chart to display 2048 brand new values every 27 ms.
  
  I have attempted this in two different ways, using a RadChart, and using a ChartArea 
  .
  1) RadChart
  This was the first chart that I found that I was able simply declare/assign data to.
  
  e.g. 
  

  var temp = new RadChart();

  temp.ItemsSource = Data;

  
  
   Data is an ObservableCollection<float> which, on a timer ticks every 27 ms, completely changes the data to new random numbers.
  
  The RadChart performed marvelously, except for 1 flaw, it wanted to be fancy, erasing the whole chart and redrawing from left to right the new data. This is not acceptable, as new data arrives so quickly that not 1 data point is plotted before it's wiped again. After scouring these forums for ways to disable this functionality, and only getting "Just set the EnableAnimations to false in the ChartArea" with absolutely no idea how/where this ChartArea is in my RadChart, I opted to making a ChartArea instead.
  
  2) ChartArea
  So wanting to disable the animations of the chart, I immediately discovered this functionality:
  
  e.g.
  

  var temp = new ChartArea();

  temp.ItemsSource = Data;

  temp.EnableAnimations = false;

  ;
  
  Alas, "No Data Series." ... What? I clearly set it in the exact same way as the RadChart. No combination of DataContext/ItemsSource assigning has resulted in any data points being presented. I'm clearly doing this incorrectly, but am unable after hours of searching these forums to locate such a simple setup as I have defined above. 
  
  
  Any assistance with this would be greatly appreciated, as I cannot actually test the capabilities of this suite otherwise.
  (for clarification, I have tried this via xaml as well, and have had identical results. My code is also being implemented in c# 2010, .net 4.0)

  Reply

• Ben

  Posted on Feb 8, 2012 (permalink)

  Ok so I've managed to find the ChartArea of the RadChart (radChartObj.DefaultView.ChartArea.ItemsSource = Data) and am now getting data to display dynamically, yay! I still can't figure out how to get it to stop redrawing the entire canvas, and to stop drawing labels all together. Because of these two factors, I still cannot test the performance of the chart at 2048 new values every 27ms.
  
  

  myRadChart.DefaultSeriesDefinition.LegendDisplayMode = LegendDisplayMode.None;

  myRadChart.DefaultSeriesDefinition.AnimationSettings = null;

  myRadChart.DefaultView.ChartArea.AnimationSettings = null;

  myRadChart.DefaultView.ChartArea.LabelFormatBehavior = LabelFormatBehavior.None;

  myRadChart.DefaultView.ChartArea.SmartLabelsEnabled = false;

  myRadChart.DefaultView.ChartArea.Annotations = null;

  myRadChart.AnimationSettings = null;

  
  These are my settings so far, which result in the line immediately drawing, and then 1/4 second later, the labels appearing. (when tested at 1 second intervals) However the line still disappears when new data is added.

  Reply

• Giuseppe Giuseppe

  Posted on Feb 13, 2012 (permalink)

  Hello Ben,
  
  Based on your performance requirements we would suggest you to consider using our new charting offering RadChartView instead as it is better fitted for this purpose (RadChartView is currently in BETA but becomes official with Q1 2012 release later this week).
  
  We have attached two sample applications that demonstrate live data update with RadChartView -- one of them is WPF application, and the other is Silverlight Out-of-browser application (the out-of-browser app is faster).
  
  Here are some of the most important highlights of the new ChartView control:
  

  • Performance: exceptional performance, intuitive and easy-to-use model and pixel-perfectness were some of the major tasks we have set for this new control.
    • We have separated the chart into several layers, where the core one is totally platform agnostic and is built on top of our custom logical tree. We call this layer the “View Model” of the chart.
    • We have a custom property store used within the charting logical tree. It is about 5 times faster than DependencyObject in look-up time and consumes about 3 times less memory.
    • We have an entirely custom layout and do not rely on the SL layout system to arrange our charting view models.
    • We have a stand-alone visualization layer that presents the chart view model. Every view model is presented by the simplest possible SL visual – e.g. Rectangle, Line, Polyline, etc. Still, every single aspect is fully customizable by specifying Data Templates or Styles.
    • We use Canvas – the only SL panel that does not invalidate measure automatically. When a redraw of some charting part is required, we simply update the Width, Height and Canvas.Left, Canvas.Top properties of the corresponding visual. A simple test proved that calling InvalidateMeasure of the canvas upon a change the in view model degrades performance about 10 times.

  • Architecture: a number of chart controls built for a specific purpose vs one monolith control (provides cleaner, simpler, and relevant API)

  • RadCartesianChart -- hosts Bar, Area, Line, Spline, SplineArea, ScatterPoint, Candlestick, and OHLC series types (and their horizontal & stacked / stacked100 equivalents where applicable).
  • RadPieChart -- hosts Pie series type.
  • RadPolarChart -- hosts PolarLine, PolarArea, PolarPoint, RadarLine, RadarArea, RadarPoint series types.
  • Notable features
    • Financial indicators -- support for about 20 most common financial indicators to complement the data visualization for all cartesian series types.
    • Extended DateTime support built-in in the axes' logic
      • DateTimeCategoricalAxis -- Specialized categorical axis that expects each data point to provide a System.DateTime structure as its value for this axis. The points are grouped by a user-defined date-time component (Year, Month, Day, etc.) and then the groups are sorted chronologically.
      • DateTimeContinuousAxis -- Specialized axis that expects each data point to provide a System.DateTime structure as its value for this axis. May be thought of as a timeline where the coordinate of each data point is calculated depending on the position of its associated DateTime on the timeline. The base unit (or the timeline step) of the axis is calculated depending on the smallest difference between any two dates.
    • Support for linear and logarithmic axes.
    • Built-in data sampling (with extended DateTime awareness)
    • Behaviors:
      • PanAndZoom Behavior -- with smooth scrolling support.
      • TrackBall Behavior (also known as current value indicator)
      • ToolTip Behavior
      • Selection Behavior

  
  Hope this helps.
  
  
  All the best,
  Giuseppe
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Attached files

  • SLOutOfBrowserLiveData.zip
  • WpfLiveData.zip

  Reply

• Ben

  Posted on Feb 13, 2012 (permalink)

  I'd have to say I'm very impressed by this charts performance, I rewrote it to utilize 4096 new data points instead of the 2048, and grow from previous data with no noticeable performance hits as well. Thank you very much for your response, I'm planning on forwarding this to my supervisors for their consideration.

  Reply

• Ben

  Posted on Feb 15, 2012 (permalink)

  I am being pressured to choose a viable charting suite today, and have a few final questions that must be addressed if we are to consider this as the solution we will pursue:
  
  Is it possible to overlay items on top of the chart, for things like labeling x values?
  
  e.g. I have 4096 x values, and when I click on the chart, a vertical Line is displayed in the x value that I clicked on, or when I say I'd like bin xDataPoint 20 to have a vertical line.
  
  Also, is this chart capable of adding textual labels to certain XDataPoint Values?
  (Attached is an example image of what I'm talking about)
  
  In using the samples you provided, I was unable to access intellisence for any of your control libraries in xaml, and was having difficulty finding all the types of charts we would be able to use. 
  
  Specifically, we're looking for the chart to be capable of the following:
  

  • 4096 rapidly acquired values
  • Zoom/Panable
  • Histogram style (filled) (i.e. a bar chart with no space between values)
  • Able to overlay Lines and labels in specific columns in a fairly simple manner (doesn't need to be directly built in, but we need the ability to add them in some way, which will accurately depict the column defined, and will maintain quality when zoomed)
  • And add multiple series of data, not necessarily live, but it is possible

  
  I tried manually adding the lines to the chart, but was unable to get a second series to display; I extended the ViewModel to include a second List<ChartData> collection, and bound to it separately, but simply adding a second <telerik:ScatterAreaSeries> within the <telerik:RadCartesianChart> didn't display the data. I also couldn't discern how to change the color of the individual series either, though that could simply be due to the lack of intellisence.
  
  I have also been asked to ascertain if you are on schedule for release this week, as we have an extremely limited time to decide if this suite is the right one for our needs (less than two weeks).

  Attached files

  • ChartWithLabelLines.png

  Reply

• Giuseppe Giuseppe

  Posted on Feb 16, 2012 (permalink)

  Hello Ben,
  
  Onto your questions about the chart capabilities:
  

  • 4096 entries can be visualized properly (see attached sample with two series x 2048 items).
  • Panning and zooming is supported through the ChartPanAndZoomBehavior (add the behavior to the RadCartesianChart.Behaviors collection).
  • Histogram-style bars are supported but note that BarSeries should be associated with CategoricalAxis and then you should set the CategoricalAxis.GapLength property to 0 (it seems currently there is an open issue with this specific setting that our developers will address shortly and you need to set GapLength to really small value like 0.0000001 instead of 0 to achieve the desired effect).
  • Currently RadChartView does not expose public API that would allow you to overlay custom FrameworkElements at specific positions onto the chart surface (you can of course overlay elements manually within a canvas container that is placed on top of the chart, but there is no built-in mechanism that would convert back and forward physical-to-data units i.e. you cannot instruct the control to place your visual at data coordinates [200,300] and automatically get the proper pixel equivalent [1000,311]). We will forward your request to our devteam and we will make sure it is considered for the Q2 2012 product backlog.
  • Multiple series visualization is supported -- see attached sample application.
  • As for the intellisense -- we are unsure what might be the problem here as locally both sample applications that we sent behave as expected and display Intellisense entries.
  • About series colorization -- the easiest way is to use the built-in palette mechanism -- you can either use one of the predefine palettes, or you can create custom ChartPalette on your own. Alternatively you can customize the appearance of individual LineSeries through the LineSeries.Stroke property, for AreaSeries - through the AreaSeries.Fill property, and for BarSeries you need to define custom BarSeries.DefaultVisualStyle with TargetType="Border" and add style setter for the Border.Background property.
  • Q1 2012 become live yesterday and can be downloaded from your client account.

  
  Hope this helps.
  
  
  Greetings,
  Giuseppe
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Attached files

  • WpfApplication15.zip

  Reply

• Ben

  Posted on Feb 16, 2012 (permalink)

  Giuseppe,
  
  I may be able to emulate the overlay functionality; in experimenting with some of the behaviors I noticed that the TrackBall behavior displays which line your mouse is currently hovering over. Is there a way for me to use the on click event of the chart to find the value displayed in the TrackBall behavior to draw something on a separate Canvas overlayed on top of the chart?
  
  Also, I discovered if one tries to zoom in "too far" the chart crashes with the following error:
  
  Width and Height must be non-negative. (The InnerException is null)
  
  Too far being < 20 values out of 4096 displayed
  
  I believe it has to do with the size of the slider at the bottom of the chart, it seems to have a min width which my proposed zoom section would violate. (I think a simple try-catch around the zooming would fix this)

  Reply

• Ben

  Posted on Feb 20, 2012 (permalink)

  Also, I've discovered that the reason I did not have intellisence was that the .dll's accompanying the .sln project were being blocked by Windows because they'd come from a web source, and I had to go to the properties of each one and unblock them.

  Reply

• Giuseppe Giuseppe

  Posted on Feb 21, 2012 (permalink)

  Hello Ben,
  
  We have attached a modified version of the sample application that demonstrates the following:
  

  • How to implement external trackball info display.
  • How to cache the TrackBallInfo context on ChartTrackBallBehavior.TrackInfoUpdated event and use it on RadChart.MouseLeftButtonDown event.

  As for the exception -- generally the slider (PanZoomBar control) does have minimum width set via PanZoomBar.MinimumRangeSpan property but we were unable to reproduce the problematic behavior in our local tests. Could you confirm whether the attached sample application exhibits the problem on your end? Note that you can customize the MinimumRangeSpan value on your own (set it to a larger value) with implicit style for PanZoomBar as well.
  
  Hope this helps.

  
  Greetings,
  Giuseppe
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Attached files

  • WpfApplication15-mod.zip

  Reply

• Ben

  Posted on Feb 21, 2012 (permalink)

  Giuseppe,
  
  Thanks for your response, I'm currently looking to see if I can use this functionality in reverse to draw a line on top of the chart on an overlayed canvas.
  
  As far as the bug, yes, It is still present here.
  
  Steps to reproduce:
  
  1) Take the slider and scale it as small as you are able
  2) Click and drag on the chart itself to select a region to zoom into
  3) Immediately crashes with the error: "ArgumentException was unhandled: Width and Height must be non-negative"

  Reply

• Giuseppe Giuseppe

  Posted on Feb 24, 2012 (permalink)

  Hello Ben,
  
  Sorry about that -- I was trying to reproduce the issue with the slider control but it is indeed easily observable with click and drag onto the plot area.
  
  We have logged the problem in our public issue tracking system here and we will forward it to our developers for further review.
  
  
  Regards,
  Giuseppe
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > Chart > Displaying 2048 new ints every 27ms