Skip to content
Ivan Schütz edited this page Apr 29, 2017 · 12 revisions

Single, plain bars

To work with single bars, it's possible to use ChartBarsLayer as well as ChartPointsViewsLayer. It's of course recommended to use the dedicated bars layers but you may find situations sometimes where you need more flexibility and decide to create them just as generic views, using ChartPointsViewsLayer.

Bars example uses custom views instead of a dedicated bars layer just for demonstrative purposes. Bars +/- example uses a dedicated bars layer, to which it passes the +/- parts of the bars as individual bars (the gap in the middle is done by creating a white overlay using ChartPointsViewsLayer:

plusminusbars

We will focus here on the dedicated bar layers.

To pass bars to ChartBarsLayer we use instances of ChartBarModel. A bar model is defined by:

  • constant: The domain value of the bar that doesn't change between top/bottom (or left/right). For a vertical bar this is the x domain coordinate, and for an horizontal bar this is the y domain coordinate.

  • axisValue1, axisValue2: The first and last variable domain coordinate. For a left-to-right (horizontal) bar, axisValue1 is the "left" x value, axisValue2 is the right axis value, for a bottom-to-top (vertical) bar, axisValue1 is the "bottom" y value and axisValue2 is the "top" y value.

Besides of the bars models and some other self explanatory parameters, we can pass following to bars layer:

  • tapHandler: This will be called when a bar is tapped, passing all relevant information, including the bar's view, so you can highlight, animate it, show an info bubble next to it, etc.

  • mode: This defines how the bar views handle zooming - if they scale themselves or keep their size unchanged. The custom mode is available but not supported for bars yet. For more details about mode, see https://github.com/i-schuetz/SwiftCharts/wiki/View-hierarchy-and-transforms#chartpointsviewslayer-transform-modes (this is from a different layer but everything applies, except custom mode).

  • viewGenerator: This is in case you want to generate your own custom views for bars. This was added in 0.6, which makes the alternative usage of ChartPointsViewsLayer to display bars in most cases unnecessary.

Bar labels

All the bar layers are focused only on displaying bars. To add labels you can use either a separate ChartPointsViewsLayer, to which you have to pass an array of chart points representing the edges of the bars where the labels should be placed (like it's done in +/- example), or GroupedBarsCompanionLayer when working with grouped bars (it currently requires the bars to be grouped and stacked, though this should be fixed as the stacked requirement isn't necessary. You can in the meantime model your grouped bars as grouped and stacked with only 1 stack frame). More about GroupedBarsCompanionsLayer in TODO.

Single, stacked bars

To display stacked bars we use ChartStackedBarsLayer. It's also possible to use ChartGroupedStackedBarsLayer with groups containing only 1 bar, in case you want to keep your implementation generic prepared for possible future scenarios where you need both.

ChartStackedBarsLayer is structured similarly to ChartBarsLayer, except of course that it has additional functionality to manage stack frames inside the bars. As models we use ChartStackedBarModel, which extends ChartBarModel from ChartBarsLayer. Here instead of passing axisValue1 and axisValue2, we pass start (which stands basically for axisValue1 and an array of ChartStackedBarItemModel, which represent the stack frames inside the bar. A ChartStackedBarItemModel has quantity and a color. quantity is simply the "length" of the frame in the bar, in domain coordinates. E.g. in the following chart:

stacked

The first bar model, from left to right, has 4 ChartStackedBarItemModel. The first ChartStackedBarItemModel is gray and a quantity of 20. The second is blue and has a quantity of 60 (80-20) and so on.

Similarly to ChartBarsLayer it's also possible to pass a selection handler, with provides data like the selected bar and stack frame, including the views, such that it's possible to show info overlays or animate the bars as well as individual stack frames. See stacked bars example (to which screenshot above belongs) for this.

Grouped, plain bars

For grouped plain bars you need ChartGroupedPlainBarsLayer. It's also possible to use ChartGroupedStackedBarsLayer with stack frames containing only 1 item, in case you want to keep your implementation generic and prepared for possible future scenarios where you need both.

This layer has the same features that can be found in plain bars layer + grouping capabilities.

Dimensions / spacing settings

Parameters:

barSpacing: Spacing between bars in a group, in pt.

groupSpacing: Spacing between groups, in pt.

barWidth: Width (or height in case of horizontal bars) of the bars.

ChartGroupedPlainBarsLayer offers 2 ways to setup the dimensions/spacing, via different initializers:

  1. In terms of only spacing: you pass only barSpacing and groupSpacing. barWidth is derived from this and the available chart space.

  2. Spacing + fixed bar width: you pass barSpacing, groupSpacing as well as barWidth. The available space in the chart is ignored.

Grouped, stacked bars

For grouped and stacked bars there's (surprise!) ChartGroupedStackedBarsLayer. There's nothing to say about this layer that can't be inferred from reading about the layers above, as it's only the sum of all features already described.

Making the chart scrollable

See view hierachy and transforms.