1. Home
  2. Forum
  3. Flutter
  4. [ SfChart ] Big Data sample

[ SfChart ] Big Data sample

Hi,

I've seen on your blog a post about your Xamarin.Forms's chart. 

I've read that your charts handles up to 500K points and allows easy manipulation for the user.
I was thrilled to see that news and I think I can really use that technology moving forward but unfortunately, I've been unable to reproduce such perfomances using your charts. When using the chart with such a big amount of data, the zoom is kind of choppy and scrolling is pretty unprecise.

I would like to show your chart to my investors so that we can include that technology into our project but I need to have a smooth and working example.

Could you provide such example ?

I look forward to hear back from you.

Roger Delacastagne

7 Replies
MK Muneesh Kumar G Syncfusion Team April 20, 2018 01:22 PM UTC

Hi Roger, 
 
Thanks for using Syncfusion products.  
 
The performance of zooming and scrolling is highly depending on the device configuration. In addition to that, we can make some tweaks in chart to get the smooth zooming and scrolling experience. 
  1. Use FastLineSeries instead of LineSeries.
  2. Default stroke width of FastLineSeries is two, reduce this to one.
  3. Disable the antialiasing of line.
  4. We have used to the radial distance algorithm in chart to reduce the data points whenever there are collision between two points, the radial distance is one by default, and increasing the distance will ignore the points to be plotted without affecting the output when have large amount of data. We have done this using custom renderer in below attached sample.
  5. Suspend the update of chart using SuspendSeriesNotification method when adding bulk data points and refresh the chart with newly added data points using ResumeSeriesNotification method.
 
We have prepared a simple sample to demonstrate this, please find the sample from the following location.  
 
 
We have prepared a demo video for smooth zooming and panning with trackball. Please refer the video from the following location.  
 
[Recorded from Moto  G 5th gen device] 
 
Please refer below user documentation for more details about SfChart performance.  
 
 
 
Please let us know if you have any queries. 
 
Thanks, 
Muneesh Kumar G 


RD Roger Delacastagne April 23, 2018 06:45 AM UTC

Hi,

Your solution work like a charm. I modified it to add multiple series with less points, but I can't figure out how to use multiple axis.
I want to have one axis per series, but at the time all my series are set on the same axis.

How can I change your solution to have multiple axis ?

I've attached the projet that I've modified.

Roger Delacastagne

Attachment: XForms_Sample_58f8ee48.zip

PR Prabakaran R Syncfusion Team April 23, 2018 07:24 AM UTC

Hi Roger,

 

Thanks for the update.

 

Specify the axis to the individual series using XAxis and YAxis properties of chart series. Please find the modified code of ChartPage.xaml page from the attachment.

 

Please refer the following user guide to learn more about adding multiple series with separate axis.

 

https://help.syncfusion.com/xamarin/sfchart/chartseries#multiple-series

 

You can also position the axis at opposite side of the chart using OpposedPosition property of chart axis.

 

https://help.syncfusion.com/xamarin/sfchart/axis#placing-axes-at-the-opposite-side

 

Thanks,

Prabakaran


Attachment: ChartPage.xaml_af614c11.zip

RD Roger Delacastagne April 23, 2018 09:14 AM UTC

Hi,

As you can see with your solution ( that I've already tried )  the chart is showing a 5th axis because of the custom renderer. Only one vertical axis is showing the good scale.

Image of my chart : https://imgur.com/a/2n24H5K

Maybe I didn't made it clear enough that the problem is in continuation of this thread or you didn't even read the full thread to know what we were talking about.

What I want to know how to have multiples axes on my chart using Muneesh's renderer that boost the performances of your charts.
How do I need to update the render to have one axis per series ?

Roger Delacastagne

PR Prabakaran R Syncfusion Team April 23, 2018 10:13 AM UTC

Hi Roger,

 

I am aware of your requirement and have a knowledge about this thread. But, I have ensured the output in Android and iOS platforms and not in UWP, sorry about that.

 

Just now realized that there is a mistake in custom renderer in UWP platform that ignores the mapping of XAxis and YAxis to native chart. Please download the updated sample from the attachment. I have used the methods available in source for replacing the FastLineSeries with FastLineBitmapSeries instead of manually mapping the required properties.

 

Additionally, you can hide the gridlines of any axis(if required) using ShowMajorGridLines property of chart axis. Please refer the following user guide.

 

https://help.syncfusion.com/xamarin/sfchart/axis#grid-lines-customization


Please let me know if you have any question.

 

Thanks,

Prabakaran


Attachment: Chart_Sample_b71106e8.zip

SM Solihin Millin April 14, 2021 05:28 AM UTC

I have been searching the web for a UI that is associated with many datapoints that can zoom in and out of the data visually.  For example in looking at the structure of a Government, the top level might be a word 'Government'.  If the user does a pinch zoom this word would change into high level departments.  Zooming further would change into lower level departments, so one can navigate just with pinch and zoom from high level data to lower level data.  Once you find the data you're interested in, you could tap it and then process the parameters you need.

Sort of like Google Maps datapoint zoom... World, Country, State, Town, Suburb, Street, Street number, and once you find the data point you're interested in you tap it to examine/modify it's parameters etc.

Do you have a product that does this sort of data zoom in/out using Flutter?

Many thanks,

Sol :) 💕

DP Dharanitharan Palanisamy Syncfusion Team April 15, 2021 09:01 AM UTC

Hi Solihin, 
 
We have analyzed your query and would like to ask you to confirm that your expecting widget. From your query, we suspect that you are expecting one of the following widgets. 
Organizational Charts 
First one we suspect that you are expecting for Diagram charts. For example, in the organization, there are many departments, and we can tap on the selected department will navigate and displays about that particular department information like in the following image.  
 
 
Charts 
The second one is that we are suspecting that you are expecting this behavior in our SfCartesianChart widget itself. For example, if we zoom on the chart with yearly data will show the monthly data and further zooming will show the day data and further will displays an hour data and we tap on the required column will display data about that particular day or hour like drill down.  
 
Kindly revert us with the required information will help us to analyze and provide the solution to you sooner. 
 
Thanks, 
Dharanitharan. P 


Loader.
Up arrow icon