SfChart - i'm having problem when it's shown

pnet1pnet1 USMember ✭✭✭
edited October 19 in Xamarin.Forms

I have one table that represents items sold in the store(ItensLib). And other table that represents the total sell(Liberacao). Well, i need to represent in the chart the Total and profit margin. So, in the Liberacao i have total sold, but is not possible to calculate the profit margin. In the table ItensLib, i can get sold total and profit margin, but i have a problem. If a sell there's 3 items, in the chart i'll have 3 slice representing the same profit margin. I need a chart(pieseries) that show a total and one slice(profit margin). The problem is in the ItensLib Table. In the table Liberacao there no is how to calculate the profit margin, only sold total. Someone can help me?

Best Answer

Answers

  • CaioLiberaliCaioLiberali USMember

    Hi,
    Could you share your code? It's hard to understand.

    Você é brasileiro? Nessa parte "If a sell there's 3 items..." em diante não consegui entender muito bem, com um código de exemplo ficaria mais simples.

  • pnet1pnet1 USMember ✭✭✭
    edited October 22

    @CaioLiberali, yes, i share my code, no problem. Below the chart code.

    private async void CriaChart(double id)
            {
                SfChart chart = new SfChart();
                DataService dataService = new DataService();
    
                try
                {
                    PieSeries pieSeries = new PieSeries()
                    {
                        ItemsSource = await dataService.GetDataGrid(id),
                        XBindingPath = "TotalVenda",
                        YBindingPath = "TotalLucro",
                        ExplodeIndex = 1,
                        ExplodeRadius = 10
                    };
    
                    pieSeries.DataMarker = new ChartDataMarker();
                    chart.Legend = new ChartLegend();
                    chart.Title.Text = "Gráfico da Venda";
                    pieSeries.Label = "TotalLucro";
                    pieSeries.DataMarker.LabelContent = LabelContent.Percentage;
                    chart.Series.Add(pieSeries);
    
                    this.Content = chart;
    
                }
                catch(Exception ex)
                {
                    string err = ex.Message;
                }
            }
    

    this is the screenshot of the chart, see that i have 100% and not 75% sale and 25% profit

    The service delivery me this

    {
        "IdOrcamento": 100030087,
        "TotalVenda": 1094,
        "TotalLucro": 273.71
    }
    
  • pnet1pnet1 USMember ✭✭✭

    Do i need to put some other value?

  • pnet1pnet1 USMember ✭✭✭

    Do i need to put some other value?

  • pnet1pnet1 USMember ✭✭✭

    I'm not getting to work. I don't know what is missing. Can anyone help me? I have two values, but the chart doesn't understand that these values are one belongs to other.

  • ChaseFlorellChaseFlorell CAInsider, University mod

    I'll be honest, Syncfusion has great support, and I definitely recommend reaching out to them directly.

  • pnet1pnet1 USMember ✭✭✭

    @ChaseFlorell, i opened an incident there. But, i'm seeking for solutions in various place, like here, stackoverflow and more. I need to show for my client. Is lack knowledge for me. But i already started them(syncfusion).

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    Have you exhausted the documentation, it's not bad (telerik take note if your reading).

    https://help.syncfusion.com/xamarin/sfchart/charttypes#pie-chart

  • pnet1pnet1 USMember ✭✭✭

    @NMackay, in this moment i'm reading and trying to do. As i have told before, i'm not getting to work. Is missing something that i don't know. It's seems that the chart doesn't recognise two values. But, i'm with the documentation opened and reading.

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    I'm guessing the piechart wants a collection to bind to but in your json your returning a single record.

    For example, this is what the Telerik piechart would expect in data

    https://docs.telerik.com/devtools/xamarin/controls/chart/types/chart-types-pie-chart

    I don't understand what your doing entirely but you might have to transform the return data into structure the chart will accept.

  • DirkWilhelmDirkWilhelm USMember ✭✭✭

    This is just guessing on my part here, but looking at the documentation i guess you need to set the ItemsSource to a list of values. At the moment, you are adding just one value, not two.

    Also, doesn't SyncFusion have an example app with sourceode? If yes, dig through that to see how they are adding data.

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    @DirkWilhelm said:
    This is just guessing on my part here, but looking at the documentation i guess you need to set the ItemsSource to a list of values. At the moment, you are adding just one value, not two.

    Also, doesn't SyncFusion have an example app with sourceode? If yes, dig through that to see how they are adding data.

    Spooky :smile:

  • pnet1pnet1 USMember ✭✭✭
    edited October 23

    Hi, @DirkWilhelm, you can be right. In the site of syncfusion, there is an example that creates an array. In my case i get this values by rest service and i guess that this is being my difficult. I'm gonna create a class like example by site and populate the properties from this class by rest service. I'm trying.

  • pnet1pnet1 USMember ✭✭✭

    @CaioLiberali, i'm to test and post the result.

  • pnet1pnet1 USMember ✭✭✭

    @CaioLiberali, your solution worked. Thanks.

  • pnet1pnet1 USMember ✭✭✭

    This way i got to solve the problem

    This is the model

    public class DataModelGrid
        {
            DataService dataService = new DataService();
            public List<LiberacaoItensGrid> itensGrid = new List<LiberacaoItensGrid>();
            public List<GeraGrafico> GeraChart { get; set; }
            public double IdOrcamento { get; set; }
            public double TotalVenda { get; set; }
            public double TotalLucro { get; set; }
            public DataModelGrid(double id)
            {
                GetService(id);
                GeraChart = new List<GeraGrafico>();
                GeraChart.Add(new GeraGrafico() { Assunto = "Vendas", Total = TotalVenda });
                GeraChart.Add(new GeraGrafico() { Assunto = "Lucro", Total = TotalLucro });
            }        
            public async void GetService(double id)
            {
                itensGrid = await dataService.GetDataGrid(id);
                foreach (var item in itensGrid)
                {
                    this.IdOrcamento = item.IdOrcamento;
                    this.TotalVenda = item.TotalVenda;
                    this.TotalLucro = item.TotalLucro;
                }
            }
            public class GeraGrafico
            {
                public string Assunto { get; set; }
                public double Total { get; set; }
            }
        }
    

    Here i get the service result

    public async Task<List<LiberacaoItensGrid>> GetDataGrid(double id)
            {
                try
                {
                    var client = new HttpClient();
                    string url = $"http://www.inetglobal.com.br/autorizador/api/getliberaitens/{id}";
                    var response = await client.GetStringAsync(url);
                    var itenslib = JsonConvert.DeserializeObject<List<LiberacaoItensGrid>>(response);
    
                    return itenslib.ToList();
                }
                catch (Exception ex)
                {
                    throw new Exception(ex.Message);
                }
            }
    

    and here i create and populate the chart

    [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class Grafico : ContentPage
        {
            SfChart chart = new SfChart();
            DataModelGrid dataModelGrid;
            public double IdOrcamento { get; set; }
    
            public Grafico(double _idorcamento)
            {
                InitializeComponent();
                CriaChart(_idorcamento);
            }
    
            private void CriaChart(double id)
            {
                SfChart chart = new SfChart();
                dataModelGrid = new DataModelGrid(id);
    
                try
                {
                    PieSeries pieSeries = new PieSeries()
                    {
                        ItemsSource = dataModelGrid.GeraChart, 
                        XBindingPath = "Assunto",
                        YBindingPath = "Total"
                        //ExplodeIndex = 1,
                        //ExplodeRadius = 10
                    };
    
                    pieSeries.DataMarker = new ChartDataMarker();
                    chart.Legend = new ChartLegend();
                    chart.Title.Text = "Gráfico da Venda";
                    pieSeries.Label = "Total";
                    pieSeries.DataMarker.LabelContent = LabelContent.Percentage;
                    chart.Series.Add(pieSeries);
    
                    this.Content = chart;
    
                }
                catch(Exception ex)
                {
                    string err = ex.Message;
                }
            }
        }
    
Sign In or Register to comment.