Cant get the graph to display on the page

[Spotty]

I'm trying to display a graph when I click a button.  The code seems to execute but I dont see a graph appearing.    Anyone help with what I'm doing wrong or missing.

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

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

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

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

             xmlns:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             mc:Ignorable="d"

             x:Class="NavigationQuiz.TestPage">

    <ContentPage.Content>

        <StackLayout>

            <Label Text="Test Page" HorizontalOptions="CenterAndExpand" />

            

            <chart:SfChart    x:Name="DisplayChart">

            </chart:SfChart>

            

            

            <Button Text="Create" Clicked="Button2_Clicked"></Button>

           

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

        public ObservableCollection<Model1> Data { get; set; }

        private void Button2_Clicked(object sender, EventArgs e)

        {

            Data = new ObservableCollection<Model1>()

        {

            new Model1("Correct", 10),

            new Model1("Incorrect", 3),

            new Model1("Skipped", 5),

        };

            SfChart chart2 = new SfChart();

            chart2.Title = new ChartTitle() { Text = "Donut Chart" };

            DoughnutSeries doughnutSeries = new DoughnutSeries()

            {

                ItemsSource = Data,

                XBindingPath = "Month",

                YBindingPath = "Target"

            };

            chart2.Series.Add(doughnutSeries);

            DisplayChart = chart2;

        }

    public class Model1

    {

        public string Month { get; set; }

        public double Target { get; set; }

        public Model1(string xValue, double yValue)

        {

            Month = xValue;

            Target = yValue;

        }

    }

[Lavanya Anaimuthu]

Hi Spotty, 

 

Greetings from Syncfusion. 

 

We have validated your code snippet and you can resolve this issue by using the single chart and set binding to the ItemsSource property of the DoughnutSeries with PropertyChanged event as per the below code snippet. 

 

Code Snippet [Xaml]: 

 

<StackLayout > 

        <Label Text="Test Page" HorizontalOptions="CenterAndExpand" /> 

 

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

        </chart:SfChart> 

 

        <Button Text="Create" Clicked="Button2_Clicked"></Button> 

    </StackLayout> 

 

 

Code Snippet [C#]: 

 

DisplayChart.Title = new ChartTitle() { Text = "Donut Chart" }; 

DoughnutSeries doughnutSeries = new DoughnutSeries() 

{ 

     XBindingPath = "Month", 

     YBindingPath = "Target" 

}; 

DisplayChart.Series.Add(doughnutSeries); 

 

doughnutSeries.SetBinding(DoughnutSeries.ItemsSourceProperty, new Binding() { Source = this, Path = "Data" , Mode= BindingMode.TwoWay}); 

 

 

public ObservableCollection<Model1> Data 

   { 

            get { return data; } 

            set 

            { 

                data = value; 

                this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Data")); 

             } 

  } 

 

And we have prepared a sample based on your requirement and download the sample from below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151825/ze/151825_doughnut-636072524.zip  

 

Pleas let us know if need any further assistance on this. 

 

Thanks, 

Lavanya A. 

[Spotty]

You answered the question but actually didnt answer the question as to why the graph was not appearing.     Forget about the graph type.   Here's another example.

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

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

             xmlns:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             mc:Ignorable="d"

             x:Class="ChartSample.ListChart">

 

   

       

           

                VerticalOptions="CenterAndExpand" 

                HorizontalOptions="CenterAndExpand" />

 

                            

           

           

 

       

   

Code Fragment:

        public List MyProperty1 { get; set; }

        public List MyProperty2 { get; set; }

        public List MyProperty3 { get; set; }

private void Button_Clicked(object sender, EventArgs e)

        {        

            MyProperty1 = new List() { new Model1("A", 3), new Model1("B", 1), new Model1("C", 4) };

            StackingColumnSeries stackingColumnSeries1 = new StackingColumnSeries()

            {

                ItemsSource = MyProperty1,

                XBindingPath = "Item",

                YBindingPath = "Value"

            };

            MyProperty2 = new List() { new Model1("A", 5), new Model1("B", 2), new Model1("C", 1) };

            StackingColumnSeries stackingColumnSeries2 = new StackingColumnSeries()

            {

                ItemsSource = MyProperty2,

                XBindingPath = "Item",

                YBindingPath = "Value"

            };

            MyProperty3 = new List() { new Model1("A", 10), new Model1("B", 10), new Model1("C", 10) };

          StackingColumnSeries stackingColumnSeries3 = new StackingColumnSeries()

            {

                ItemsSource = MyProperty3,

                XBindingPath = "Item",

                YBindingPath = "Value"

            };

            //Chartx = chart;

            Chartx.IsVisible = true;

            Chartx.Series.Clear();

            Chartx.Series.Add(stackingColumnSeries1);

            Chartx.Series.Add(stackingColumnSeries2);

            Chartx.Series.Add(stackingColumnSeries3);

        }

I simply want to display the graph with the data when the button is clicked.    I've used MyProperty1,2,3 for the data but in reality I know what the values are and would like to simply specify the values directly ItemsSource = new List() { new Model1("A", 10), new Model1("B", 10), new Model1("C", 10) };

I don't get any errors, don't see any exceptions being thrown and dont see the graph display.      

So I guess the question really becomes - if I'm dynamically creating graphs in code -  what do I need to do to make the Page display the new graph.   Do I need to have Properties and binding when I can supply the values?     I'm looking more for why this is not happening and what I need to debug why something isn't displaying and what I need to do to remedy rather than merely an example where it works.

Like in the old phrase, you gave me a fish rather than teaching me how to fish.

[Devakumar Dhanapoosanam]

Hi Spotty, 

 

Thanks for the update. 

 

We have analyzed the provided code snippet and found that you were missed to add the chart Axis for the chart. We would like to let you know that for Cartesian series it is mandatory to set the PrimaryAxis and SecodnaryAxis for chart. Please refer the below code snippet for more details 

 

C#: 

Chartx.PrimaryAxis = new CategoryAxis(); 

Chartx.SecondaryAxis = new NumericalAxis(); 

 

XAML: 

<chart:SfChart x:Name="Chartx" HorizontalOptions="FillAndExpand"  

                           VerticalOptions="FillAndExpand"> 

         <chart:SfChart.PrimaryAxis> 

                <chart:CategoryAxis/> 

         </chart:SfChart.PrimaryAxis> 

         <chart:SfChart.SecondaryAxis> 

                <chart:NumericalAxis/> 

         </chart:SfChart.SecondaryAxis> 

</chart:SfChart> 

 

We have a sample based on provided code snippet and you can download the sample form the below link 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151825/ze/151825_sample1316913316.zip  

 

Note: Only for the accumulation series types like Pie and Doughnut series axis is not needed. 

 

UG: https://help.syncfusion.com/xamarin/charts/getting-started#initialize-chart  

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D