Skip to content

Added the API links for Empty Points and Fast Scatter UG #269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 19 additions & 22 deletions maui-toolkit/Cartesian-Charts/EmptyPoints.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ keywords: .net maui chart empty points, .net maui empty points customization, sy
# Empty Points in .NET MAUI Chart
Empty Points are used to indicate missing or null data in a series. These empty points can occur when data is unavailable, improperly formatted, or explicitly set as null or double.NaN. The chart provides options to handle and customize these empty points to enhance visualization and maintain the integrity of data representation.

[SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html) provides support for empty points, allowing users to handle missing data effectively.
[SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html) provides support for empty points, allowing users to handle missing data effectively.

The data collection that is passed to the chart can have NaN or Null values that are considered as empty points. The empty point can be defined as in the below code example.

Expand All @@ -28,34 +28,34 @@ The data collection that is passed to the chart can have NaN or Null values that

{% endhighlight %}

By default, the [EmptyPointMode]() property is `None`. So the empty points will not be rendered as shown in the below.
By default, the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) property is `None`. So the empty points will not be rendered as shown in the below.

![Empty Points in MAUI Chart](EmptyPoints_images/EmptyPoints_Default.png)

## Empty Point Mode
The [EmptyPointMode]() property of series specifies how empty points should be handled.
The [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) property of series specifies how empty points should be handled.

This property is an enumeration with the following options:
This property provides the following options.

* None - Empty points are not rendered. This is the default behavior.
* Zero - Empty points will be replaced with zero.
* Average - Empty points will be replaced with the average value of the surrounding data points.
* **None** - Empty points are not rendered. This is the default behavior.
* **Zero** - Empty points will be replaced with zero.
* **Average** - Empty points will be replaced with the average value of the surrounding data points.

The following code example shows the [EmptyPointMode]() as `Zero`.
The following code example shows the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) as `Zero`.

{% tabs %}

{% highlight xaml %}

<chart:SfCartesianChart>

.....

<chart:LineSeries ItemsSource="{Binding ProductSales}"
XBindingPath="Product"
YBindingPath="Sales"
EmptyPointMode="Zero">
</chart:LineSeries>

</chart:SfCartesianChart>

{% endhighlight %}
Expand All @@ -65,7 +65,6 @@ The following code example shows the [EmptyPointMode]() as `Zero`.
SfCartesianChart chart = new SfCartesianChart();

.....

