Quick Start Guide

Draw a Simple Chart

Start by creating a new solution with an Android Application project:

  1. Click File > New > Solution…
  2. Choose the Android App (C#) project template
  3. Give the application an App Name: ShinobiQuickStart and a suitable Organisation Identifier (we use com.example but you should use your own)
  4. Under as the Target Platforms, select Modern Development, as the current minimum API level for shinobicharts is API 14.
  5. Click Next keeping the other default settings
  6. Choose a suitable location for the solution and click Create

Now that you have your new project set up follow the Visual Studio import instructions to add a dependency to the shinobicharts library from your application.

Add the ShinobiChart

Your project comes with a layout XML (Resources / layout / Main.axml) file. Modify this to use a ShinobiChart, by replacing the button element with a SupportChartFragment.

Open the Resources / layout / Main.axml file and click on the Source tab. Replace the button element with the following:

<fragment
    class="com.shinobicontrols.charts.SupportChartFragment"
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Here the SupportChartFragment is being told to match the dimensions of its parent and is being given an id which makes it easier to retrieve in code.

Your project also comes with an Activity, in the MainActivity.cs file. You’ll need to modify this to subclass the Support Library’s FragmentActivity before creating the chart, to enable us to use the Support Library’s Fragment.

Open the MainActivity.cs file. Add two using directives after the Android ones:

using Android.Support.V4.App;

using Com.ShinobiControls.Charts;

Modify the class declaration so it subclasses FragmentActivity rather than Activity:

public class MainActivity : FragmentActivity

Now modify the class to set up the chart, by removing the button-related code and adding the chart setup code. Remove the line

int count = 1;

and the lines

// Get our button from the layout resource,
// and attach an event to it
Button button = FindViewById<Button>(Resource.Id.myButton);

button.Click += delegate { button.Text = $"{count++} clicks!"; };

You only want to set up your chart the first time the activity is created so add the following to the end of the OnCreate() method:

if (savedInstanceState == null) {

}

In Android, configuration changes such as rotating your device cause activities to be destroyed and re-created. You can tell if the Activity is being created for the first time by checking to see if savedInstanceState == null. Normally Fragments within an Activity will be destroyed and re-created as well. However, by default, a SupportChartFragment is retained across Activity re-creation so you only need to do the setup once.

Add the following inside the if statement you just added:

SupportChartFragment chartFragment = (SupportChartFragment) SupportFragmentManager.FindFragmentById(Resource.Id.chart);

IShinobiChart shinobiChart = chartFragment.ShinobiChart;
shinobiChart.Title = "My First Chart";

Using the id you gave the SupportChartFragment in the XML, and the FragmentActivity’s SupportFragmentManager, you can get a reference to it in code. From the SupportChartFragment you obtain the ShinobiChart and give it a title.

If you have downloaded a trial version of shinobicharts you will have been issued with a trial key. You will need to give this key to the chart in order for it to be displayed. You can do this as follows:

shinobiChart.SetTrialKey("<trial_key_here>");

Make sure you change <trial_key_here> to the trial key you were given!

The main parts of a chart can be configured via some key properties on the ShinobiChart object. For example, you’ll need to add the axes and series. In this example, you’re making a chart with three columns on linear numeric scales. For now, add the axes and we’ll come back to the series a little bit later. Still inside the if statement add:

NumberAxis xAxis = new NumberAxis();
shinobiChart.XAxis = xAxis;

NumberAxis yAxis = new NumberAxis();
shinobiChart.YAxis = yAxis;

Here you’re creating both the X axis and Y axis as a NumberAxis and then setting them on the chart.

So with the exception of the data, the chart is set up.


<< Previous: Introduction | Next: Adding a Series >>