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. Image for the cookie policy date

How to skip drawing non-continuous data in Syncfusion Chart


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,

3 Replies

SK Saravana Kumar Kanagavel Syncfusion Team 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 
            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))); 
            //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]);  
            // bind the data source to the here // 
            this.Chart1.DataSource = list; 
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++) 
           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 = []; 
           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 
Saravana Kumar K. 

TT Trinh Thang Long 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!

DD Dharanidharan Dharmasivam Syncfusion Team May 10, 2017 04:12 AM UTC

Hi Trinh, 

Thanks for your update. 

Kindly revert us, if you need further assistance. 


Live Chat Icon For mobile
Up arrow icon