HELP! data not showing on SFchart!

[Carlo Chan]

Hey, 

So ive spent days and hours trying to just get my data to show on a sfchart however either it wont display anything on the page or it just displays the axis and not the actual data, 

- i am deserializing JSON data binding it to the sf chart 

I have created Tabs that either display the graph in XML code or C# code yet i have not gotten either to work.

If you could please let me know what im doing wrong i will try copy and paste as much of the code on here 

Xaml Main Page 

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage  xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms" xmlns:local="clr-namespace:Drip" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  x:Class="Drip.DripPage">


    <ContentPage Title= "Data Log">
                 <StackLayout>
                     <ListView x:Name="postsListView" HasUnevenRows="true" IsPullToRefreshEnabled="true" Refreshing='Handle_Refreshing'>
                         <ListView.Header>
                             <StackLayout  Orientation= "Horizontal" Padding="20,10,0,10" BackgroundColor="#88CCF1">
                                <Label Text="Entries" VerticalTextAlignment="Center" FontAttributes="Bold" TextColor="White"/>
                             <StackLayout HorizontalOptions="FillAndExpand">
                                 <Label Text="Litres Used " HorizontalTextAlignment="Center" FontAttributes="Bold" TextColor="White"/>
                             </StackLayout>
                                 <Label Text="Date/Time  " VerticalTextAlignment="Center" FontAttributes="Bold" TextColor="White"/>
                             </StackLayout>
                         </ListView.Header>
                     <ListView.ItemTemplate>
                         <DataTemplate >
                            <ViewCell>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width= "0.5*"/>
                                         <ColumnDefinition Width="0.5*"/>
                                         <ColumnDefinition Width="0.5*"/>                             
                                    </Grid.ColumnDefinitions>
                                <Label Text="{Binding Entry_id}" VerticalTextAlignment="Center" />
                                <Label Text="{Binding Field1}" Grid.Column="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                                <Label Text="{Binding Created_at}" Grid.Column="2" HorizontalTextAlignment="End" VerticalTextAlignment="Center"/>
                               </Grid>
                            </ViewCell>
                        </DataTemplate>
                     </ListView.ItemTemplate>
                 </ListView>
            </StackLayout>
  </ContentPage>


    <local:MyPage Title="Chart"/>
 

    <ContentPage Title= "Guage">

    <ContentPage.BindingContext>
       
        <local:RootObject></local:RootObject>
   
    </ContentPage.BindingContext>
     
     <chart:SfChart>
   
   <chart:SfChart.PrimaryAxis>
    
        <chart:CategoryAxis>

            <chart:CategoryAxis.Title>

                  <chart:ChartAxisTitle Text="Date"> </chart:ChartAxisTitle>

            </chart:CategoryAxis.Title>

         </chart:CategoryAxis>
   
   </chart:SfChart.PrimaryAxis>

   <chart:SfChart.SecondaryAxis>
  
       <chart:NumericalAxis>
            
           <chart:NumericalAxis.Title>
           
                 <chart:ChartAxisTitle Text="Amount of Water Used (in Litres)"></chart:ChartAxisTitle>
           
          </chart:NumericalAxis.Title>      
       
      </chart:NumericalAxis>   

     </chart:SfChart.SecondaryAxis>
    
      <chart:SfChart.Series>
              
         <chart:ColumnSeries ItemsSource="{Binding Feeds}" XBindingPath="Created_at" YBindingPath="Field1">
         
         </chart:ColumnSeries>
    
      </chart:SfChart.Series>

 </chart:SfChart>





        
    </ContentPage>
</TabbedPage>

Code behind Main Page

using System.Net.Http;
using Newtonsoft.Json;
using Xamarin.Forms;
using System.Collections.ObjectModel;


using System.Collections;
using System.Linq;
using System.Linq.Expressions;
using System.Text;
using System.Threading.Tasks;


namespace Drip
{


    public partial class DripPage : TabbedPage
    {
        void Handle_Refreshing(object sender, System.EventArgs e)
        {
            postsListView.ItemsSource = _data;
            postsListView.EndRefresh();
        }

        private const string Url = "https://thingspeak.com/channels/301726/field/1.json";
        private HttpClient _client = new HttpClient();
        private ObservableCollection<Feed> _data;

    
        public DripPage()
        {
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            var content = await _client.GetStringAsync(Url);
            var data = JsonConvert.DeserializeObject<RootObject>(content);

            _data = new ObservableCollection<Feed>(data.Feeds.OrderByDescending(x => x.Created_at));
            postsListView.ItemsSource = _data;

        

    
            base.OnAppearing();
        }

    }
} 

c# splineSeries chart on code behind then referenced in main xaml

sing Newtonsoft.Json;
using Syncfusion.SfChart.XForms;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Drip;

namespace ChartGettingStarted
{

    public class RootObject
    {

        public List<Feed> Feeds { get; set; }
    }

    public class Feed
    {
        public DateTime Created_at { get; set; }
        public int Entry_id { get; set; }
        public decimal Field1 { get; set; }
    }

    public class DripPage : ContentPage
    {
        private const string Url = "https://thingspeak.com/channels/301726/field/1.json";
        private HttpClient _client = new HttpClient();
        private ObservableCollection<Feed> _data;


        SfChart chart;
        SplineSeries series;

        public DripPage()
        {
            chart = new SfChart();

            CategoryAxis primaryAxis = new CategoryAxis();

            chart.PrimaryAxis = primaryAxis;

            //Initializing Secondary Axis
            NumericalAxis secondaryAxis = new NumericalAxis();

            chart.SecondaryAxis = secondaryAxis;
            series = new SplineSeries();
            Content = chart;
        }

        protected override async void OnAppearing()
        {
            var content = await _client.GetStringAsync(Url);
            var data = JsonConvert.DeserializeObject<RootObject>(content);
            _data = new ObservableCollection<Feed>(data.Feeds);

            series.ItemsSource = _data;
            series.XBindingPath = "Created_at";
            series.YBindingPath = "Field1";
            chart.Series.Add(series);

            base.OnAppearing();
        }


    }
}

 

[Yuvaraj Palanisamy]

Hi Carlo chan,

Thank for contacting Syncfusion support.

We have analyzed your code snippet, and you are missing to set the collection values for binding context instance and also not inherited by INotifyPropertyChanged interface of RootObject Class. We have modified the sample as per your requirement. Please find the attached sample from the below link.

Sample : http://www.syncfusion.com/downloads/support/forum/132944/ze/ChartGettingStarted1623762518  

Regards,
Yuvaraj