CODEWITHSUNDEEP
chartsxamarin.formsbar-chartlinechart
notarealgreal
notarealgreal

Reputation: 686

Bar/Linear chart with multiple entries in Xamarin Forms

I must implement a linear and a bar chart whit multiple data entries in Xamarin.Forms, I have seen multiple plugins like Microcharts but I think that doesn't afford multiple entries and Syncfusion which affords it but is not free. Any free plugin to do it?

Example of the charts:

Bar Chart

Linear

Upvotes: 0

Views: 2006

Answers (1)

Leon Lu
Leon Lu

Reputation: 9244

Based on your demand, You could use PlotView to achieve that .Before you used it, please refer to following link to initialize the OxyPlot,

http://docs.oxyplot.org/en/latest/getting-started/hello-xamarin-forms.html

I wrote a demo, you could refer to it.

Bar Chart screenshot

enter image description here

Bar Chart code

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class BarGraphsDemo : ContentPage
{
    private PlotView _opv = new PlotView();
    public BarGraphsDemo ()
{
InitializeComponent ();

        var plotModel = new PlotModel { Title = "OxyPlot Demo" };
        CategoryAxis xaxis = new CategoryAxis();
        xaxis.Position = AxisPosition.Bottom;
        xaxis.MajorGridlineStyle = LineStyle.Solid;
        xaxis.MinorGridlineStyle = LineStyle.Dot;
        xaxis.Labels.Add("2/2010");
        xaxis.Labels.Add("2/2011");
        xaxis.Labels.Add("2/2012");
        xaxis.Labels.Add("2/2013");

        ColumnSeries s1 = new ColumnSeries();
        s1.IsStacked = false;
        s1.Items.Add(new ColumnItem(1.2));
        s1.Items.Add(new ColumnItem(1.6));
        s1.Items.Add(new ColumnItem(1.4));
        s1.Items.Add(new ColumnItem(1.5));

        ColumnSeries s2 = new ColumnSeries();
        s2.IsStacked = false;
        s2.Items.Add(new ColumnItem(1.5));
        s2.Items.Add(new ColumnItem(1.6));
        s2.Items.Add(new ColumnItem(1.1));
        s2.Items.Add(new ColumnItem(1.2));

        ColumnSeries s3 = new ColumnSeries();
        s3.IsStacked = false;
        s3.Items.Add(new ColumnItem(1.2));
        s3.Items.Add(new ColumnItem(1.3));
        s3.Items.Add(new ColumnItem(1.4));
        s3.Items.Add(new ColumnItem(1.5));

        ColumnSeries s4 = new ColumnSeries();
        s4.IsStacked = false;
        s4.Items.Add(new ColumnItem(1.5));
        s4.Items.Add(new ColumnItem(1.4));
        s4.Items.Add(new ColumnItem(1.3));
        s4.Items.Add(new ColumnItem(1.2));



        plotModel.Series.Add(s1);
        plotModel.Series.Add(s2);
        plotModel.Series.Add(s3);
        plotModel.Series.Add(s4);

        plotModel.Axes.Add(xaxis);
        plotModel.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Minimum = 0, Maximum = 1.6 });

        _opv.Model = plotModel;
        Content = _opv;
    }

} Linear screenshot

enter image description here

Linear code

   public partial class MainPage : ContentPage
{
    private PlotView _opv = new PlotView();

    public MainPage()
    {
        InitializeComponent();

        var Points = new List<DataPoint>
        {
            //DateTimeAxis.ToDouble(new DateTime(1989, 10, 3)), 8)
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 0.75),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 0.75)
        };
        var Points2 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.0),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.15),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.0),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 0.9),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 0.9)
        };
        var Points3 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.5),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.6),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.41),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 1.42),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 1.42)
        };
        var Points4 = new List<DataPoint>
        {
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 10, 30)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 11, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2018, 12, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 1)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 15)), 1.57),
            new DataPoint(DateTimeAxis.ToDouble(new DateTime(2019, 1, 31)), 1.57)
        };


        var m = new PlotModel();
        m.PlotType = PlotType.XY;
        m.InvalidatePlot(false);

        m.Title = "hello oxy";


        var startDate = DateTime.Now.AddMonths(-3);
        var endDate = DateTime.Now;

        var minValue = DateTimeAxis.ToDouble(startDate);
        var maxValue = DateTimeAxis.ToDouble(endDate);
        m.Axes.Add(new DateTimeAxis { Position = AxisPosition.Bottom, Minimum = minValue, Maximum = maxValue, StringFormat = "MMM/yyyy" });
        m.Axes.Add(new LinearAxis { Position = AxisPosition.Left, Minimum = 0, Maximum = 1.6 });
        m.ResetAllAxes();

        var ls1 = new LineSeries();
        var ls2 = new LineSeries();
        var ls3 = new LineSeries();
        var ls4 = new LineSeries();
        //MarkerType = OxyPlot.MarkerType.Circle,
        ls1.MarkerType = OxyPlot.MarkerType.Circle;
        ls2.MarkerType = OxyPlot.MarkerType.Circle;
        ls3.MarkerType = OxyPlot.MarkerType.Circle;
        ls4.MarkerType = OxyPlot.MarkerType.Circle;
        ls1.ItemsSource = Points;
        ls2.ItemsSource = Points2;
        ls3.ItemsSource = Points3;
        ls4.ItemsSource = Points4;

        m.Series.Add(ls1);
        m.Series.Add(ls2);
        m.Series.Add(ls3);
        m.Series.Add(ls4);
        _opv = new PlotView
        {
            WidthRequest = 300,
            HeightRequest = 300,
            BackgroundColor = Color.White,

        };
        _opv.Model = m;
        Content = _opv;
    }

If you want to know more details about PlotView, you could refer to this link. http://docs.oxyplot.org/en/latest/introduction/index.html

Upvotes: 2

Related Questions