This is a migrated thread and some comments may be shown as answers.

Refreshing a few sparklines at once

5 Answers 118 Views
Sparkline
This is a migrated thread and some comments may be shown as answers.
Tamir
Top achievements
Rank 1
Tamir asked on 19 May 2012, 05:24 AM

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

5 Answers, 1 is accepted

Sort by
0
Yavor
Telerik team
answered on 23 May 2012, 01:16 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Tamir
Top achievements
Rank 1
answered on 25 May 2012, 10:58 AM

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.

0
Yavor
Telerik team
answered on 30 May 2012, 01:21 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Tamir
Top achievements
Rank 1
answered on 02 Jun 2012, 08:26 PM
Thank you for the answer!
How do I bind a list of points through the xaml to the RadChartView?
0
Petar Kirov
Telerik team
answered on 06 Jun 2012, 02:59 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
Sparkline
Asked by
Tamir
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Tamir
Top achievements
Rank 1
Petar Kirov
Telerik team
Share this question
or