spline series with two colors.

[chandra sekhar]

I'm plotting realtime ecg data using spline series from line chart.

Here problem that i'm facing is to change the color of spline for some points when it reaches peak.

Is there a way to do it?

Attachment: ECG_Graph_549581d.7z

[Anandaraj T]

Hi Chandra, 

Thanks for using Syncfusion products. 

We can use ChartSeriesStyle.Border.Color property of ChartSeries to customize the color for individual points in a spline series. We have prepared a simple sample to use two different colors for points in a spline series. The sample can be downloaded from the following link 

http://www.syncfusion.com/downloads/support/forum/136038/ze/SplineColorDemo151490906 

[Spline with two colors] 

 

Please refer the following code snippet to achieve this 

[C#] 

 

            for (int i = 0; i < series.Points.Count; i++) 

            { 

                if (series.Points[i].YValues[0] > 0) 

                { 

                    series.Styles[i].Border.Width = 2; 

 

                    //Color for line type series like line, spline, etc 

                    series.Styles[i].Border.Color = Color.Green; 

 

                    //Color for column and other types of series like column, bar, pie, candle, etc 

                    series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Green); 

                } 

                else 

                { 

                    series.Styles[i].Border.Width = 2; 

                    series.Styles[i].Border.Color = Color.Red; 

                    series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Red); 

                } 

            } 

 

Please let us know if you have any concern. 

Regards, 

Anand 

[chandra sekhar]

Thank u for your fast reply.

series.Styles[i].Interior = new Syncfusion.Drawing.BrushInfo(Color.Red);

was worked for me for spline series rather than 

series.Styles[i].Border.Color= Color.Red;

Once Again Thank U.

                  

[Sanjith Kesavan]

Hi Chandra Sekhar, 

Most welcome. Please let us know if you need any further assistance.  

Thanks, 

Sanjith. 

[chandra sekhar]

Hi Sir,

In the graph i'm using stripline in x-axis it is moving from start to end but not coming to start position though i'm changing its start and end.

Please help me how to do this..

This is the code I tried:

 //Customizing the Stripline
            stripLine.Enabled = true;
            stripLine.Vertical = true;
            stripLine.Start = 0;
            stripLine.Width = 5;
            stripLine.Period =2000;
            stripLine.End = 5;
            stripLine.Text = "ECG";
            stripLine.TextColor = Color.Cyan;          
            stripLine.TextAlignment = ContentAlignment.MiddleCenter;
            stripLine.Font = new Font("Arial", 10, FontStyle.Bold);
            stripLine.Interior = new BrushInfo(230, new BrushInfo(GradientStyle.ForwardDiagonal, Color.Gray, Color.Gainsboro));
            //Adding stripline to the X-axis
            this.chartControl2.PrimaryXAxis.StripLines.Add(stripLine);
     

//this is in timer 

 for (int i = 0; i < (WFgraphdatalist.Count); i++)

{
     timestamp = WFgraphdatalist[i].TimeStamp;
     if (chartControl2.Series[0].Points.Count > 999)// (maxgraphpoints - 1))
     {           

//here i'm adding new points using timestamp as x point and ecgvalue as ypoint 

//and then removing old points using removeat(0) all the time while adding a new point.

                
      }                              
     if (timestamp == 0)
     {
                chartControl2.PrimaryXAxis.StripLines[0].Start = 0;
                chartControl2.PrimaryXAxis.StripLines[0].End = 4;
    }
     else if (timestamp <= 995)
    {// max graph points is 1000.so,up to 995 it is moving properly but after that it reaching end it's not coming back
               chartControl2.PrimaryXAxis.StripLines[0].Start = WFgraphdatalist[i].TimeStamp;
                chartControl2.PrimaryXAxis.StripLines[0].End = WFgraphdatalist[i].TimeStamp +4;        
     }        

}

[Sanjith Kesavan]

Hi Chandra Sekhar, 

Thanks for your reply. We have analyzed your queries and code example. But stripline is working properly and it reaches the starting point after changing start and end value. In our sample, we are having 50 points for chart and in timer we are increasing the start and end value by 5. Please find the below code example in timer.  

[C#] 

private void MyTimer_Tick(object sender, EventArgs e) 

{ 

    if (chart.PrimaryXAxis.StripLines[0].End == 50) 

    { 

        chart.PrimaryXAxis.StripLines[0].Start = 0; 

        chart.PrimaryXAxis.StripLines[0].End = chart.PrimaryXAxis.StripLines[0].Start + 5; 

        myTimer.Stop(); 

    } 

    else 

    { 

         chart.PrimaryXAxis.StripLines[0].Start = chart.PrimaryXAxis.StripLines[0].End; 

         chart.PrimaryXAxis.StripLines[0].End = chart.PrimaryXAxis.StripLines[0].End + 5; 

    } 

} 

In the above code, we have increased the start and end value by 5 till end value reaching 50. If end value reaches 50 then again we set the start and end value as 0 and 5 respectively and we stopped the timer. So the stripline gets back to the starting point. In the below link, we have attached the sample for your reference.  

Sample link: sample 

Still you are facing any concern, kindly let us know by modifying the above attached sample to reproduce the reported issue. Or else please provide the screenshots of your output before and after issue occurring. This will be helpful for us to find and fix the issue sooner.  

Thanks, 

Sanjith. 

[chandra sekhar]

Actually this stripline start and end is working without for loop.

But i'm changing stripline start and end inside for loop as i'm updating chart with new or updated list.

For every 30ms interval i'm updating graph points with updated list.

while updating chart with new ecg value I need to move stripline from start to end as well as change color of particular points in series. so,i'm using for loop.

Is there any better way to do this? Please help me...

[chandra sekhar]

how to bind the chart data source with datalist in proper way. so, that remove or add of data in list will be affected on graph points.

[Anandaraj T]

Hi Chandra, 

Thanks for the update. 

We have modified the sample in our previous update based on your requirements and it can be downloaded from the following link 

http://www.syncfusion.com/downloads/support/forum/136038/ze/SplineColorDemo-databinding1094957298 

Query #1: Is there any better way to do this? 

We can use VisibleRangeChanged event of ChartAxis to update the strip line Start and End values whenever the axis range changes. 

Please refer the following code snippet to achieve this 

[C#] 

 

chart.PrimaryXAxis.VisibleRangeChanged += PrimaryXAxis_VisibleRangeChanged; 

 

        //Update strip line whenever axis range gets changed 

        void PrimaryXAxis_VisibleRangeChanged(object sender, EventArgs e) 

        { 

            ChartAxis axis = sender as ChartAxis; 

            ChartStripLine stripLine = axis.StripLines[0]; 

             

            //Customize stripline for the first time 

            if(!axis.StripLines[0].Enabled){ 

                stripLine.Text = "ECG"; 

                stripLine.Enabled = true; 

                stripLine.Vertical = true; 

                stripLine.TextColor = Color.Cyan; 

                stripLine.Period = 2000; 

                stripLine.TextAlignment = ContentAlignment.MiddleCenter; 

                stripLine.Font = new Font("Arial", 10, FontStyle.Bold); 

                stripLine.Interior = new BrushInfo(230, new BrushInfo(GradientStyle.ForwardDiagonal, Color.Gray, Color.Gainsboro)); 

            }             

 

            stripLine.Start = axis.VisibleRange.Min; 

            stripLine.Width = 5; 

            stripLine.End = axis.VisibleRange.Min + 5;              

        } 

 

Query #2: how to bind the chart data source with datalist in proper way. so, that remove or add of data in list will be affected on graph points. 

We can bind chart series with a DataSet or DataTable or BindingSource or BindingList, etc.. in your application using ChartDataBindModel. The ChartDataBindModel will subscribe to the changed event and update the Chart whenever the data changes. 

Please refer the following code snippet to achieve this 

[C#] 

 

        void PopulateData(ChartSeries series,  int pointsCount) 

        { 

            //Binding list to bind with chart 

            data = new BindingList<ChartData>();             

            double y = 0; 

 

            //Populate the data for binding list 

            for (int i = 0; i < pointsCount; i++) 

            { 

                y = r.Next(-5, 5); 

                y = y > 2 ? 0.5 : y < -2 ? -0.5 : 0; 

                data.Add(new ChartData() { X = i, Y = y }); 

            } 

 

            //Bind the BindingList with ChartSeries using ChartDataBindModel 

            //Chart will update automatically whenever the binding list is updated 

            //No additional code required for updating 

            series.SeriesModel = new ChartDataBindModel(data) {  

 

                //Field to bind with X-values of chart series 

                XName = "X", 

 

                //Field to bind with Y-values of chart series 

                YNames = new string[]  

                { "Y" }  

            }; 

        } 

 

Please let us know if you have any concern. 

Regards, 

Anand 

[chandra sekhar]

Hi sir,

from serialport i'm getting fivesamples at one timestamp that means,

timestamp1-sample1,sample2,sampl3,sample4,sample5 all these 5 samples has to be plotted with

timestamp as x(0,1,2,3,4) and y(sampley1,sampley2,sampley3,sampley4,sampley5)

timestamp2-sample1,sample2,sampl3,sample4,sample5 all these 5 samples has to be plotted with timestamp as x(5,6,7,8,9) etc..

I need continuous plotting of data from left to right and after reaching 1000 graph points it has to update or remove old points in starting left position and add new points (5 samples) and the same process has to be done continuously..

while updating or adding I need that stripline to indicate.

As I have three charts one for ecg,clock, and other for spo2.For continuous plotting i'm using timer to update points with new datalist

Main problem

1.datalist[0] has to be plotted as point[0],point[1],point[2],point[3],point[4] in graph

200 datas has to be plotted as 1000 points.

2.At particular constraints only certain points color has to be changed.

3.Updating of two graphs should not degrade chart performance.

Solutions I approached and problem I faced

1.i'm not using chartdatabindmodel so, i'm using for loop and updating individual points.so,i'm able to change color but it is slow and updating as batch

2.For adding every new point after it reaching max points i'm removing point at 0 and adding new point -it is slow

3.Inspite of removing and adding new points I decided to change position of point's x and y- but it is not changing graphically but in debugging it is changing

If i'm boring sorry..

Your support is thankful.

I'm waiting for reply.

[Sanjith Kesavan]

Hi Chandra Sekar, 

We have analyzed your query and prepared sample as per your requirement. In our sample, initially we have added 5 chart series, each series that contains 200 data.Please find the below code example.  

[C#] 

chart.BeginUpdate(); 

//Intially adding 200 points for each series 

            for (int i = 0; i < 200; i++) 

            { 

                series.Points.Add(i, random.Next(0, 50)); 

                series1.Points.Add(i, random.Next(100, 150)); 

                series2.Points.Add(i, random.Next(150, 200)); 

                series3.Points.Add(i, random.Next(50, 100)); 

               series4.Points.Add(i, random.Next(200, 250)); 

            } 

            chart.EndUpdate(); 

In timer, we have added one point for each series with 100 milliseconds interval. 

[C#] 

void timer_Tick(object sender, EventArgs e) 

        { 

            if (count < 1000) 

            { 

                count = count + 1; 

                chart.BeginUpdate(); 

                series.Points.Add(count, random.Next(0, 50)); 

                series1.Points.Add(count, random.Next(100, 150)); 

                series2.Points.Add(count, random.Next(150, 200)); 

                series3.Points.Add(count, random.Next(50, 100)); 

                series4.Points.Add(count, random.Next(200, 250)); 

                chart.EndUpdate(); 

            } 

            else 

            { 

                count = 0; 

            } 

     } 

Above code indicates that once count reached 1000 then we have again set the count as 0. So automatically in timer, points from 0 is started to update for each series. To improve the chart performance, we have added the below code in our sample. 

[C#] 

chart.ImprovePerformance = true; 

chart.CalcRegions = true; 

series.EnableStyles = false; 

series1.EnableStyles = false; 

series2.EnableStyles = false; 

series3.EnableStyles = false; 

series4.EnableStyles = false; 

chart.BeginUpdate(); 

//Add or update points here 

 

chart.EndUpdate(); 

In the below link, we have attached sample for your reference.  

Sample link: sample 

To know more about improving chart performance, kindly follow the below link. 

https://help.syncfusion.com/windowsforms/chart/improving-performance  

Kindly check the sample and let me know if you have any concern. 

Thanks, 

Sanjith. 

[chandra sekhar]

Thank u for taking concern about asked issue.

To approach my problem I Implemented  a class that inherits ichartseries there while adding an item to the list by taking single input with 5 samples I added it as 5 datapoints to list by that it is updating the graph fastly. I have to check stripline is working or not.

In your reply u had given series4.EnableStyles = false; by that fast is improving but unable to get red color in between green in the series. So,i didn't used it.

 If I have any problem means I will disturb u again.

Once again thank u.

[Sanjith Kesavan]

Hi Chandra Sekhar, 

  

Thanks for your update. Kindly let us know if you need any assistance on this.  

  

Thanks, 

Sanjith.  

[chandra sekhar]

Hi sir,

I have 3 charts that has to be printed if print button is clicked..

Is it possible to print graph on the chart in windows form using C#.

Is there any specific API's for this.

please let me know....

[Sanjith Kesavan]

Hi Chandra Sekhar, 

We have analyzed your query and prepared sample as per your requirement. In our sample, we have created the chart and printed those three charts while clicking print button. For printing the chart, we have written the below code in button click. 

[C#] 

private void button1_Click(object sender, EventArgs e) 

{ 

    PrintDocument pd = new PrintDocument(); 

    pd.PrintPage += pd_PrintPage; 

    pd.Print(); 

} 

 

void pd_PrintPage(object sender, PrintPageEventArgs ev) 

{ 

    this.chartControl1.Draw(ev.Graphics, new Rectangle(0, 0, 250, 250)); 

    this.chartControl2.Draw(ev.Graphics, new Rectangle(0, 260, 250, 250)); 

    this.chartControl3.Draw(ev.Graphics, new Rectangle(0, 260, 250, 250)); 

            

} 

Please find the below screenshot while clicking the print button.  

 

In the below link, we have attached sample for your reference.  

Sample: chartprint 

Kindly check the sample and let me know if you have any concern. 

Thanks, 

Sanjith. 

[chandra sekhar]

Hi Sir,

I have problem in plotting data in three charts at the same time.I have two minutes of recorded data. I have to plot that data like just it is plotting while recording.

I have Three lists of data and have to be plotted like said above. I used timers for this but it is slow. I need graph to be plotted in 2 minutes.

list1 and list 2 each list has count of 34045 approximately

list3 with count of 6710 approximately.

I have to plot  this 3 lists in 3 separate chart controls.(but not the series of same chart)

I used chartseriesmodel also but it is not showing graphically,but adding in the chart points in debugging.

Please help me to solve this issue....

Attachment: ECGcharts_6a2d9fac.7z

[Sanjith Kesavan]

Hi Chandra Sekhar, 

We have analyzed your query and prepared sample as per your requirement. In our sample, we have created 3 charts each contains one series. For first and second chart, we have loaded 34059 data and for the third one we have loaded 6710 data. Using timer we have loaded this data in 2 seconds with 400ms interval. Please find the below code example.  

[C#] 

public void AddPoint(int val1, int val2){ 

            if (point1 < 34046) 

            { 

                for (int i = val1-6809; i < val1; i++) 

                { 

                    populations.Add(new PopulationData(i, random.Next(50, 100))); 

                    populations1.Add(new PopulationData(i, random.Next(30, 50))); 

                } 

                for (int j = val2-1342; j < val2; j++) 

                { 

                    populations2.Add(new PopulationData(j, random.Next(10, 20))); 

                } 

                ChartDataBindModel dataSeriesModel = new ChartDataBindModel(populations); 

                ChartDataBindModel dataSeriesModel1 = new ChartDataBindModel(populations1); 

                ChartDataBindModel dataSeriesModel2 = new ChartDataBindModel(populations2); 

                dataSeriesModel.YNames = new string[] { "Y" }; 

                dataSeriesModel1.YNames = new string[] { "Y" }; 

                dataSeriesModel2.YNames = new string[] { "Y" }; 

                series.SeriesModel = dataSeriesModel; 

                series1.SeriesModel = dataSeriesModel1; 

                series2.SeriesModel = dataSeriesModel2; 

                point1 = point1 + 6809; 

                point2 = point2 + 1342; 

            } 

            else 

            { 

                timer.Stop();                 

                MessageBox.Show("stopped"); 

            } 

             

        } 

In the above code, we have added random data for all 3 charts and bound those data to chart. For improving chart performance, we have ImprovePerformance as true and CalcRegion as false for chart. Please find the code example below. 

[C#] 

chartControl1.ImprovePerformance = true; 

chartControl2.ImprovePerformance = true; 

chartControl3.ImprovePerformance = true; 

chartControl1.CalcRegions = false; 

chartControl2.CalcRegions = false; 

chartControl3.CalcRegions = false; 

In the below link, we have attached sample for your reference.  

Sample link: sample 

Kindly check the sample and let me know if you have any concern. 

Thanks, 

Sanjith.