To start off, create a Blank Crosslight project with Crosslight Project Wizard. You can do this from the Visual Studio's New Project menu and select Visual C#, Crosslight. After the project is created, don’t forget to add the necessary references as well.
- Core project: Add Intersoft.Crosslight.UI.DataVisualization assembly.
- iOS project: Add Intersoft.Crosslight.UI.DataVisualization andIntersoft.Crosslight.UI.DataVisualization.iOS assembly.
- Android project: Add Intersoft.Crosslight.UI.DataVisualization andIntersoft.Crosslight.UI.DataVisualization.Android assembly.
Preparing the ViewModel
Prepare the ViewModel that will provide the data to the chart, then create a ColumnViewModel class inside the CrosslightCharting.Core/ViewModels folder. To initialize the Chart model you'll need to add these codes to the ViewModel:
It’s also worthy to point out that changes to the Chart model will automatically propagate to the view, this means you can add or remove Series dynamically when the app is running. The changes you made to the Chart model will not be only propagated to the view, they will be also smoothly animated from the current point to the new point without the need of additional codes.
Also, you don’t necessarily need to define the dependent and independent axis for the chart, since Crosslight Charting comes with automatic axis detection that generates meaningful axis and range, purely based on the given data.
You can also set the items source of the Series later in the app’s cycle, such as after fetching data from the server in most real-world scenarios. For your reference, here’s a code snippet how to initialize the items source of a Series combined with an async data load.
Preparing the BindingProvider
Since our ViewModel and Chart model is ready, we will need to prepare the Binding Provider which will bind the ChartView to the Chart property of the ViewModel.
Create a new Crosslight Binding Provider using the item templates built into Visual Studio (Windows) or Xamarin Studio (Mac). We will name this file ColumnBindingProvider, and I’ll put it inside the CrosslightCharting.Core/BindingProviders folder. Make sure your binding provider have the same code with below:
Creating the Chart for iOS
Using ViewModel and BindingProvider that previously have been made, you can create the ViewController that will host the chart in iOS. Name the view controller with ColumnViewController and put it inside inside the CrosslightCharting.iOS/ViewControllers folder. Here’s the ColumnViewController file:
You also need to subclass the UIChartViewController class. The UIChartViewController provides a ChartView property which returns the instance of UIChartView that it manages. It also automatically registers the ChartView as an identifier, allowing you to easily bind to the chart view in the binding provider.
Here is the result:
Creating the Chart for Android
Similar to iOS counterpart, you can reuse the ViewModel and BindingProvider to create an Activity. Create an activity named with ColumnActivity, and put it inside the CrosslightCharting.Android/Activities folder.
You also need a layout for this activity by creating an Android layout file inside the CrosslightCharting.Android/Resources/Layout folder, called ColumnSeriesLayout.axml. Here is the code inside:
The layout is simply a ChartView that covers the entire screen with a white background to get better visibility of the chart.
Here is the result:
Using Crosslight Charting will create the axes and fit into the screen automatically, also the legend is automatically generated for you based on the given data points.
Learning more about Crosslight Charting
You’ve successfully created a column chart with Crosslight Charting. In addition to column charts, Crosslight Charting also supports many other chart types such as area, bar, doughnut, line, pie, scatter, step area, and much more which you can check it here:
The sample code for this article can be downloaded from our Git server: http://git.intersoftsolutions.com/projects/CROS-SUPP/repos/charting-sample/browse,
You can also find our source file of this project here: http://git.intersoftsolutions.com/projects/CT/repos/crosslightcharting/browse