We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

HELP! data not showing on SFchart!

Thread ID:

Created:

Updated:

Platform:

Replies:

132964 Oct 1,2017 02:58 AM Oct 2,2017 09:42 AM Xamarin.Forms 1
loading
Tags: SfChart
Carlo Chan
Asked On October 1, 2017 02:58 AM

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 { getset; }
    }

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

    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 [Syncfusion]
Replied On October 2, 2017 09:42 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;