CODEWITHSUNDEEP
c#chartsxamarin.androidvisual-studio-2017
Chindara
Chindara

Reputation: 138

Xamarin Android Microcharts with Fragments

I'm trying to add a chart to my Xamarin Android application (Visual Studio 2017) I followed this repository MicroCharts, Post

I'm using a Navigation Drawer in my application. So I'm using fragments to add my code. Above mentioned repository is for Xamarin.Forms Cross Platform. But I'm just using Xamarin.Android.

I have a Xamarin.Android repository here. Any help would be highly appreciated. Thanks

Upvotes: 0

Views: 1681

Answers (1)

York Shen
York Shen

Reputation: 9084

You could refer to this : https://github.com/aloisdeniel/Microcharts

Here is a simple demo about how to use BarChart in your Fragment :

First, Add it to your UI, MGradesView.axml :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
    <microcharts.droid.ChartView
        android:id="@+id/chartView"
        android:layout_width="match_parent"
        android:layout_height="160dp" />
  </LinearLayout>
</ScrollView>

Second, your chart will need a set of data entries :

var entries = new[]
{
    new Entry(200)
    {
        Label = "January",
        ValueLabel = "200",
        Color = SKColor.Parse("#266489")
    },
    new Entry(400)
    {
        Label = "February",
        ValueLabel = "400",
        Color = SKColor.Parse("#68B9C0")
    },
    new Entry(-100)
    {
        Label = "March",
        ValueLabel = "-100",
        Color = SKColor.Parse("#90D585")
    }
};

Third, instanciate a chart from those entries :

var chart = new BarChart() { Entries = entries };

Modify your MGradeFragment.cs like this :

public class MGradeFragment : Fragment
{
    public override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
    }

    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        SetHasOptionsMenu(true);

        View view = LayoutInflater.From(Activity).Inflate(Resource.Layout.MGradesView, null);

        var entries = new[]
        {
            new Entry(200)
            {
                Label = "January",
                ValueLabel = "200",
                Color = SKColor.Parse("#266489")
            },
            new Entry(400)
            {
                Label = "February",
                ValueLabel = "400",
                Color = SKColor.Parse("#68B9C0")
            },
            new Entry(-100)
            {
                Label = "March",
                ValueLabel = "-100",
                Color = SKColor.Parse("#90D585")
            }
        };
        var chart = new BarChart() { Entries = entries };

        var chartView = view.FindViewById<ChartView>(Resource.Id.chartView);
        chartView.Chart = chart;

        return view;
    }

    public override void OnCreateOptionsMenu(IMenu menu, MenuInflater inflater)
    {
        inflater.Inflate(Resource.Menu.menu_MGradeToolbar, menu);
    }
}

Upvotes: 1

Related Questions