How to skip drawing non-continuous data in Syncfusion Chart

[Trinh Thang Long]

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]

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 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/130342/ze/Sample1676840631  

 

Please find the output of the sample below 

 

Thanks, 

Saravana Kumar K. 

[Trinh Thang Long]

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

[Dharanidharan Dharmasivam]

Hi Trinh, 

Thanks for your update. 

Kindly revert us, if you need further assistance. 

Thanks, 

Dharani.