Skip to end of metadata
Go to start of metadata

One of the greatest new components in Crosslight 4 is a powerful, full-fledged Charting component, enabling Crosslight developers to easily add stunning charts to their business cross-platform mobile apps. Fully MVVM capable, it works beautifully across iOS and Android platforms.

On this page:

Starting Off

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#, CrosslightAfter the project is created, don’t forget to add the necessary references as well.

Necessary References:

  • 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:

C#

For the sake of simplicity, the above sample uses static data points as the items source for each series. If your data points are heavily reused across your application, you can refactor the data points into a repository or data manager class which you can easily consume with a simple method call. 
Now we are done initializing the chart in the ViewModel and populated two ColumnSeries, also added the data points for each series which will be displayed side-by-side. Crosslight Charting library includes component models that you can consume in the shared Core project. The Chart model represents the data source required for the chart, and also provides a wealth of chart configuration and settings. The Series, ColumnSeries, and DataPoint are another example of the component models available in the Charting library.

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.

C#

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:

C#

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:

C#

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.

C#

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:

XAML

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:

Sample

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

To learn more about the Crosslight Form Builder, check out these links in the Developer Center: