Working example of a Sflinesparkline graph

Matthias Axt

Asked On October 12, 2019 02:08 PM UTC

Hi there

I am using vs 2017 and trying to create an app that visually displays data in a graph format.

This data originates from a Mqtt client subscribed to a broker. I've managed to get the data

and display it in a table. However representing the data graphically is the aim.

I have downloaded many examples but none of them seam to work.

Please help

Reply | Reply with quote

Rachel A [Syncfusion]

Replied On October 14, 2019 09:19 AM UTC

Hi Matthias,

Greetings from Syncfusion.

We have prepared the simple SfLineSparkline samples in both Xamarin Forms and Xamarin.Android platforms. Please find the links from below

Xamarin.Forms sample link:

https://www.syncfusion.com/downloads/support/forum/148266/ze/SparkLineSample55087594

Xamarin.Android sample link:

https://www.syncfusion.com/downloads/support/forum/148266/ze/App3-368206132

Also, refer the below User Guide link for more information.

https://help.syncfusion.com/xamarin/sfsparkline/getting-started

We hope it helps you.

Regards,

Rachel.

Reply | Reply with quote

Matthias Axt

Replied On October 15, 2019 12:14 PM UTC

Thanks Rachel for your reply. I have changed to using a sfchart with a spline type allowing me multiple series. One question I do have is, why when using range padding numericalpadding additional does it always seem to pad more at the top than at the bottom. I would like to see the series in the middle of the range. Is that possible?

Reply | Reply with quote

Hemalatha Marikumar [Syncfusion]

Replied On October 17, 2019 10:50 AM UTC

Hi Matthias Axt,

Thanks for your update.

We have validated your query and you can achieve this requirement by setting the PlotOffset property to apply the padding to the plot area which is available in ChartAxis. Please refer below code snippet.

Code Snippet[Xaml]:

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis PlotOffset="30">

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>

Code Snippet[C#]:

chart.SecondaryAxis = new NumericalAxis()

{

PlotOffset = 30

};

We have prepared sample based on your requirement and you can download the sample from the below link.

Xamarin.Forms sample link:

https://www.syncfusion.com/downloads/support/forum/148266/ze/148266-1318233724.zip

Xamarin.Android sample link:

https://www.syncfusion.com/downloads/support/forum/148266/ze/148266_Android-1414862697.zip

Screenshot:

For more details please refer below UG and KB links.

Xamarin.Forms : https://help.syncfusion.com/xamarin/sfchart/axis?cs-save-lang=1&cs-lang=xaml#offset-the-rendering

Xamarin.Android : https://help.syncfusion.com/xamarin-android/sfchart/axis#offset-the-rendering

KB : https://www.syncfusion.com/kb/10785/how-to-view-corner-segments-without-cutting-in-edge-of-chart

Please let us know if need any further assistance.

Regards,
Hemalatha M.

Reply | Reply with quote

Lavanya Anaimuthu [Syncfusion]

Replied On October 17, 2019 11:25 AM UTC

Hi Matthias Axt,

We have validated your query and you can achieve this requirement by setting the PlotOffset property to apply padding to the plot area which is available in ChartAxis. Please refer below code snippet.

Code Snippet[Xaml]:

<chart:SfChart.SecondaryAxis>

<chart:NumericalAxis PlotOffset="30">

</chart:NumericalAxis>

</chart:SfChart.SecondaryAxis>

Code Snippet[C#]:

chart.SecondaryAxis = new NumericalAxis()

{

PlotOffset = 30

};

We have prepared sample based on your requirement and you can download the sample from the below link.

Xamarin.Forms sample link: