Slow render on spline area graph with 365 data points

I have a spline area graph which is trying to plot 365 data points (that one dp for each day of year). Its very slow to render. Is there any way to speed it up? even by just telling it to skip every nth data point?

NB: I have a feeling that the chart rendered OK speed-wise when I didn't have the ValueConverter hooked up. I need to remove that and re-check.

                     <my:Chart Name="DailyUsage" Title="Daily Usage" ZoomMode="None" Height="450">
                        <my:SplineAreaSeries ItemsSource="{Binding UsageData}" XBinding="{Binding UsageDate}" YBinding="{Binding UsageValue}" SeriesBrush="{StaticResource PhoneAccentBrush}" SelectionMode="None"/>
                        <my:Chart.XAxis>
                            <my:ChartAxis Title="Date" TitleVisibility="Collapsed"  LabelFormat="{}{0:d MMM}" ValueConverter="{StaticResource DateTimeConverter}" LabelLayout="Normal" />
                        </my:Chart.XAxis>
                        <my:Chart.YAxis>
                            <my:ChartAxis TitleVisibility="Collapsed"  Title="Units" LabelFormat="{}{0:#}" />
                        </my:Chart.YAxis>
                    </my:Chart> 

Hello

The chart automatically skips every nth data point. In your case, it is probably skipping every 2nd point.

There were 2 causes of the performance problem. 1. The bindings are slow, and 2. our spline rendering algorithm was not well tuned for the phone device. I have improved these items for our Windows Phone library. These improvements will be available in the next nightly build. The next nightly build will be available at around 1200 GMT. You can download nightly builds from your account page: http://www.mindscapehq.com/store/myaccount

The spline chart rendering improvement will give you at least a 4 times performance improvement.

To avoid the bindings from slowing down the rendering, I highly recommend that you use the DateTimeDouble class as the data points you add to the chart (available in the next nightly build). This is a prebuilt data point implementation that has a DateTime part and a double part. The chart will recognize this data type and automatically know how to extract the data. This is much faster than .NET binding. Note: don't forget to remove the XBinding and YBinding setters from the SplineAreaSeries in your xaml code.

Let me know if you have any questions about this.

Jason Fauchelle

awesome, i'll grab the next couple of builds and test it out. thanks for the response and the effort!

so i downloaded a nightly build, installed it (didnt uninstall other first), started up VS Express 2010 for Windows Phone, opened my project and get a message:

"This assembly is protected by an unregistered version of Ezriz's ".NET Reactor"!

I get the same message on the phone when navigating to the page with the graph.

Is there something wrong with the build?

Thanks for pointing this out and apologies for this inconvenience. This will be resolved in the next nightly build.

Jason Fauchelle

Hello

Here is an example of how to use the new DateTimeDouble class. In code, fill a collection with instances of DateTimeDouble. The constructor will take the DateTime and numeric values. In the code below, Data is a property on the data context.

IList points = new List<object>();
Random r = new Random();
DateTime date = DateTime.Now;
for (int i = 0; i < 365; i++)
{
    double y = r.NextDouble() * 10;
    points.Add(new Mindscape.PhoneElements.Charting.DateTimeDouble(date, y));
    date = date.AddDays(1);
}
Data = points;

Then the xaml could look like this. Notice you don't need to set the XBinding or YBinding properties because the chart knows how to interpret DateTimeDouble objects.

<ch:DateTimeAxisValueConverter x:Key="TimeScale" />

<ch:Chart Title="Spline Series">
  <ch:SplineSeries ItemsSource="{Binding Data}" />
  <ch:Chart.XAxis>
    <ch:ChartAxis LabelFormat="{}{0:d MMM}" ValueConverter="{StaticResource TimeScale}" />
  </ch:Chart.XAxis>
</ch:Chart>

Let me know if you have any questions about this.

Jason Fauchelle

dumb question time....

my existing chart is pointing to an ObservableCollection ItemsSource="{Binding UsageData}" for its binding data.

I currently point the X axis to a datetime property inside UsageData: XBinding="{Binding UsageDate}" I currently point the Y axis to a double property inside UsageData: YBinding="{Binding UsageValue}"

when the underlying data updates, the graph redraws.

how would I achieve the same thing using an IList of DateTimeDouble? Do I create a new ObservableCollection instead and use that as the ItemsSource?

thanks, Regan

Hello Regan

This would depend on what updates are being made. If your updates include adding, removing, replacing or moving items in the collection, then yes you can simply use an ObservableCollection of DateTimeDouble instead of List.

If you are changing the property values of the data points (date or value), then you'd have no choice but to use XBinding and YBinding. In this case, I'd recommend that you use the ObservableCollection approach, and if you need to change the property value of a data point, replace the DateTimeDouble with a new instance that has the updated values. This will have better performance overall.

Jason Fauchelle

i'm typically clearing out all the data points and re-populating.

Hello Regan

In this case, an ObservableCollection would suit your needs. But to get the absolute best performance, you may want to re-set the ItemsSource property rather than clearing the collection and re-filling it. i.e. create a new instance of a collection, fill it with the new data, then set the ItemsSource property again (raise property change notifications on the property that provides your items source).

Jason Fauchelle