thumbnail1

Back to Blog

Getting Started with Radar Charts

Posted on 23 Apr 2014 Written by Thomas Kelly

The 2.6 release of our iOS charting framework puts a new spin on data visualization! With the introduction of Radar and Polar charts, you’ll have the angle you need to run circles around the competition!

As always, you can follow along with the code on our github, and you’ll need a copy of the ShinobiCharts framework. If you don’t have it already, you can download a free trial of ShinobiCharts, or if you’re an existing customer with support, go to the Customer Portal to download the latest version!

Radar and Polar charts are very similar, the main difference being that Radar charts use a Category axis as the x-axis, while Polar charts use a numerical axis as the x-axis. In both cases, the x-axis goes around the circumference of the chart, while the y-axis follows the radius of the chart.

To start with, create a chart with a category x-axis;

- (void)viewDidLoad
{
    [super viewDidLoad];
    ...

    //Create the chart
    ShinobiChart *chart = [[ShinobiChart alloc] initWithFrame:self.view.bounds
                                         withPrimaryXAxisType:SChartAxisTypeCategory
                                         withPrimaryYAxisType:SChartAxisTypeNumber];
    chart.datasource = self;
    [self.view addSubview:chart];
}

Next comes the datasource. To specify that we are drawing a radar chart instead of a cartesian chart with a category axis, we use the new “SChartRadialLineSeries” as our series.

-(SChartSeries *)sChart:(ShinobiChart *)chart seriesAtIndex:(NSInteger)index
{
    //Use a radial chart and series
    SChartRadialLineSeries *radialSeries = [SChartRadialLineSeries new];
    //Draw connecting line between first and last datapoint
    radialSeries.pointsWrapAround = YES;
    return radialSeries;
}

Running the app gives us our first look at the radar chart:

Basicradar

 

The problem we have here though is that the data is hard to read off and compare. We need some gridlines. In addition, to make things even easier to interpret, we are going to change from a circular view to a dodecagonal (12-sided) view, drawing straight lines between each month. It’s easier than it sounds!

-(void)viewDidLoad
{
    ...
    //Customize the axes
    chart.yAxis.style.majorGridLineStyle.showMajorGridLines = YES;
    chart.xAxis.style.majorGridLineStyle.lineRenderMode = SChartRadialLineRenderModeLinear;
    chart.yAxis.style.majorGridLineStyle.lineRenderMode = SChartRadialLineRenderModeLinear;
    chart.yAxis.style.majorGridLineStyle.lineColor = [UIColor colorWithWhite:0.8 alpha:1];

    chart.datasource = self;
    ...
}

With this, we have a radar chart! We can display data between Jan and Dec, and easily read off and compare the values

Spiderradar 

Hopefully you are already thinking about how you can use radar charts in your own app! If you got stuck, take a look at the source code on github, or fork it and send a pull request if you have an improvement!  

Back to Blog