Chart to plot a smooth curve between data points

Hello,

I have a reference to the 1.0.0.1 build of MetroElements. I'd like to display a line graph of tide data in my Winrt app.

On the X-axis would be a representation of time and the Y-axis would have the tide height in meters.

With the last WP7 charting control I used I converted the DateTime values for each Tide Datum to a OADate double. E,g, 41182.0340277778. This allowed me to graph data that would scale from fractions of an hour out to entire years. I was also able to provide user friendly labels via a function that converted the OADate double into a string.

I tried passing the List data to a LineSeries and a SplineAreaSeries. In both cases I've had issues with the curve fitting. There were jagged edges where the tide went from rising to falling or vice versa.

When I used the same data in a Google Spreadsheet I got a much smoother curve.

So I guess I have a few of questions:

1. How and I get smoother curve fitting for the coordinates? Do I need to provide more data points?
2. Is it possible to provide user friendly labels for the data points?
3. Is it possible for the user to interact with the graph. E.g. tap/click on a point to get the data or zoom in/out to examine the data. I don't have an online example of this, but I can provide you a link to my WP7 app that uses it if you would like.

Thanks, Daniel

Hello Daniel

1. From the images, it looks like the data is jumping forward slightly at the turning points, and then going back before continuing. Note that the chart controls do not order the data for you. Make sure the data is provided in order along the X axis. If your data is in order, please send me the data used to create these images if possible so I can reproduce these jagged edges.

2. The chart controls have some built in support for DateTime values. If possible, could you provide .NET DateTime values to the chart rather than converting them? This may be the easier solution. You could either populate the Chart with instances of our DateTimeDouble classes, or use your own model objects. Also, make sure to set the ValueConverter property of the X axis to be an instance of the DateTimeAxisValueConverter. You can format the labels by using the LabelFormat property on the X axis. You can set this using .NET DateTime format strings. For example, in xaml you can set it like this: LabelFormat="{}{0:dd-MMM-yy}". It is possible that the current date time values / conversion you are currently using is causing the jagged edges, so I recommend trying to sort out this item first.

3. The charts have built in zooming/panning support which includes touch support: pinch to zoom, drag finger to pan. To enable zooming, set the ZoomMode of the Chart control to Both. Or you could set it to Horizontal or Vertical if you only want zoom on one axis. The charts also have data point selection features. To enable this, you'd want to set the SymbolStyle property of the SplineAreaSeries etc. The SymbolStyle is used to visualize a symbol at each data point. This gives users an indication that they can be selected. When the user touches/clicks a symbol, the SplineAreaSeries.SelectedDataPoint will be set so you can get the selected data. If you do not want to visualize symbols at each data point, you could have a transparent circle that can not be seen, but will still get the touch/mouse events. Make sure the symbol is large enough for "fat fingers". I would recommend starting off with a colored symbol so you can see what you are doing. If this data point symbol idea is not quite what you need, you can create your own custom logic by listeneing to the Chart.ChartMouse... events. For example, you may want to display data at the closest X value to where the user placed their finger, rather than the user needing to tap a data point.

Let us know if you have further questions.

Jason Fauchelle

Hello Daniel

Thanks for the repro data. I found that the cause of the jagged edges is because just before all the turning points, there is a data point that is further along the X axis. To resolve the jagged edges you'll want to order the data by OADate before passing it to the chart.

Jason Fauchelle

Great, Thank you. Sorry for getting you to debug my data.

Your other suggestions make a lot of sense. I'll try switching from OADate to a DateTime based X-axis and make sure I sort the data before using it.

The ZoomMode and SelectedDataPoint sound like exactly what I'm looking for. Are there any examples of these features I can try? Although now I know where to look it shouldn't be too difficult.

Thanks, Daniel

No worries Daniel

There is no Metro Elements sample just yet. But you can see this blog post for a simple example of providing a symbol style: http://www.mindscapehq.com/blog/index.php/2012/09/25/metro-elements-area-charts-and-custom-styling/

Also if you get stuck, you can download the free trial of WPF Elements which contains an extensive set of Chart samples within the SampleExplorer app. The API is almost the same as Metro Elements: http://www.mindscapehq.com/products/wpfelements

And of course you can ask more questions about how to use any of the features.

Jason Fauchelle

Hi Jason,

I've had a couple of issues using the SymbolStyle and SelectedDataPointChanged event.

I couldn't reuse the PathGeometry from the WPF examples styles to complete the SymbolStyle. I copied the CrossChartSymbolStyle and SymbolStyleBase styles over from the WPF examples (...\Mindscape\WPF Elements\Samples\SampleExplorer\App.xaml) to my WinRT project resources. Within CrossChartSymbolStyle the PathGeometry Figures attribute resulted in the following error:

The TypeConverter for "PathFigureCollection" does not support converting from a string.

I guess this makes sense, due to the differences between WPF and WinRT, but I couldn't find a viable way to define the symbol so that the SelectedDataPointChanged event would fire. I hacked up the SymbolStyleBase Template to just draw an Ellipse. Again, I couldn't define the ControlTemplate.Triggers for IsMouseOver and IsSelected due to the WinRT differences. No luck with the Interaction.Triggers that I would have used in WP7 either.

So while I can get the Ellipses to draw, no matter where I click on the chart I can't get them to trigger the selected event.

Do you have a simplified SymbolStyle I could try for WinRT?

Can I cause a Data Point to be selected from code? I'd like to find a DataPoint based on the DateTime and select it.

A few comments. These may be specific to something I'm doing, but I through they might be helpful.

The default DateTimeAxisValueConverter produced really odd results for me. I replaced it with my own version that removed an offset (Ticks for 1/1/2010) from the DateTime Ticks that were cast to a double.

I put a Foreground TrackingElement on the chart and it seems to work well. Although the WinRT simulator still shows it tracking when using touch input without "tapping". I guess it was never designed for this, but I'm now not sure what it will do on an actual touch device.

Thanks, Daniel

Hello Daniel

WinRT does not have Type Converters which is why you can't use the path geometry approach I used in the WPF Sample Explorer. Fortunately you can still set the Data property of a Path using the geometry mini language. So here is an example of a cross symbol style for WinRT:

  <Style x:Key="CrossSymbolStyle" TargetType="ms:DataPoint">
    <Setter Property="Width" Value="18" />
    <Setter Property="Height" Value="18" />
    <Setter Property="Margin" Value="-8,-8,8,8" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ms:DataPoint">
          <Path Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"
                Data="M 0 2 L 2 0 L 4 2 L 6 0 L 8 2 L 6 4 L 8 6 L 6 8 L 4 6 L 2 8 L 0 6 L 2 4 Z" Stretch="Fill" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

For the visual state, you would normally use the Visual State Manager as WinRT does not have ControlTemplate.Triggers. We haven't finished providing visual states for data points yet though, so I'll let you know when this can be done. Also, the data point selection system is not finished yet. This is because it may have some improvements compared to the WPF version. I'll let you know when this can be used.

The issues with the DateTimeAxisValueConverter are unusual. We will be improving the DateTimeValueConverter by the final version, this may solve the issue.

I assume you go the TrackingElement from the WPF Elements trial. As this is designed for WPF, you'll want to modify it slightly to behave in WinRT - for example, only render the elements if the pointer is pressed. I'll probably include a WinRT version in the WinRT sample.

Thanks for all your feedback.

Jason Fauchelle