Creating a Graph

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.

Setup the Graph 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:

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 AWFSeriesItem instances:

// 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 xAxisPropertyName and 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:

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"

If you would rather have the graph view and its series items perform the required requests for data to the Xweather Weather API instead of setting static data on your series items as exemplified above, refer to our loading graph data guide for more details.

Style the Series Items

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 AWFSeriesItem:

sampleItem.rendererType = .bar

The supported renderer types are AWFGraphRendererTypeBar and 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 = .green
sampleItem.strokeWidth = 3.0

Setup the Graph View

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:

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:

graphView.reloadData()

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.

Graphs Loading Weather Data