Chart - problem with one point - not seen

[Daniel]

Hi,

I used this documentation:

https://docs.telerik.com/devtools/maui/controls/chart/axes/axes-datetime-continuous-axis

[Daniel]

The code I used:

      <telerikChart:RadCartesianChart Grid.Row="2" Grid.Column="0">
                <telerikChart:RadCartesianChart.BindingContext>
                    <local:TotalFilesInProgressDataViewModel />
                </telerikChart:RadCartesianChart.BindingContext>
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate"
                                           MajorStepUnit="Second">
                 </telerikChart:DateTimeContinuousAxis>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis LabelFormat="N"
                                   Minimum="0"
                                   />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:LineSeries ValueBinding="Value"
                               CategoryBinding="Date"
                               ItemsSource="{Binding Data}" />
                </telerikChart:RadCartesianChart.Series>
            </telerikChart:RadCartesianChart>
      

[Didi]

Hello Daniel,

The behavior is expected as a line is drawn between two points. When you have one data point there isn't an option to draw a line. 

Solution:

Approach 1)

For example draw a point mark on the chart data point. so when you have one data item, a circle will be drawn to indicate that there is a value. I have attached the files from my project. The MAUIChartCustomization.zip contains 3 files the MainPage.xaml, MainPage.xaml.cs and MyCustomChart.cs 

And in order to draw the circle you will need a platform behavior. The PointRenderer.zip contains the PointRenderer.cs file which must be added inside the Platforms/Android folder

Approach 2) 

Replace the LineSeries with ScatterPointSeries: https://docs.telerik.com/devtools/maui/controls/chart/series/cartesian/scatter-point-series 

Regards,
Didi
Progress Telerik

[Daniel]

I used your second approach and I see no data and x axis is empty why ?

   <telerikChart:RadCartesianChart Grid.Row="2" Grid.Column="0" PaletteName="LightSelected">
                <telerikChart:RadCartesianChart.BindingContext>
                    <local:TotalFilesInProgressDataViewModel />
                </telerikChart:RadCartesianChart.BindingContext>
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate"
                                           MajorStepUnit="Second"/>
                    </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis LabelFormat="N"
                                   Minimum="0" />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:ScatterPointSeries 
                               XValueBinding="Date"
                               YValueBinding="Value"
                               ItemsSource="{Binding Data}" />
                </telerikChart:RadCartesianChart.Series>
            </telerikChart:RadCartesianChart>
       

 

[Daniel]

Attached screenshot

[Didi]

Hi Daniel, 

The ScatterPointSeries requires both axis to be Numerical axis. This is described in the documentation. 

The reason why there is no data displayed is because you are using the DateTimeAxis.  The options you have are to change the axis, or to use the first approach. 

[Daniel]

1.i go  to first option.

2.The XAML in UI nor complied:

xmlns:online="clr-namespace:MAUIChartCustomization.Platforms.Android"
 <online:MyCustomChart HandlerChanged="MyCustomChart_HandlerChanged">
                <telerikChart:RadCartesianChart.Palette>
                    <telerikChart:ChartPalette>
                        <telerikChart:ChartPalette.Entries>
                            <telerikChart:PaletteEntry FillColor="Red" StrokeColor="Red" />
                        </telerikChart:ChartPalette.Entries>
                    </telerikChart:ChartPalette>
                </telerikChart:RadCartesianChart.Palette>
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis LabelFitMode="MultiLine"
                                  PlotMode="BetweenTicks" />
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:LineSeries CategoryBinding="Category" 
                                ValueBinding="Value" 
                                DisplayName=" Date"
                                ItemsSource="{Binding TotalFilesInProgressDataSource}" /> 
                </telerikChart:RadCartesianChart.Series>
                <telerikChart:RadCartesianChart.ChartBehaviors>
                    <telerikChart:ChartTooltipBehavior />
                </telerikChart:RadCartesianChart.ChartBehaviors>
            </online:MyCustomChart>

3.Code behind also not complied:

