Area Chart is not displaying the series

[Eduardo Luczinski Junior]

Hi!

I can’t understand why my area chart is not displaying the series. As you can see from the image below, it seems that the binding objects are initialized properly. Do you have any idea what I am missing?

Thank you very much!

Regards!

The View:

 <?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="MyApp.Modules.PortfolioDashboard.ModalCharts.EvolChartView"

             xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms" 

             Shell.PresentationMode="ModalAnimated" 

             xmlns:local="clr-namespace:MyApp.Modules.PortfolioDashboard.ModalCharts"

             

             xmlns:models="clr-namespace:MyApp.Common.Data.LocalEntities"

             xmlns:viewmodels="clr-namespace:MyApp.Modules.PortfolioDashboard.ModalCharts"

             x:DataType="viewmodels:EvolChartViewModel"

             >

    <ContentPage.Content>

        <StackLayout>

            <chart:SfChart x:Name="Chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                

                <chart:SfChart.BindingContext>

                    <local:EvolChartViewModel />

                </chart:SfChart.BindingContext>

                <chart:SfChart.Title>

                    <chart:ChartTitle Text="Evolução da Carteira" />

                </chart:SfChart.Title>

                <chart:SfChart.PrimaryAxis>

                    <chart:CategoryAxis ShowTrackballInfo="True" EdgeLabelsDrawingMode="Shift" Interval="3" ShowMajorGridLines="false">

                        <chart:CategoryAxis.MajorTickStyle>

                            <chart:ChartAxisTickStyle TickSize="8"/>

                        </chart:CategoryAxis.MajorTickStyle>

                    </chart:CategoryAxis>

                </chart:SfChart.PrimaryAxis>

                <chart:SfChart.SecondaryAxis>

                    <chart:NumericalAxis Maximum="100000" Minimum="1000" Interval="10000">

                        <chart:NumericalAxis.Title>

                            <chart:ChartAxisTitle Text="Valor em Reais" />

                        </chart:NumericalAxis.Title>

                        <chart:NumericalAxis.LabelStyle>

                            <chart:ChartAxisLabelStyle x:Name="secondaryAxisLabelStyle"/>

                        </chart:NumericalAxis.LabelStyle>

                        <chart:NumericalAxis.AxisLineStyle>

                            <chart:ChartLineStyle StrokeWidth="0">

                            </chart:ChartLineStyle>

                        </chart:NumericalAxis.AxisLineStyle>

                        <chart:NumericalAxis.MajorTickStyle>

                            <chart:ChartAxisTickStyle TickSize="0" />

                        </chart:NumericalAxis.MajorTickStyle>

                    </chart:NumericalAxis>

                </chart:SfChart.SecondaryAxis>

                <chart:SfChart.Legend>

                    <chart:ChartLegend DockPosition="Bottom" ToggleSeriesVisibility="True" IconWidth="14" IconHeight="14" />

                </chart:SfChart.Legend>

                <chart:SfChart.ColorModel>

                    <chart:ChartColorModel Palette="Natural" />

                </chart:SfChart.ColorModel>

                <chart:SfChart.Series>

                    <chart:AreaSeries Opacity="0.6" ItemsSource="{Binding AreaData2}" Label="Saldo bruto" Color="#586F6A" LegendIcon="SeriesType" XBindingPath="BenchMarkName" YBindingPath="BenchMarkValue" EnableAnimation="true" EnableTooltip="true"/>

                    <chart:AreaSeries Opacity="0.6" ItemsSource="{Binding AreaData1}" Label="Valor aplicado" Color="#B2F55B" LegendIcon="SeriesType" XBindingPath="BenchMarkName" YBindingPath="BenchMarkValue" EnableAnimation="true" EnableTooltip="true"/>

                </chart:SfChart.Series>

                <chart:SfChart.ChartBehaviors>

                    <chart:ChartTrackballBehavior x:Name="chartTrackball" ActivationMode="TouchMove">

                        <chart:ChartTrackballBehavior.LabelStyle>

                            <chart:ChartTrackballLabelStyle BackgroundColor="#404041" />

                        </chart:ChartTrackballBehavior.LabelStyle>

                    </chart:ChartTrackballBehavior>

                </chart:SfChart.ChartBehaviors>

            </chart:SfChart>

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

The result: 

When checking the Data Container objects in the debugger, everything seems ok. 

 

Attachment: sample_c7457fac.zip

[Yuvaraj Palanisamy]

Hi Eduardo Luczinski, 

 

Greetings from Syncfusion. 

 

We have prepared the Xamarin.Forms shell application along with your provided code example and we can resolve the reported problem “Area series not rendered” by removing the setting of binding context for more than once and Calling OnPropertyChanged() in ViewModel property setter. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165097/ze/ChartSample_Shell-2036595297  

 

Output: 

 

 

Regards, 

Yuvaraj 

[Eduardo Luczinski Junior]

Thank you very much! 

You guys from Syncfusion and Syncfusion products are awesome!!!

[Yuvaraj Palanisamy]

Hi Eduardo Luczinski, 

 

Thank you for your update. We are glad to know that the solution works at your end. 

 

Regards, 

Yuvaraj 

[Eduardo Luczinski Junior]

I would like to do one more question. When we call InitializeAsync from Chart.Binding, the view model does not recognize the query parameter that is passed from calling page. In the normal BindingContext the parameter is recognized but the chart series does not render. Is there any way to use Chart.Binding (Chart.BindingContext as EvolChartViewModel).InitializeAsync(null) and still have the query parameters?

protected override async void OnAppearing()

        {

            base.OnAppearing();

            //await (BindingContext as EvolChartViewModel).InitializeAsync(null); //The query parameter works but the chart series does not render.

            await (Chart.BindingContext as EvolChartViewModel).InitializeAsync(null); //The chart series render but query parameter does not work

        }

This is how I'm passing the parameter: 

await Shell.Current.GoToAsync($"viewEvolChart?id={Id}");

[Yuvaraj Palanisamy]

Hi Eduardo Luczinski, 

 

You can resolve this by removal of setting BindingContext for Chart. Because of you are setting BindingContent for both Chart and it’s ContentPage. Hence, series is not rendered when we give ContentPage BindingContent Initialize. Please remove the BindingContent setting for Chart as like below code example. 

 

EvolChartView.xaml 

<chart:SfChart x:Name="Chart"  

                HorizontalOptions="FillAndExpand"  

                VerticalOptions="FillAndExpand"> 

 

     <chart:SfChart.BindingContext> 

         <local:EvolChartViewModel /> 

     </chart:SfChart.BindingContext> 

 

     <chart:SfChart.Title> 

 

. . . 

 

</chart:SfChart> 

 

EvolChartView.xaml.cs 

 

public EvolChartView() 

{ 

    InitializeComponent(); 

 

    BindingContext = new ViewModels.EvolChartViewModel(); 

} 

 

protected override async void OnAppearing() 

{ 

    base.OnAppearing(); 

    await(BindingContext as EvolChartViewModel).InitializeAsync(null); 

} 

 

Regards, 

Yuvaraj 

[Eduardo Luczinski Junior]

I got it. 

Thanks again!

Regards,

Eduardo Luczinski. 

[Yuvaraj Palanisamy]

Hi Eduardo Luczinski, 

 

Thank you for your update. We are glad to know that the solution works at your end. 

 

Regards,
Yuvaraj.