Xamarin Forms Create Horizontal Bar Graphs UltimateXF

Post Views: 564

Hi Friends,

In this post we will see how we can create horizontal bar graphs using Ultimate XF library. UltimateXF is a library for creating different graphs, charts and pie charts in Xamarin forms. It is available on Github and also you can add nuget package in your Xamarin form application.

Add Nuget package to your project:

Install-Package UltimateXF -Version 2.3.2

In your Project create a new Content page with name HorizontalBarchart.xaml and edit it as below:

HorizontalBarchart.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XamarinGraphsPieCharts.HorizontalBarchart"
Title="Horizontal Bar Chart"
xmlns:ultimateChart="clr-namespace:UltimateXF.Widget.Charts;assembly=UltimateXF">
<ContentPage.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Label Text="Line Chart in Xamarin Form"
HorizontalOptions="Start"
Margin="5"
VerticalOptions="Start" />

<Button Margin="5" Text="Load" HorizontalOptions="Start"
VerticalOptions="Start" x:Name="btnLoad" Clicked="BtnLoad_Clicked"/>
<ultimateChart:SupportHorizontalBarChartExtended x:Name="chart"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
DrawBorders="false" Legend="true"
Margin="5"
DoubleTapToZoomEnabled="false" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

This form contains the Horizontal Barchart from UltimateXF library and a button to load the same.

Edit the code file as below:

HorizontalBarchart.xaml.cs:

using System;
using System.Collections.Generic;
using UltimateXF.Widget.Charts.Models;
using UltimateXF.Widget.Charts.Models.BarChart;
using UltimateXF.Widget.Charts.Models.Formatters;
using UltimateXF.Widget.Charts.Models.Legend;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinGraphsPieCharts
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class HorizontalBarchart : ContentPage
{
String[] products = new string[] {"Mobiles","Tablets","Earphones","Headphones","Speakers",
"USB Cables","Laptops","Backcase","Screencover" };

public HorizontalBarchart ()
{
InitializeComponent ();
}

private void BtnLoad_Clicked(object sender, EventArgs e)
{
LoadChart();
}

public void LoadChart()
{
try
{
var entries = new List<EntryChart>();
var labels = new List<string>();
var legendsXF = new List<LegendXF>();

Random random = new Random();
for (int i = 0; i < 8; i++)
{
entries.Add(new EntryChart(i, random.Next(20)));
labels.Add(products[i]);
// legendsXF.Add(new LegendXF());
}

var dataSet4 = new BarDataSet(entries, "Products Summary")
{
Colors = new List<Color>(){
Color.FromHex("#3696e0"), Color.FromHex("#9958bc"),
Color.FromHex("#35ad54"), Color.FromHex("#2d3e52"),
Color.FromHex("#e55137"), Color.FromHex("#ea9940"),
Color.Black
},
};

var data4 = new BarChartData(new List<IBarDataSet>() { dataSet4 });

chart.ChartData = data4;
chart.DescriptionChart.Text = "Test label chart description";

chart.AxisLeft.DrawGridLines = false;
chart.AxisLeft.DrawAxisLine = true;
chart.AxisLeft.Enabled = true;

chart.AxisRight.DrawAxisLine = false;
chart.AxisRight.DrawGridLines = false;
chart.AxisRight.Enabled = false;

chart.XAxis.XAXISPosition = XAXISPosition.BOTTOM;
chart.XAxis.DrawGridLines = false;
chart.XAxis.AxisValueFormatter = new TextByIndexXAxisFormatter(labels);

}
catch(Exception ex)
{

}
}
}
}

Now run the app by setting the start page as our graph page in App.xaml.cs file
App.xaml.cs:

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace XamarinGraphsPieCharts
{
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new HorizontalBarchart());
}
}
}

Final screen: