How to color individual line segments.

[Solomon Fried]

I am trying to create a chart similar to what is in the attached PDF.

Essentially I need a bar for each day of a school week. 

The bar will have colored segments indicating time during class with each segment colored to show various attendance status

So a line for a given day might have a Yellow segment indicating the student arrived late. And then it would turn Green showing when he arrived to class.

During a class a student may leave and return more than once and each leave would be indicated be an Out-of-Class color.

My data is Dates on the Y axis for Day of class. And times on the X Axis for time of day.

My thought was to dynamically add StackingLineSeries charts to a chart, 1 for each day being displayed. Each line would have a series of data points with the same date but varying times. This would result in a straight line for each day of class. My problem is the Colors.

Is there a way to color each segment in a line series?  I know the color that each data point needs to be. but in Xamarin Forms Charts, I can't seem to find a way to color each line segment.

Is there a better way to accomplish what I am attempting to do?

Thank you

Attachment: AttendanceChart_c5841c34.zip

[Suyamburaja Jayakumar]

Hi Solomon Fried, 

 

Greetings from Syncfusion. 

 

Currently we are achieving your requirement through the sample level and we will update the complete details on or before July 14,2020. 

 

Regards, 

Suyamburaja J. 

[Suyamburaja Jayakumar]

Hi Solomon Fried, 

 

Thanks for your patience.  

 

Query: Is there a way to color each segment in a line series?  I know the color that each data point needs to be. but in Xamarin Forms Charts, I can't seem to find a way to color each line segment 

 

For the information, in line series to draw need two data point, to apply the color it will consider only the first data point, Last data point is not needed to draw in line series. We have analyzed your query and we would like to let you know that your requirement has been achieved with the help of CustomBrushes property in ChartColorModel. We have created a ChartColorCollection property in ViewModel and added the custom colors based on the available Interval as in below code snippet, 

 

XAML: 

<chart:StackingLineSeries XBindingPath="XValue"  

                                        YBindingPath="YValue1" StrokeWidth="5"   

                                        ItemsSource="{Binding Data1}"> 

                        <chart:StackingLineSeries.ColorModel> 

                            <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding Colors}"> 

                            </chart:ChartColorModel> 

                        </chart:StackingLineSeries.ColorModel> 

 

C#: 

  Colors = new ChartColorCollection(); 

            foreach (var item in Data1) 

            { 

                if ((double)item.XValue < 9) 

                    Colors.Add(Color.Red); 

                else if ((double)item.XValue < 10) 

                    Colors.Add(Color.Blue); 

                else if ((double)item.XValue < 11) 

                    Colors.Add(Color.Green); 

                else 

                { 

                    Colors.Add(Color.Yellow); 

                } 

            } 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/155984/ze/Chart_GettingStarted-585424873.zip  

 

Regards, 

Suyamburaja J. 

[Solomon Fried]

Thank you for your solution.

However there seems to be an interesting problem.

In your example you have set all the YValue1 for the 3 charts to "100".

In my application the YValue would represent an individual School Session ID. The X Values are the time of day for various recorded events.

But! if the YValues for 2 different Series are the same and any XValue matches a value in another Series, then the YValue for that item is raised to some unused number.  

For example, in your example if you changed the YValue1 in Data2 to "200" Then all of Data2 will appear in "300" on the Graph because all the XValues in Data2 match the XValues in Data1.

If you changes any of the XValue in Data2 so that it is not the same as the others, then they will appear in the 200 Axis but the rest will appear on another Axis.

I am not sure why a Stacking line behaves this way.

Any ideas would be appreciated.

[Suyamburaja Jayakumar]

Hi Solomon Fried, 

 

Thanks for your patience. 

 

Behavior of the stacking line series is rendered based on the added value of its previous Y-axis value. For your requirement, better use Line Series. 

 

Please let me know if you have any concerns. 

 

Regards, 

Suyamburaja J. 

[Solomon Fried]

Thank you.

I was using your sample and missed the, now obvious, point that a LineSeries would work as well as a StackedLineSeries.

I would like to suggest that you update the documentation on ChartColorModel (https://help.syncfusion.com/xamarin/charts/appearance) to explain that the concept works for all Series. It was my impression from the examples that it would work only on series like Bars and Columns that display each data point as a discreet element. It did not occur to me that it would also work on a Line (though in retrospect it makes perfect sense).

Once again, thank you for your help in clarifying this for me. 

[Suyamburaja Jayakumar]

Hi Solomon Fried, 

 

Thanks for your update.   

 

We have created the UG document task regarding this and we are currently working on this. The ug changes will be reflected in live on or before July 30,2020. 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Suyamburaja J 

[Hemalatha Marikumar]

Hi Solomon Fried, 

 

Due to some technical glitch, we were unable to publish this UG changes in Live. Currently we are working on this, we will update the status of this publishing on or before August 11,2020.  

 

Regards,
Hemalatha M. 

[Saravanan Madheswaran]

Hi Solomon Fried 

 

Sorry for the delay.  

 

Due to some pending in technical review, we have postposed this UG live updates to our Volume 2 SP1 release which is expected to be rolled out by this week. We will let you know once it gets published. 

 

Regards, 

Saravanan.  

[Hemalatha Marikumar]

Hi Solomon Fried, 

 

Thanks for your patience.  

 

We have included the needed changes and make it live. 

 

https://help.syncfusion.com/xamarin/charts/appearance#apply-palette-for-series 

 

Regards,
Hemalatha M.