Refreshing a few sparklines at once

[Tamir]

Hello,

I am using 4-8 sparklines in one window. 
Each getting new points (new ItemSource) twice/three times a second (using DataBinding). 
The problem is that when I am trying to do other things in my window (for example opening a menu), the app takes time to respond.
I believe that the reason for that is the amount of refreshes a second.
I have three questions regarding that problem:
1. Is sparkline the right control for my needs? Is there another one you would recommend?
2. Is there any way to wait until I have the new points for all of my sparklines and only than refresh them all at once instead of each at a different time?
3. What is the cause for this problem? is it the GPU/CPU/Memory? (I believe that it has nothing to do with the other parts of my app because only when I added the sparklines this problem appeared)

Thank you in advance

[Yavor]

Hello Tamir,

Generally Sparklines are used to quickly visualize a set of data. In your scenario I believe that a charting control will be more suitable. We have developed a new charting solution with performance and memory in mind - the RadChartView. Take a look at our online demos here. I am sure you will be pleased with the performance improvement!

Kind regards,
Yavor
the Telerik team

[Tamir]

Well, 
thank you for your help.
I have tried to work with RadCartesianChart with a simple program:

    public partial class MainWindow : Window
    {
        private int m_dTimeBetweenChanges;

        private ObservableCollection<double> m_obcTracePoints;
        private Thread m_thrdPointsThread;

        public MainWindow()
        {
            InitializeComponent();
            m_obcTracePoints = new ObservableCollection<double>();


            Random rnd = new Random();
            for (int i = 0; i < 401; i++)
            {
                m_obcTracePoints.Add(rnd.Next(0, 100));
            }

            m_dTimeBetweenChanges = 1000;

            this.chart1.Series[0].ItemsSource = new ObservableCollection<double>(m_obcTracePoints);

            this.m_thrdPointsThread = new Thread(new ThreadStart(ChangePointsThreadMethod));

            this.m_thrdPointsThread.Start();
        }


        private void ChangePointsThreadMethod()
        {
            int i = 0;
            Random rnd = new Random();
            while (true)
            {
                    for (i = 0; i < 401; i++)
                    {
                        this.m_obcTracePoints.Insert(i, (rnd.Next(0, 100)));
                    }
                Thread.Sleep(this.m_dTimeBetweenChanges);
                Dispatcher.Invoke(DispatcherPriority.Normal,
(Action)delegate() { this.spark1.Series[0].ItemsSource = new ObservableCollection<double>(m_obcTracePoints); });
            }
        }
    }

If I run it, it works extremely slowly. And that is with only one RadCartesianChart. 
Am I doing something wrong?
My RadCartesianChart is chart1. I am using random to create the points and then changing the ItemSource of the first Series. I tried to change the values of the ObservableCollection instead of creating a new one each time but then the chart throws an exception, System.InvalidOperationException.

[Yavor]

Hello Tamir,

The reason why the chart throws an exception is because you are modifying the observable collection from another thread. You can try using a dispatcher timer instead, as it always ticks on the UI thread and no marshaling is required. Here is some code:

public MainWindow()
{
    InitializeComponent();
    m_obcTracePoints = new ObservableCollection<double>();


    Random rnd = new Random();
    for (int i = 0; i < 401; i++)
    {
        m_obcTracePoints.Add(rnd.Next(0, 100));
    }

    timer = new DispatcherTimer();
    timer.Interval = TimeSpan.FromMilliseconds(1000);
    timer.Tick += new EventHandler(timer_Tick);
    timer.Start();

    //m_dTimeBetweenChanges = 1000;

    this.chart1.Series[0].ItemsSource = m_obcTracePoints;

    //this.m_thrdPointsThread = new Thread(new ThreadStart(ChangePointsThreadMethod));

    //this.m_thrdPointsThread.Start();
}

DispatcherTimer timer;
int i = 0;
Random rnd = new Random();

void timer_Tick(object sender, EventArgs e)
{
    //for (i = 0; i < 401; i++)
    //{
        this.m_obcTracePoints.Insert(i, (rnd.Next(0, 100)));
    //}
}

If you have too many data points in the series you can use the sampling functionality of RadChartView which will reduce the number of points rendered while keeping the level of detail. Here you can find more information on this matter. Greetings,
Yavor
the Telerik team

[Tamir]

Thank you for the answer!
How do I bind a list of points through the xaml to the RadChartView?

[Petar Kirov]

Hello Tamir,

You can find information on how to data bind your ChartView in XAML in our documentation, and if you want to see MVVM in action check our demo here.

Kind regards,

Petar Kirov
the Telerik team