We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to skip drawing non-continuous data in Syncfusion Chart

Thread ID:

Created:

Updated:

Platform:

Replies:

130342 May 8,2017 10:57 AM UTC May 10,2017 04:12 AM UTC ASP.NET Web Forms 3
loading
Tags: Chart
Trinh Thang Long
Asked On May 8, 2017 10:57 AM UTC

Hello,

I am working on a ASP.NET web form project using Syncfusion Chart control, 
The web application will read data from a text file to draw graph, the data is not continuous as shown in below table for example:

ID Value
1 23
2 45
3 15
4 26
5 37
11 58
12 62
13 35
14 27
15 44

By default the chart will connect the point 5 to point 11 by a straight line, but I want it skip drawing the lost data, look like the graph below:



Please help me to solve this problem, thank you very much,

Saravana Kumar Kanagavel [Syncfusion]
Replied On May 9, 2017 02:37 PM UTC

Hi Trinh, 
 
Thanks for contacting Syncfusion Support. 
We have analyzed your and created a sample based on your requirement. In the sample, we have read the data from text file and pass the data to render the chart. Please refer the code example below 
 
[C#] 
            List<ChartData> list = new List<ChartData>(); 
            DataTable dt = new DataTable(); 
            // Read the text file here// 
            using (System.IO.TextReader tr = File.OpenText(Server.MapPath(@"~\App_Data\data.txt"))) 
            { 
                string line; 
                while ((line = tr.ReadLine()) != null) 
                { 
                    string[] items = line.Trim().Split(','); 
                    if (dt.Columns.Count == 0) 
                    { 
                        for (int i = 0; i < items.Length; i++) 
                            dt.Columns.Add(new DataColumn("Column" + i, typeof(string))); 
                    } 
                    dt.Rows.Add(items); 
                } 
            } 
            //store the values in list from data table   
            foreach (DataRow dr in dt.Rows) 
            { 
                ChartData data = new ChartData(); 
                data.Xvalue = Convert.ToDouble(dr.ItemArray[0]); 
                data.YValue1 = Convert.ToDouble(dr.ItemArray[1]);  
                list.Add(data); 
            } 
            // bind the data source to the here // 
            this.Chart1.DataSource = list; 
            this.Chart1.DataBind(); 
 
[JS] 
function preRender(sender) { // OnClientPreRender event triggered 
           var points = sender.model.series[0].points; 
           var newPoints = []; 
           var currentPoint = []; 
           for (var i = 0; i < points.length; i++) 
               newPoints.push(points[i].x); 
           var newPoints = newPoints.sort(function (a, b) { return a - b }); 
           var minPoint = Math.min.apply(null, newPoints); 
           var maxPoint = Math.max.apply(null, newPoints); 
           for (var j = minPoint; j < maxPoint; j++) { 
               var isPoint = $.inArray(j, newPoints); 
               if (isPoint < 0) { 
                   var randomNum = getRandomArbitrary(10, 100); 
                   points.push({ x: j, y: randomNum, isEmpty: true, visible: false, YValues: {} }); 
                   var yPoint = points[points.length - 1].YValues = []; 
                   yPoint.push(randomNum); 
               } 
           } 
           sender.model.series[0].points = points.sort(function (a, b) { return a.x - b.x; }); 
       } 
 
In the above code, we have get the data from text file and bind that data to the chart. By using onClientPreRender event, we are getting the series points and for missing points, we have added points into the series points. And while adding the missing points, we need to set the isEmpty property to true as highlighted in the above code snippet, in order to achieve your requirement .  
 
And we have prepared the sample for your reference which can be find from below link 
 
 
Please find the output of the sample below 
 
Thanks, 
Saravana Kumar K. 


Trinh Thang Long
Replied On May 9, 2017 04:12 PM UTC

Thank you very much, this is exactly what I need. I am so appreciate your prompt and dedicated support!

Dharanidharan Dharmasivam [Syncfusion]
Replied On May 10, 2017 04:12 AM UTC

Hi Trinh, 

Thanks for your update. 

Kindly revert us, if you need further assistance. 

Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;