Scatter Chart Background and Touch Value

Question

I have a scatter chart. I need the ability to have a color background where it is green up to 500, blue to 1000, light peach to 1500 and pinkish red from 1500 to 2500. Ideally, I want the chart to mimic the one at the bottom of this web page - http://propd.org. I have to support Android, iOS and rotating device.

Also is there a way to touch a value and popup addition information associated with the value, for example, a note.

Manojkiran Sudhakar · Answer

Hi Rabi,

Thanks for using Syncfusion products.

Query 1: Chart background

You can achieve your requirement with help of stripline feature. Please refer the follow code snippet.

Code snippet[Xaml]:

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis Maximum="52" Minimum="28">

<chart:NumericalAxis.StripLines>

<chart:NumericalStripLine Start="0" Width ="500" FillColor="#F4C762"/>

</chart:NumericalAxis.StripLines>

<chart:NumericalAxis.StripLines>

<chart:NumericalStripLine Start="500" Width ="500" FillColor="#0000FF"/>

</chart:NumericalAxis.StripLines>

<chart:NumericalAxis.StripLines>

<chart:NumericalStripLine Start="1000" Width ="500" FillColor="#F4C762"/>

</chart:NumericalAxis.StripLines>

<chart:NumericalAxis.StripLines>

<chart:NumericalStripLine Start="1500" Width ="500" FillColor="#0000FF"/>

</chart:NumericalAxis.StripLines>

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>