private void MyCustomChart_HandlerChanged(object sender, EventArgs e)
    {
        var handler = ((MyCustomChart)sender).Handler;
        if (handler != null)
        {
#if ANDROID

            var nativeRenderer = handler.NativeView as Telerik.XamarinForms.ChartRenderer.Android.RadExtendedCartesianChartView;
            if (nativeRenderer != null)
            {
                for (int i = 0; i < nativeRenderer.Series.Size(); i++)
                {
                    Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries lineSeries = (Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries)nativeRenderer.Series.Get(i) as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries;

                    lineSeries.DataPointRenderer = new Platforms.Android.PointRenderer(lineSeries);
                }
            }
#endif
        }
    }

4.I put the PointRenderer.cs file inside the Platforms/Android folder and it complied.

What do I miss ?

[Didi]

The PointRenderer.cs file using the following namespace: 

namespace MAUIChartCustomization.Platforms.Android

You need to replace the MAUIChartCustomization with your project name. 

or use the MAUIChartCustomization inside the MyCustomChart_HandlerChanged event:

for (int i = 0; i < nativeRenderer.Series.Size(); i++)
                    {
                        Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries lineSeries = (Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries)nativeRenderer.Series.Get(i) as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries;
                        lineSeries.DataPointRenderer = new MAUIChartCustomization.Platforms.Android.PointRenderer(lineSeries);
                    }

 

I assume the issue you have is related to the namespace usage.

[Daniel]

1. I fixed the namespace:

namespace AutomationClient.MAUI.Platforms.Android
{
    public class PointRenderer : Java.Lang.Object, global::Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Pointrenderers.IChartDataPointRenderer

2.XAML

  xmlns:online="clr-namespace:AutomationClient.MAUI"

The xaml not complied what do I miss?

[Didi]

Based on the attached image you have this setup: 

<online: MyCustomChart_HandlerChanged

you missed the MyCustomChart instance:

<online:MyCustomChart MyCustomChart_HandlerChanged

Please review all files and information provided and make sure you have setup them correctly.

 

[Daniel]

I do not have this option with intelicense.

[Daniel]

I build the sample code in separate project.

I want to see also points like this that the value will be clear.

[Daniel]

Hi Didi,

I tried to use the sample above into my project but I don't see the value see screenshot.

The other code is same like in sample.

        <customChart:DashboardViewCustomChart Grid.Row="3" Grid.Column="0" PaletteName="LightSelected" Margin="10" HandlerChanged="DashboardViewCustomChart_HandlerChanged">
                <telerikChart:RadCartesianChart.Palette>
                    <telerikChart:ChartPalette>
                        <telerikChart:ChartPalette.Entries>
                            <telerikChart:PaletteEntry FillColor="Red" StrokeColor="Red" />
                        </telerikChart:ChartPalette.Entries>
                    </telerikChart:ChartPalette>
                </telerikChart:RadCartesianChart.Palette>
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:DateTimeContinuousAxis LabelFitMode="Rotate"
                                           MajorStepUnit="Day" PlotMode="BetweenTicks"/>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:NumericalAxis 
                        LabelFormat="N0" Minimum="0" />
                </telerikChart:RadCartesianChart.VerticalAxis>
                <telerikChart:RadCartesianChart.Series>
                    <telerikChart:LineSeries 
                               CategoryBinding="Date"
                               ValueBinding="Value"
                               ItemsSource="{Binding TotalFilesInProgressDataSource}" />
                </telerikChart:RadCartesianChart.Series>
                <telerikChart:RadCartesianChart.Grid>
                    <telerikChart:CartesianChartGrid StripLinesVisibility="X"
                                       MajorLinesVisibility="XY"
                                       MajorLineColor="LightGray"
                                       MajorLineThickness="3" />
                </telerikChart:RadCartesianChart.Grid>
            </customChart:DashboardViewCustomChart>
   

 

[Didi]

Hi Daniel, 

The provided solution was for iOS and Android. From the images you have sent it seems you want to display the Chart point mark on Windows. I will need some additional time to check how this scenario can be applied on Windows.

[Daniel]

Hi,

I need window.

It seem working in my side .It should work for window also.

Another thing.

when i build project I got this error, after second build it disappeared why ?

Severity	Code	Description	Project	File	Line	Suppression State
Error	CS0246	The type or namespace name 'Platforms' could not be found (are you missing a using directive or an assembly reference?)	AutomationClient.MAUI (net6.0-android)	D:\Applications\AutomationClient\AutomationClient.MAUI\Views\DashboardView.xaml.cs	28	Active

[Didi]

As maui is still in preview, there are changes in the namespaces, and naming. 

1) NativeView is replaced with PlatformView. 

