PowerPlotPercolation logo

Web traffic chart

This is a bar chart with multiple bars. The data is the traffic of my website http://www.field-theory.org. The data are the number of hits, the number of page views and the number of unique visitors to the site over a period of six months. The demo app shows three different charting options – with the bars side-by-side, overlapping, or stacked.

This page describes the class “WebsiteVisitor” in the PowerPlot demo app.

Web traffic field-theory.org

The chart itself is easily generated using the multiBarPlotWithFrame:data:style:colorScheme: factory method, with the style corresponding to the choice from the UISegmentedControl in the user interface. In this example, a new chart is generated in the method switchStyle:

    // Create and configure the bar chart.
    WSData *hitsD = [DemoData monthlyHits];
    WSData *pageViews = [DemoData monthlyPageviews];
    WSData *pageVisitors = [DemoData monthlyVisitors];
    BPStyle chosenStyle = [self.styleSelector selectedSegmentIndex] + 1;
    WSChart *barChart = [WSChart multiBarPlotWithFrame:[self.visitors frame]
                                                  data:[NSArray arrayWithObjects:hitsD,
                                                        pageViews, pageVisitors, nil]
    [barChart scaleAllAxisYD:NARangeMake(-30000, 1.2*[hitsD maximumValue])];
    [barChart setAllAxisLocationYD:0];
    WSPlotAxis *axis = [barChart firstPlotAxis];
    [[axis ticksY] ticksWithNumbers:[NSArray arrayWithObjects:
                                     [NSNumber numberWithFloat:20000],
                                     [NSNumber numberWithFloat:40000],
                                     [NSNumber numberWithFloat:60000],
                                     [NSNumber numberWithFloat:80000],
                                     [NSNumber numberWithFloat:100000],
                             labels:[NSArray arrayWithObjects:@"20k", @"40k",
                                     @"60k", @"80k", @"100k", nil]];

    // Add the chart and redisplay.
    [self.visitors removeAllPlots];
    [self.visitors addPlotsFromChart:barChart];
    [self.visitors setChartTitle:NSLocalizedString(@"Field-theory.org web traffic", @"")];
    [self.visitors setNeedsDisplay];

Here we set the labels of the y-axis manually by using the notion “20k” for 20,000 and so on. This could also be done differently with a custom formatter, but this way is simpler. Note how we configure the ticks manually.