Code snippet[C#]:

NumericalStripLine stripLine1 = new NumericalStripLine();

stripLine1.FillColor = Color.FromRgb(215, 244, 212);

stripLine1.Start = 0;

stripLine1.Width = 500;

secondaryAxis.StripLines.Add(stripLine1);

NumericalStripLine stripLine2 = new NumericalStripLine();

stripLine2.FillColor = Color.FromRgb(207,223,238);

stripLine2.Start = 500;

stripLine2.Width = 500;

secondaryAxis.StripLines.Add(stripLine2);

NumericalStripLine stripLine3 = new NumericalStripLine();

stripLine3.FillColor = Color.FromRgb(249,215,187);

stripLine3.Start = 1000;

stripLine3.Width = 500;

secondaryAxis.StripLines.Add(stripLine3);

NumericalStripLine stripLine4 = new NumericalStripLine();

stripLine4.FillColor = Color.FromRgb(243,220,219);

stripLine4.Start = 1500;

stripLine4.Width = 1000;

secondaryAxis.StripLines.Add(stripLine4);

You can refer more details about the stripline feature in below link.

Link: https://help.syncfusion.com/xamarin/sfchart/striplines?cs-save-lang=1&cs-lang=xaml#what-is-strip-line

Query 2: Touch value

You can show the X and Y values using TooltipTemplate property of ChartSeries as shown in the below code snippets.

Code snippet[Xaml]:

<chart:ScatterSeries.TooltipTemplate>

</StackLayout>

</DataTemplate>

</chart:ScatterSeries.TooltipTemplate>

Code snippet[C#]:

series.TooltipTemplate = new DataTemplate(() =>

{

StackLayout layout = new StackLayout();

Label xValue = new Label();

xValue.SetBinding(Label.TextProperty, new Binding("XValue", stringFormat: "XValue: {0}"));

Label yValue = new Label();

yValue.SetBinding(Label.TextProperty, new Binding("YValue", stringFormat: "YValue: {0}"));

layout.Children.Add(xValue);

layout.Children.Add(yValue);

return layout;

});

You can refer the following user guide link to know more about tooltip template.

Link: https://help.syncfusion.com/xamarin/sfchart/tooltip#tooltip-template

We have prepared a sample for these, which can be downloaded from the following link.

Sample: http://www.syncfusion.com/downloads/support/forum/136772/ze/ChartScatterSample-742257587

Please let us know if you have any concern.

Regards,

Manojkiran S.

Rabi · Answer

Thanks for the strip lines is perfect. Don't know how I missed it reading the manual.

Will tooltip work with the Editor control? When the user touches a value, the app should popup an Editor control. Then when the Editor closes the value inside is saved.

Divya Venkatesan · Answer

Hi Rabi, 
 
We have achieved this requirement by using Entry view in TooltipTemplate. We have updated the corresponding model value with entry text using Completed event in entry.  Please refer the below code snippet. 
 
Code snippet[C#]: 
 





 
            series.TooltipTemplate = new DataTemplate(() => 
            { 
                StackLayout layout = new StackLayout(); 
 
                StackLayout layout1 = new StackLayout(); 
                layout1.Orientation = StackOrientation.Horizontal; 
 
                StackLayout layout2 = new StackLayout(); 
                layout2.Orientation = StackOrientation.Horizontal; 
 
                Label label1 = new Label(); 
                label1.Text = "XValue:"; 
 
                Label label2 = new Label(); 
                label2.Text = "YValue:"; 
 
                Entry xValue = new Entry(); 
                xValue.WidthRequest = 50; 
                xValue.SetBinding(Entry.TextProperty,"XValue",BindingMode.OneWay,null); 
 
                xValue.Completed += (sender, e) => 
                 { 
                     double value; 
                     if (double.TryParse((sender as Entry).Text, out value)) 
                     { 
                         ((sender as Entry).BindingContext as Model).XValue = value; 
                     } 
                 }; 
 
                Entry yValue = new Entry(); 
                yValue.WidthRequest = 50; 
                yValue.SetBinding(Entry.TextProperty, "YValue", BindingMode.OneWay, null); 
 
                yValue.Completed += (sender, e) => 
                 { 
                     double value; 
                     if (double.TryParse((sender as Entry).Text, out value)) 
                     { 
                         ((sender as Entry).BindingContext as Model).YValue = value; 
                     } 
                 }; 
 
                layout1.Children.Add(label1); 
                layout1.Children.Add(xValue); 
 
                layout2.Children.Add(label2); 
                layout2.Children.Add(yValue); 
 
                layout.Children.Add(layout1); 
                layout.Children.Add(layout2); 
                return layout; 
            });  
 
We have modified our sample based on this, please download the sample from the below location.  
 
Sample: http://www.syncfusion.com/downloads/support/forum/136772/ze/ChartScatterSample172068790  
 
Please let us know if you have any queries.  
 
Regards, 
Divya Venkatesan

Rabi · Answer

Is there a way to just capture the event and the date time and score clicked? I really need to popup an Editor and save the user input as a note.

Divya Venkatesan · Answer

Hi Rabi, 
 
You can get the user input in Completed event of Entry and you can save it as you required. Please refer the below code snippet. 
 
Code snippet[C#]: 




xValue.Completed += (sender, e) => 
{ 
    double value; 
    if (double.TryParse((sender as Entry).Text, out value)) 
    { 
        // you can save this value as you required 
    } 
}; 
 
Please let us know if you need any further assistance. 
 
Regards, 
Divya Venkatesan

Rabi · Answer

I think you are misunderstanding what I want.

Use Case

Summary Page displays a scatter chart with data from the user

User touches one of the data markers

A Detail Page is displayed modal with additional data

User can type notes about the data, look at more detailed data including radar chart

When user hits back they are returned to Summary Page

Divya Venkatesan · Answer

Hi Rabi, 
 
We have achieved your requirement using LabelTemplate property of ChartDataMarker. Please refer the below code snippets. 
 
Code snippet[C#]: 




dataMarker.LabelTemplate = new DataTemplate(() => 
{ 
    StackLayout layout = new StackLayout(); 
 
    Label label = new Label(); 
    label.SetBinding(Label.TextProperty, "YValue"); 
 
    var tapGesture = new TapGestureRecognizer(); 
    tapGesture.Tapped += (sender, e) => 
    { 
        var data = (sender as Label).BindingContext as Model; 
        Navigation.PushAsync(new DetailPage() { Item = data }); 
    }; 
    label.GestureRecognizers.Add(tapGesture); 
    layout.Children.Add(label); 
    return layout; 
}); 
 
You can refer the following user guide link to know more about datamarker template. 
https://help.syncfusion.com/xamarin/sfchart/datamarker#label-template  
 
We have prepared a sample for this which can be downloaded from the following link. 
 
Sample: http://www.syncfusion.com/downloads/support/forum/136772/ze/ChartScatterSample1158236375  
 
Please let us know if you need any further assistance. 
 
Regards, 
Divya Venkatesan

Rabi · Answer

Your example does not work on iOS. I tried adapting it to my code however the label never receives the tap. I also tried a button and again the clicked event is never fired.

Divya Venkatesan · Answer

Hi Rabi, 
 
Sorry for the inconvenience caused. 
 
We have modified our sample to make label tap work fine in iOS using Custom renderer.  Please download the modified sample from the following link. 
 
Sample: http://www.syncfusion.com/downloads/support/forum/136772/ze/ChartScatterSample-1556097410  
 
Please let us know if you need any further assistance. 
 
Regards, 
Divya Venkatesan