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();
}
}
}
