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 Identifier (we use ShinobiQuickStart.ShinobiQuickStart but you should use your own)
  4. Click Next keeping the other default settings
  5. Choose a suitable location for the solution and click Create

shinobicharts supports Android API 9 and above so if you wish you can modify your project options accordingly, but bear in mind lower than API 12 you will need to use the SupportChartFragment and the Android Support Library:

  1. Click Project > ShinobiQuickStart Options
  2. On the Build > General page set the Target Framework to Use latest installed platform
  3. On the Build > Android Application page set the Minimum Android version and press OK

Now that you have your new project set up follow the Xamarin 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 ChartFragment.

Open the Resources / layout / Main.axml file with the source code editor. Replace the button element with the following:

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

Here the ChartFragment 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. Modify this to set up the chart, by removing the button-related code and adding the chart setup code.

Open the MainActivity.cs file. Add a using directive after the Android ones:

using Com.ShinobiControls.Charts;

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 = string.Format ("{0} clicks!", count++);
};

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 (bundle == 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 bundle == null. Normally Fragments within an Activity will be destroyed and re-created as well. However, by default, a ChartFragment 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:

ChartFragment chartFragment = (ChartFragment) FragmentManager.FindFragmentById(Resource.Id.chart);

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

Using the id you gave the ChartFragment in the XML, and the Activity’s FragmentManager, you can get a reference to it in code. From the ChartFragment 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.

Tip: To support devices down to API 9: Android 2.3 (Gingerbread) you will need to use SupportChartFragment instead of ChartFragment (in both the XML and the C# source). Additionally, you will need to change the MainActivity to subclass FragmentActivity instead of Activity and use the SupportFragmentManager() method instead of FragmentManager().


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