2) Platforms is in a new namespace, in my case in MauiApp3.

3) Approach for Windows: 

            var nativeChart = handler.PlatformView as Telerik.UI.Xaml.Controls.Chart.RadCartesianChart;
            if (nativeChart != null)
            {
                for (int i = 0; i < nativeChart.Series.Count; i++)
                {
                    Telerik.UI.Xaml.Controls.Chart.LineSeries lineSeries = nativeChart.Series[i] as Telerik.UI.Xaml.Controls.Chart.LineSeries;
                    if (lineSeries != null)
                    {
                        var customTemplate = MauiWinUIApplication.Current.Resources["CustomDataPointTemplate"] as Microsoft.UI.Xaml.DataTemplate;
                        lineSeries.SetValue(Telerik.UI.Xaml.Controls.Chart.LineSeries.PointTemplateProperty, customTemplate);
                    }
                }
            }

and the CustomDataPointTemplate defined in the Windows folder -App.xaml file

    <maui:MauiWinUIApplication.Resources>
        <ResourceDictionary>
            <DataTemplate>
                <Ellipse Width="10" Height="10" Fill="Red" />
            </DataTemplate>
        </ResourceDictionary>
    </maui:MauiWinUIApplication.Resources>

Here is the complete MainPage.xaml.cs file on my side: 

using System.Collections.ObjectModel;
using Telerik.XamarinForms.Chart;
using Microsoft.Maui;

namespace MauiApp3;

public partial class MainPage : ContentPage
{
	public MainPage()
	{
		InitializeComponent();
        this.chart.HandlerChanged += Chart_HandlerChanged;

        var handler = this.chart.Handler;
	}

    private void Chart_HandlerChanged(object sender, EventArgs e)
    {
        var handler = ((RadCartesianChart)sender).Handler;

        if (handler != null) 
        {
#if WINDOWS


            var nativeChart = handler.PlatformView as Telerik.UI.Xaml.Controls.Chart.RadCartesianChart;
            if (nativeChart != null)
            {
                for (int i = 0; i < nativeChart.Series.Count; i++)
                {
                    Telerik.UI.Xaml.Controls.Chart.LineSeries lineSeries = nativeChart.Series[i] as Telerik.UI.Xaml.Controls.Chart.LineSeries;
                    if (lineSeries != null)
                    {
                        var customTemplate = MauiWinUIApplication.Current.Resources["CustomDataPointTemplate"] as Microsoft.UI.Xaml.DataTemplate;
                        lineSeries.SetValue(Telerik.UI.Xaml.Controls.Chart.LineSeries.PointTemplateProperty, customTemplate);
                    }
                }
            }

#elif ANDROID
            var nativeRenderer = handler.PlatformView as Telerik.XamarinForms.ChartRenderer.Android.RadExtendedCartesianChartView;
            if (nativeRenderer != null)
            {
                var series = nativeRenderer.Series.ToArray();

                for (int i = 0; i < nativeRenderer.Series.Size(); i++)
                {
                    Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries lineSeries = (Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries)nativeRenderer.Series.Get(i) as Com.Telerik.Widget.Chart.Visualization.CartesianChart.Series.Categorical.LineSeries;

                     lineSeries.DataPointRenderer = new MauiApp3.Platforms.Android.PointRenderer(lineSeries);
                }
            }
#endif
        }

    }
}

[Daniel]

Didi,

First thank a lot.

Please see the last point is cut.

[Didi]

Hi Daniel,

This is expected as you draw additional element to the series and it goes outside of the chart area..