Chart - problem with one point - not seen

1 Answer 217 Views

Chart

Daniel

commented on 08 Mar 2022, 12:25 PM

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>

1 Answer, 1 is accepted

answered on 11 Mar 2022, 12:18 PM

PointRenderer.zip

MAUIChartCustomization.zip

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Daniel

commented on 13 Mar 2022, 07:47 AM

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

commented on 13 Mar 2022, 07:52 AM

1.PNG

Attached screenshot

Didi

commented on 14 Mar 2022, 07:06 AM

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

commented on 14 Mar 2022, 08:46 AM

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

commented on 14 Mar 2022, 12:35 PM

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

commented on 14 Mar 2022, 01:20 PM

1.PNG

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

commented on 14 Mar 2022, 01:34 PM

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

commented on 14 Mar 2022, 01:41 PM | edited

1.PNG

I do not have this option with intelicense.

Daniel

commented on 04 Apr 2022, 06:34 AM

Test1.zip

I build the sample code in separate project.

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

Daniel

commented on 14 Apr 2022, 02:18 PM

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

commented on 25 Apr 2022, 06:18 AM

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

commented on 26 Apr 2022, 05:25 AM

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

commented on 29 Apr 2022, 09:09 AM

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

commented on 01 May 2022, 07:36 AM

Didi,

First thank a lot.

Please see the last point is cut.

Didi

commented on 05 May 2022, 05:42 AM

Hi Daniel,

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Docs & Resources

Productivity and Design Tools

Chart - problem with one point - not seen

1 Answer, 1 is accepted