{"id":19099468,"url":"https://github.com/TheCodeTraveler/CreateInteractiveCharts","last_synced_at":"2025-09-08T04:31:47.244Z","repository":{"id":68230992,"uuid":"237306935","full_name":"TheCodeTraveler/CreateInteractiveCharts","owner":"TheCodeTraveler","description":"An iOS and Android sample app written in Xamarin.Forms, demonstrating how to create interactive charts using Syncfusion","archived":false,"fork":false,"pushed_at":"2021-06-30T02:02:16.000Z","size":384,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-07T04:39:10.716Z","etag":null,"topics":["charts","syncfusion","walkthrough","xamarin","xamarin-android","xamarin-forms","xamarin-ios"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheCodeTraveler.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-30T21:13:34.000Z","updated_at":"2021-06-30T02:02:19.000Z","dependencies_parsed_at":"2023-04-11T21:46:54.404Z","dependency_job_id":null,"html_url":"https://github.com/TheCodeTraveler/CreateInteractiveCharts","commit_stats":null,"previous_names":["thecodetraveler/createinteractivecharts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TheCodeTraveler/CreateInteractiveCharts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FCreateInteractiveCharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FCreateInteractiveCharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FCreateInteractiveCharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FCreateInteractiveCharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheCodeTraveler","download_url":"https://codeload.github.com/TheCodeTraveler/CreateInteractiveCharts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FCreateInteractiveCharts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274134644,"owners_count":25228198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","syncfusion","walkthrough","xamarin","xamarin-android","xamarin-forms","xamarin-ios"],"created_at":"2024-11-09T03:50:15.910Z","updated_at":"2025-09-08T04:31:47.235Z","avatar_url":"https://github.com/TheCodeTraveler.png","language":"C#","readme":"# Creating Interactive Charts in Xamarin.Forms\n\nDisplaying data in mobile apps using charts is common, but drawing the chart can be very difficult. It requires a lot of calculations, figuring out distances between each point, then drawing them on the chart.\n\nAnd to make matters more difficult, we need to use platform-specific iOS and Android APIs in order to draw the charts on the screen and implement touch gestures.\n\nLet's explore how we can leverage [Syncfusion Charts](https://help.syncfusion.com/xamarin/charts/overview) to make our lives easier, requiring less math and allowing us to use cross-platform APIs in [Xamarin.Forms](https://dotnet.microsoft.com/apps/xamarin/xamarin-forms?WT.mc_id=mobile-0000-bramin)!\n\nHere's where you can find completed code samples:\n- [CreateInteractiveCharts](https://github.com/brminnick/CreateInteractiveCharts/tree/master/Source), The completed code from this walkthrough\n- [GitTrends](https://github.com/brminnick/GitTrends), An iOS and Android app to monitor the Views and Clones happening on your GitHub repositories\n\n| Android | iOS |\n| ------ | ----- |\n| \u003cimg src=\"https://user-images.githubusercontent.com/13558917/73583677-6de0bb00-4448-11ea-93f8-0290e44dc144.gif\" height=\"500\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/13558917/73576092-83e18200-442e-11ea-9b44-05e3ed72fae9.gif\" height=\"500\"/\u003e |\n\n## Drawing Charts, Before Syncfusion\n\n To draw charts without Syncfusion, we use libraries like [`CoreGraphics.CGContext`](https://docs.microsoft.com/dotnet/api/coregraphics.cgcontext?view=xamarin-ios-sdk-12\u0026WT.mc_id=mobile-0000-bramin) \u0026 [`CoreGraphics.CGPoint`](https://docs.microsoft.com/dotnet/api/coregraphics.cgpoint?view=xamarin-ios-sdk-12\u0026WT.mc_id=mobile-0000-bramin) on iOS and [`Android.Graphics.Path`](https://docs.microsoft.com/dotnet/api/android.graphics.path?view=xamarin-android-sdk-9\u0026WT.mc_id=mobile-0000-bramin) \u0026 [`Android.Graphics.Paint`](https://docs.microsoft.com/dotnet/api/android.graphics.paint?view=xamarin-android-sdk-9\u0026WT.mc_id=mobile-0000-bramin) on Android. These libraries are platform-specific, meaning we cannot use them in our [Xamarin.Forms](https://dotnet.microsoft.com/apps/xamarin/xamarin-forms?WT.mc_id=mobile-0000-bramin) cross-platform UI.\n\nFor example, check out this code from [XWeather](https://github.com/colbylwilliams/XWeather), a weather app built using [Xamarin.iOS](https://docs.microsoft.com/xamarin/ios?WT.mc_id=mobile-0000-bramin) and [Xamarin.Android](https://docs.microsoft.com/xamarin/android?WT.mc_id=mobile-0000-bramin):\n\n### XWeather, iOS Example\n_[Link to Source Code](https://github.com/colbylwilliams/XWeather/blob/master/XWeather/iOS/ViewControllers/DailyGraphView.cs)_\n\n```csharp\nvar graphRect = new CGRect (rect.X + padding, rect.Y + padding, rect.Width - (padding * 2), rect.Height - (padding * 2));\n// ...\nvar scaleHigh = NMath.Round (highest, MidpointRounding.AwayFromZero);\nvar scaleLow = lowest \u003c 0 ? NMath.Round (lowest, MidpointRounding.AwayFromZero) : NMath.Round (lowest);\n// ...\nvar rangePadding = Settings.UomTemperature.IsImperial () ? scalePadding : (scalePadding / 2);\n\nusing var cgContex = UIGraphics.GetCurrentContext();\nusing var point = new CGPath ();\n\npoint.MoveToPoint(graphRect.GetMinX (), graphRect.GetMaxY ());\n\npoint.AddLines(new [] {\n\tnew CGPoint(graphRect.GetMinX (), graphRect.GetMinY ()),\n\tnew CGPoint(graphRect.GetMinX (), graphRect.GetMaxY ()),\n\tnew CGPoint(graphRect.GetMaxX (), graphRect.GetMaxY ())\n});\n\ncgContex.AddPath(p);\ncgContex.DrawPath(CGPathDrawingMode.Stroke);\n```\n\n### XWeather, Android Example\n_[Link to Source Code](https://github.com/colbylwilliams/XWeather/blob/master/XWeather/Droid/View/DailyGraphView.cs)_\n\n```csharp\nvar graphRect = new RectF (padding, padding, canvas.Width - padding, canvas.Height - padding);\n\nusing var path = new Path();\npath.MoveTo(graphRect.Left, graphRect.Top);\n\npath.LineTo(graphRect.Left, graphRect.Bottom);\npath.LineTo(graphRect.Right, graphRect.Bottom);\n\npaint.SetStyle(Paint.Style.Stroke);\n\ncanvas.DrawPath(path, paint);\n```\n\nAll this code, and we haven't yet touched on adding touch gestures like pan + zoom, yet. \n\nLet's look at how to do it with Syncfusion instead.\n\n# Drawing Charts With Syncfusion\n\nSyncfusion makes our lives easier by using the [`SfCharts`](https://help.syncfusion.com/xamarin/charts/overview) library. It doesn't require any complex calculations, and, best of all, it is cross-platform and can be used in our [Xamarin.Forms](https://dotnet.microsoft.com/apps/xamarin/xamarin-forms?WT.mc_id=mobile-0000-bramin) project! \n\nLet's look at how to install and implement [`SfCharts`](https://help.syncfusion.com/xamarin/charts/overview).\n\n## 0. Getting Started\n\n### Install Syncfusion NuGet Packages\n\n- Install [Syncfusion.Xamarin.SfChart NuGet Package](https://www.nuget.org/packages/Syncfusion.Xamarin.SfChart/) into each project, e.g. .NET Standard Project, Xamarin.iOS Project and Xamarin.Android project\n\n![NuGet Package](https://help.syncfusion.com/xamarin/charts/Getting-Started_images/img3.png)\n\n### Initialize Syncfusion Charts, iOS\n\nIn `AppDelegate.cs`, in the `FinishedLaunching` method, add `Syncfusion.SfChart.XForms.iOS.Renderers.SfChartRenderer.Init();` after `Xamarin.Forms.Forms.Init();`.\n\nHere is an example:\n```cs\npublic class AppDelegate : Xamarin.Forms.Platform.iOS.FormsApplicationDelegate\n{\n    public override bool FinishedLaunching(UIApplication app, NSDictionary options)\n    {\n        Xamarin.Forms.Forms.Init();\n        Syncfusion.SfChart.XForms.iOS.Renderers.SfChartRenderer.Init();\n\n        LoadApplication(new App());\n\n        return base.FinishedLaunching(app, options);\n    }\n}\n```\n\n### Create Data Model for Chart\n\nLet's create a new class called `ChartDataModel` that we'll use as the model to hold the data for our chart:\n\n```csharp\nclass ChartDataModel\n{\n    public DateTime Date { get; set; }\n    public int Value { get; set; }\n}\n```\n\n## 1. Create a Custom Chart\n\nLet's start by creating a new class called `AreaSeriesChart`:\n\n```csharp\nclass AreaSeriesChart : SfChart\n{\n    public AreaSeriesChart()\n    {\n    }\n}\n```\n\nIn this class, let's create a static method to generate data called `IEnumerable\u003cChartDataModel\u003e GenerateData()`:\n\n```csharp\nclass AreaSeriesChart : SfChart\n{\n    public AreaSeriesChart()\n    {\n    }\n\n    static IEnumerable\u003cChartDataModel\u003e GenerateData(int count, int maxValue)\n    {\n        var random = new Random();\n\n        for (int i = 0; i \u003c count; i++)\n        {\n            yield return new ChartDataModel\n            {\n                Date = DateTime.Now.Subtract(TimeSpan.FromDays(i)),\n                Value = random.Next(maxValue)\n            };\n        }\n    }\n}\n```\n\nNext, in the constructor of `AreaSeriesChart`, let's create an `AreaSeries` that will display our data:\n\n```csharp\npublic AreaSeriesChart()\n{\n    const int numberOfDays = 20;\n    const int maxValue = 100;\n\n    var areaSeries = new AreaSeries\n    {\n        Opacity = 0.9,\n        Label = nameof(ChartDataModel),\n        ItemsSource = GenerateData(numberOfDays, maxValue),\n        XBindingPath = nameof(ChartDataModel.Date),\n        YBindingPath = nameof(ChartDataModel.Value)\n    };\n\n    Series = new ChartSeriesCollection { areaSeries };\n}\n```\n\nLastly, in the constructor of `AreaSeriesChart`, let's define our `PrimaryAxis` and `SecondaryAxis`:\n\n```csharp\npublic AreaSeriesChart()\n{\n    const int numberOfDays = 20;\n    const int maxValue = 100;\n\n    var areaSeries = new AreaSeries\n    {\n        Opacity = 0.9,\n        Label = nameof(ChartDataModel),\n        ItemsSource = GenerateData(numberOfDays, maxValue),\n        XBindingPath = nameof(ChartDataModel.Date),\n        YBindingPath = nameof(ChartDataModel.Value)\n    };\n\n    Series = new ChartSeriesCollection { areaSeries };\n\n    PrimaryAxis = new DateTimeAxis\n    {\n        IntervalType = DateTimeIntervalType.Days,\n        Interval = 1,\n        RangePadding = DateTimeRangePadding.Round,\n        Minimum = DateTime.Now.Subtract(TimeSpan.FromDays(numberOfDays - 1)),\n        Maximum = DateTime.Now\n    };\n\n    SecondaryAxis = new NumericalAxis\n    {\n        Minimum = 0,\n        Maximum = maxValue\n    };\n}\n```\n\n## 2. Display Chart in App\n\nFirst, we'll create a new class called `SyncfusionChartPage` which will inherit from `Xamarin.Forms.ContentPage` to display our new chart:\n\n```csharp\nclass SyncfusionChartPage : ContentPage\n{\n    public SyncfusionChartPage()\n    {\n        Title = \"Syncfusion Area Series Chart\";\n\n        Padding = new Thickness(0, 10, 0, 0);\n\n        Content = new AreaSeriesChart();\n    }\n}\n```\n\nAnd lastly, in `App.cs`, we'll assign `MainPage` to be our newly created `SyncfusionChartPage`:\n\n```csharp\npublic class App : Application\n{\n    public App() \n    {\n        MainPage = new NavigationPage(new SyncfusionChartPage());\n    }\n}\n```\n\nGreat! Now we have a chart in our app that displays our data:\n\n\u003cimg src=\"https://user-images.githubusercontent.com/13558917/73576237-db7fed80-442e-11ea-8a37-ea850dd45488.png\" height=\"500\"/\u003e\n\n## 3. Make the Chart Interactive\n\nFirst, let's add the ability to see the exact value of the data by adding `ChartTrackballBehavior`\n\n```csharp\npublic AreaSeriesChart()\n{\n    const int numberOfDays = 20;\n    const int maxValue = 100;\n\n    var areaSeries = new AreaSeries\n    {\n        Opacity = 0.9,\n        Label = nameof(ChartDataModel),\n        ItemsSource = GenerateData(numberOfDays, maxValue),\n        XBindingPath = nameof(ChartDataModel.Date),\n        YBindingPath = nameof(ChartDataModel.Value)\n    };\n\n    Series = new ChartSeriesCollection { areaSeries };\n\n    PrimaryAxis = new DateTimeAxis\n    {\n        IntervalType = DateTimeIntervalType.Days,\n        Interval = 1,\n        RangePadding = DateTimeRangePadding.Round,\n        Minimum = DateTime.Now.Subtract(TimeSpan.FromDays(numberOfDays - 1)),\n        Maximum = DateTime.Now\n    };\n\n    SecondaryAxis = new NumericalAxis\n    {\n        Minimum = 0,\n        Maximum = maxValue\n    };\n\n    ChartBehaviors = new ChartBehaviorCollection\n    {\n        new ChartTrackballBehavior()\n    };\n}\n```\n\nNext, let's add the ability to pan and zoom by adding `ChartZoomPanBehavior`:\n\n```csharp\npublic AreaSeriesChart()\n{\n    const int numberOfDays = 20;\n    const int maxValue = 100;\n\n    var areaSeries = new AreaSeries\n    {\n        Opacity = 0.9,\n        Label = nameof(ChartDataModel),\n        ItemsSource = GenerateData(numberOfDays, maxValue),\n        XBindingPath = nameof(ChartDataModel.Date),\n        YBindingPath = nameof(ChartDataModel.Value)\n    };\n\n    Series = new ChartSeriesCollection { areaSeries };\n\n    PrimaryAxis = new DateTimeAxis\n    {\n        IntervalType = DateTimeIntervalType.Days,\n        Interval = 1,\n        RangePadding = DateTimeRangePadding.Round,\n        Minimum = DateTime.Now.Subtract(TimeSpan.FromDays(numberOfDays - 1)),\n        Maximum = DateTime.Now\n    };\n\n    SecondaryAxis = new NumericalAxis\n    {\n        Minimum = 0,\n        Maximum = maxValue\n    };\n\n    ChartBehaviors = new ChartBehaviorCollection\n    {\n        new ChartZoomPanBehavior(),\n        new ChartTrackballBehavior()\n    };\n}\n```\n\nAnd now we have an interactive chart!\n\n![Interactive Chart](https://user-images.githubusercontent.com/13558917/73576092-83e18200-442e-11ea-9b44-05e3ed72fae9.gif)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTheCodeTraveler%2FCreateInteractiveCharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTheCodeTraveler%2FCreateInteractiveCharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTheCodeTraveler%2FCreateInteractiveCharts/lists"}