LineSeries series = new LineSeries()
{
ItemsSource = new ViewModel().ProductSales,
Expand All @@ -83,7 +82,7 @@ The following code example shows the [EmptyPointMode]() as `Zero`.

![EmptyPoint Mode Zero in MAUI Chart](EmptyPoints_images/EmptyPoints_Mode_Zero.png)

The following code example shows the [EmptyPointMode]() as `Average`.
The following code example shows the [EmptyPointMode](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointMode.html) as `Average`.

{% tabs %}

Expand All @@ -92,12 +91,12 @@ The following code example shows the [EmptyPointMode]() as `Average`.
<chart:SfCartesianChart>

.....

<chart:ColumnSeries ItemsSource="{Binding ProductSales}"
XBindingPath="Product"
YBindingPath="Sales"
EmptyPointMode="Average">
</chart:ColumnSeries>

</chart:SfCartesianChart>

{% endhighlight %}
Expand All @@ -107,7 +106,6 @@ The following code example shows the [EmptyPointMode]() as `Average`.
SfCartesianChart chart = new SfCartesianChart();

.....

ColumnSeries series = new ColumnSeries()
{
ItemsSource = new ViewModel().ProductSales,
Expand All @@ -125,12 +123,12 @@ The following code example shows the [EmptyPointMode]() as `Average`.

![EmptyPoint Mode Average in MAUI Chart](EmptyPoints_images/EmptyPoints_Mode_Average.png)

## Customizing Empty Points
The [EmptyPointSettings]() property allows you to customize the appearance of empty points in a series. This enables you to adjust various visual aspects of empty points, making them more distinct from the other data points. You can modify the following properties within [EmptyPointSettings]().
## Empty Point Customization
The [EmptyPointSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html) property allows you to customize the appearance of empty points in a series. This enables you to adjust various visual aspects of empty points, making them more distinct from the other data points. You can modify the following properties within [EmptyPointSettings](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html).

* [Fill]() - Gets or sets the fill color for the empty points.
* [Stroke]() - Gets or sets the stroke color for empty points.
* [StrokeWidth]() - Gets or sets the stroke thickness for empty points.
* [Fill](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html#Syncfusion_Maui_Toolkit_Charts_EmptyPointSettings_Fill) - Gets or sets the fill color for the empty points.
* [Stroke](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html#Syncfusion_Maui_Toolkit_Charts_EmptyPointSettings_Stroke) - Gets or sets the stroke color for empty points.
* [StrokeWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.EmptyPointSettings.html#Syncfusion_Maui_Toolkit_Charts_EmptyPointSettings_StrokeWidth) - Gets or sets the stroke thickness for empty points.

{% tabs %}

Expand All @@ -139,7 +137,6 @@ The [EmptyPointSettings]() property allows you to customize the appearance of em
<chart:SfCartesianChart>

.....

<chart:LineSeries ItemsSource="{Binding ProductSales}"
XBindingPath="Product"
YBindingPath="Sales"
Expand All @@ -152,6 +149,7 @@ The [EmptyPointSettings]() property allows you to customize the appearance of em
<chart:EmptyPointSettings Fill="Orange" StrokeWidth="2"/>
</chart:LineSeries.EmptyPointSettings>
</chart:LineSeries>

</chart:SfCartesianChart>

{% endhighlight %}
Expand All @@ -161,7 +159,6 @@ The [EmptyPointSettings]() property allows you to customize the appearance of em
SfCartesianChart chart = new SfCartesianChart();

.....

LineSeries series = new LineSeries()
{
ItemsSource = new ViewModel().ProductSales,
Expand Down Expand Up @@ -191,4 +188,4 @@ The [EmptyPointSettings]() property allows you to customize the appearance of em

![Customize EmptyPoints in MAUI Chart](EmptyPoints_images\Customize_EmptyPoints.png)

N> The EmptyPoints feature is not supported for Histogram and BoxAndWhisker series.
N> EmptyPoint support is not applicable for Histogram and BoxAndWhisker series.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 39 additions & 30 deletions maui-toolkit/Cartesian-Charts/FastScatter.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,55 +10,64 @@ Keywords: .net maui fast scatter chart, .net maui performance scatter chart, fas

# Fast Scatter in .NET MAUI Chart

The **FastScatterSeries** is a specialized scatter series designed to efficiently render a large number of data points. To render a fast scatter chart, create an instance of **FastScatterSeries**, and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html).
The [FastScatterSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastScatterSeries.html) is a specialized scatter series designed to efficiently render a large number of data points. To render a fast scatter chart, create an instance of [FastScatterSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastScatterSeries.html), and add it to the [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) collection property of [SfCartesianChart](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html).

The **PointHeight** and **PointWidth** properties in the FastScatterSeries control the height and width of scatter segments. The **Type** property allows you to change the rendering shape of the **FastScatterSeries**.
The [PointHeight](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastScatterSeries.html#Syncfusion_Maui_Toolkit_Charts_FastScatterSeries_PointHeight) and [PointWidth](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastScatterSeries.html#Syncfusion_Maui_Toolkit_Charts_FastScatterSeries_PointWidth) properties in the FastScatterSeries control the height and width of scatter segments. The [Type](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastScatterSeries.html#Syncfusion_Maui_Toolkit_Charts_FastScatterSeries_Type) property allows you to change the rendering shape of the [FastScatterSeries](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.FastScatterSeries.html).

N> The Cartesian chart has [Series](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.Charts.SfCartesianChart.html#Syncfusion_Maui_Toolkit_Charts_SfCartesianChart_Series) as its default content.

{% tabs %}

{% highlight xaml %}

<chart:SfCartesianChart>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart>
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>

<chart:FastScatterSeries ItemsSource="{Binding Data}"
XBindingPath="XValue"
YBindingPath="YValue"
PointHeight="8"
PointWidth="8"/>
</chart:SfCartesianChart>
<chart:FastScatterSeries ItemsSource="{Binding Data1}"
XBindingPath="XValue"
YBindingPath="YValue" />

<chart:FastScatterSeries ItemsSource="{Binding Data2}"
XBindingPath="XValue"
YBindingPath="YValue" />

</chart:SfCartesianChart>

{% endhighlight %}

{% highlight c# %}

SfCartesianChart chart = new SfCartesianChart();
SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis();
chart.XAxes.Add(primaryAxis);

NumericalAxis primaryAxis = new NumericalAxis();
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
FastScatterSeries scatterSeries1 = new FastScatterSeries
{
ItemsSource = new ViewModel().Data1,
XBindingPath = "XValue",
YBindingPath = "YValue",
};

FastScatterSeries series = new FastScatterSeries()
{
ItemsSource = new ViewModel().Data,
XBindingPath = "XValue",
YBindingPath = "YValue",
PointHeight = 8,
PointWidth = 8,
};
FastScatterSeries scatterSeries2 = new FastScatterSeries
{
ItemsSource = new ViewModel().Data2,
XBindingPath = "XValue",
YBindingPath = "XValue",
};

chart.Series.Add(series);
this.Content = chart;
chart.Series.Add(scatterSeries1);
chart.Series.Add(scatterSeries2);
this.Content = chart;

{% endhighlight %}

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.