Creating a graph requires several steps, including setting up the graph's series and series items, styling each series item, setup a graph view and add it to your view hierarchy and reload its data.
The create a graph, start by defining the first dataset you wish to plot using a new
AWFSeriesItem instance and giving it a title:
AWFSeriesItem *sampleItem = [[AWFSeriesItem alloc] init]; sampleItem.title = NSLocalizedString(@"Sample Data", nil);
let sampleItem = AWFSeriesItem() sampleItem.title = "Sample Data"
Now provide the static data for the dataset, which can either be an array of arrays for the x and y values, or an array of
// an array of arrays containing x,y values sampleItem.data = [[0,23], [1,15], [2,79]]; // an array of AWFSeriesPoint instances NSMutableArray *dataPoints = [NSMutableArray arrayWithCapacity:3]; [dataPoints addObject:[AWFSeriesPoint pointWithX:0 y:23]; [dataPoints addObject:[AWFSeriesPoint pointWithX:1 y:15]; [dataPoints addObject:[AWFSeriesPoint pointWithX:2 y:79]; sampleItem.data = [NSArray arrayWithArray:dataPoints];
// an array of arrays containing x,y values sampleItem.data = [[0,23], [1,15], [2,79]] // an array of AWFSeriesPoint instances var dataPoints = [AWFSeriesPoint]() dataPoints.append(AWFSeriesPoint(x: 0, y: 23)) dataPoints.append(AWFSeriesPoint(x: 1, y: 15)) dataPoints.append(AWFSeriesPoint(x: 2, y: 79)) sampleItem.data = dataPoints
Alternatively, you can also provide an array of
NSObject instances as your series data. If you use this method, you must set the
yAxisPropertyName properties on your series item, which are the key paths to the properties on the objects in the array to use for both the x and y data values in the dataset. For instance, you have an array of
AWFObservation instances for a series item and want to show temperature across time:
NSArray<AWFObservation *> *periods = @[ob1, ob2, ob3]; AWFSeriesItem *seriesItem = [AWFSeriesItem new]; seriesItem.data = periods; seriesItem.xAxisPropertyName = @"timestamp"; seriesItem.yAxisPropertyName = @"tempF";
let periods: [AWFObservation] = [ob1, ob2, ob3] let seriesItem = AWFSeriesItem() seriesItem.data = periods seriesItem.xAxisPropertyName = "timestamp" seriesItem.yAxisPropertyName = "tempF"
The property name key paths can also contain dot notation for embedded properties as needed:
seriesItem.xAxisPropertyName = @"ob.timestamp"; seriesItem.yAxisPropertyName = @"ob.tempF";
seriesItem.xAxisPropertyName = "ob.timestamp" seriesItem.yAxisPropertyName = "ob.tempF"
If you would rather have the graph view and its series items perform the required requests for data to the AerisWeather API instead of setting static data on your series items as exemplified above, refer to our loading graph data guide for more details.
Once you have provided the data for each of your graph's series items, you'll need to setup the desired styling for each. First, you'll need to specify how you want each series item to be rendered, either as a bar or line graph, by setting the
rendererType property on
sampleItem.rendererType = AWFGraphRendererTypeBar;
sampleItem.rendererType = .bar
The supported renderer types are
AWFGraphRendererTypeLine. Series items will be rendered as line graphs,
AWFGraphRendererTypeLine, by default.
Along with defining the renderer type, you can also set the series item's styles for the renderer. Note that some style properties are not used for all supported renderer types:
sampleItem.strokeColor = [UIColor greenColor]; sampleItem.strokeWidth = 3.0;
sampleItem.strokeColor = .green sampleItem.strokeWidth = 3.0
With each individual graph series item configured, you can now setup your graph view. A graph view requires a single series instance to be setup with the set of series items, one per data value, you want to display:
AWFGraphSeries *series = [AWFGraphSeries seriesWithItems:@[sampleItem]]; AWFGraphView *graphView = [AWFGraphView alloc] initWithFrame:CGRectMake(0, 0, 300, 200)]; graphView.series = series; [self.view addSubview:graphView];
let series = AWFGraphSeries(items: [sampleItem]) let graphView = AWFGraphView(frame: CGRect(origin: .zero, size: CGSize(width: 300, height: 200))) graphView.series = series view.addSubview(graphView)
If you change your graph's series items or any of the data associated with them, you'll need to tell the graph view to redraw by reloading its data. Calling
reloadData on a graph view will force it to redraw each series item:
And that's it! You now have a graph view displaying the desired static data.
For an even simpler implementation, you can also have your graph view be responsible for loading and setting its series data automatically based on your configuration. Refer to our loading graph data guide for more details.
Last modified: July 30, 2020