How to: Create Discontinuous Axes

This how-to guide will show you how to create discontinuous axes for your chart; that is axes that skip over specified ranges.

NOTE: Discontinuous axes are a premium charts feature.

Unlike the iOS version, shinobicharts for Android does not distinguish between discontinuous and non-discontinuous axes - you simply tell a NumberAxis or DateTimeAxis that you want it to skip certain ranges. The discontinuous functionality is not applicable for a CateoryAxis and it will just ignore any skip ranges that it is given.

In order to make an axis skip a certain range you need to do the following:

  1. Create a NumberAxis or a DateTimeAxis
  2. Create a NumberRange, for a NumberAxis, or a DateRange, for a DateTimeAxis, that spans the range you want the axis to skip over
  3. Give this range to the axis using the addSkipRange() method.
  4. For a DateTimeAxis you can also create a RepeatedTimePeriod and give it to the axis, using the addRepeatedSkipRange() method, to repeatedly skip over a given period of time.

Skipping over ranges can be useful when you don’t want to display any gaps in your data. For example, if your data set is only relevant for weekdays you may wish to skip over weekends.

In the DiscontinuousAxes sample project we demonstrate how to repeatedly skip the weekends in April 2015. In addition we also add two individual skip ranges for public holidays. If you want you can see the finished product in action by importing the sample into your IDE. What follows are the steps required to make the axes discontinuous, discussed in a little more detail.

Setting up the Chart

First we need a chart with some axes and some data. We create a DateTimeAxis for the X-axis and a NumberAxis for the Y-axis. We then create a LineSeries that has 30 data points - one for each day of April 2015. The X value of each data point is the Date itself and the Y value is an integer representing the number of that day within the month (the first being 1 and the last being 30). Giving these to the chart, with the addition of some titles and extra styling, it should look something like this:

Text Annotations

We’re currently showing everyday so the line is perfectly straight.

Skip Public Holidays

In the UK the Friday before and the Monday after Easter Sunday are public holidays. Let’s add two skip ranges to the X-axis to so that it misses these days out. First create DateRange objects to represent Good Friday and Easter Monday (in 2015 they’re on 3rd and 6th April respectively):

Java

calendar.clear();
calendar.set(2015, Calendar.APRIL, 3, 0, 0, 0);
Date min = calendar.getTime();
calendar.add(Calendar.DAY_OF_YEAR, 1);
Date max = calendar.getTime();
DateRange goodFriday = new DateRange(min, max);

calendar.clear();
calendar.set(2015, Calendar.APRIL, 6, 0, 0, 0);
min = calendar.getTime();
calendar.add(Calendar.DAY_OF_YEAR, 1);
max = calendar.getTime();
DateRange easterMonday = new DateRange(min, max);

C#

calendar.Clear();
calendar.Set(2015, Calendar.April, 3, 0, 0, 0);
Date min = calendar.Time;
calendar.Add(CalendarField.DayOfYear, 1);
Date max = calendar.Time;
DateRange goodFriday = new DateRange(min, max);

calendar.Clear();
calendar.Set(2015, Calendar.April, 6, 0, 0, 0);
min = calendar.Time;
calendar.Add(CalendarField.DayOfYear, 1);
max = calendar.Time;
DateRange easterMonday = new DateRange(min, max);

Then we add them both to the X-axis:

Java

xAxis.addSkipRange(goodFriday);
xAxis.addSkipRange(easterMonday);

C#

xAxis.AddSkipRange(goodFriday);
xAxis.AddSkipRange(easterMonday);

Your line series should no longer be straight; it jumps from Thu 02 to Sat 04 and from Sun 05 to Tue 07. Any data points that fall within a skip range are not displayed on the chart.

Text Annotations

Repeatedly Skip Weekends

That’s great but we also want to skip over the weekends too. We could just add individual skip ranges for each weekend over a certain range. However, as we’re using a DateTimeAxis we can also make use of a RepeatedTimePeriod to represent repeated skip ranges.

So let’s create a RepeatedTimePeriod that is two days long and repeats every week. The start of the repeated time period is just used by the axis as a reference point to calculate skip ranges from, in both directions, so it does not matter when start is as long, in our case, as it is the start of a Saturday. That said, it will be more performant to set a start that is close to the beginning of your data range or the axis’ default range, whichever is the lower. Here we use the weekend before the beginning of our data:

Java

calendar.clear();
calendar.set(2015, Calendar.MARCH, 28, 0, 0, 0);
Date start = calendar.getTime();
DateFrequency length = new DateFrequency(2, Denomination.DAYS);
DateFrequency frequency = new DateFrequency(1, Denomination.WEEKS);
RepeatedTimePeriod weekends = new RepeatedTimePeriod(start, length, frequency);

C#

calendar.Clear();
calendar.Set(2015, Calendar.March, 28, 0, 0, 0);
Date start = calendar.Time;
DateFrequency length = new DateFrequency(2, DateFrequency.Denomination.Days);
DateFrequency frequency = new DateFrequency(1, DateFrequency.Denomination.Weeks);
RepeatedTimePeriod weekends = new RepeatedTimePeriod(start, length, frequency);

Then we give the RepeatedTimePeriod to the X-axis:

Java

xAxis.addRepeatedSkipRange(weekends);

C#

xAxis.AddRepeatedSkipRange(weekends);

As you can from the image below our chart is now definitely not straight! There are smaller jumps for last three weekends and a big jump at the beginning for the four days skipped in a row (the weekend plus the two public holidays either side). Note, that internally the axis combines adjacent skip ranges into one big skip range so you don’t have to worry about this - you just have to ensure they match up exactly otherwise they won’t be able to be combined!

Text Annotations

See related code sample: Discontinuous Axes Sample, in the samples/discontinuous-axes folder of your product download (Xamarin.Android/samples/DiscontinuousAxes if you’re using Xamarin.Android).