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

To display lines you usually have to use ChartPointsLineLayer. You also can use ChartPointsViewsLayer if you need a customized linear-looking view, which isn't part of a line chart, like e.g. the white horizontal line used in this example to simulate a gap between the + and - part of the bars.

Here we focus only on ChartPointsLineLayer.

To create a ChartPointsLineLayer you have to pass an array of line models along with the axes:

ChartPointsLineLayer(xAxis: xAxisLayer.axis, yAxis: yAxisLayer.axis, lineModels: [lineModel1, lineModel2])

A line model has an array of chart points, a color, and some settings to refine the appearance like join/cap style and an optional dash pattern. You also can pass an animation duration, which will animate showing the line, left to right.

Using different colors for segments

If you need a line that uses different colors for specific ranges, you have to create a line model, i.e. a separate line for each of these segments.

Showing gaps between segments

Similarly to point above, if you have to display gaps in a line, you have to split it in sublines, with appropriate edges. Alternatively you can use another line layer on top, or a ChartPointsLineLayer that produces lines with the same color as the background of the chart, which will cause the visual effect of being a "gap". This later approach may be a bit tricky as for example it would hide guidelines and other elements behind it that you may want to show.

Tracer

tracer

To enable a tracer, you have to add an instance of ChartPointsLineTrackerLayer to your chart. Keep in mind to position it after the line layer in the layers array, such that its views shows on front of the line.

The tracer is entirely decoupled from the line - you could show a tracer without a line layer and it would function correctly, though this wouldn't make sense.

To instantiate a tracer, you have to pass the line models with which you initialized the line layer (or a filtered version, in case you don't want to trace all the lines), and other settings like the color of the vertical tracer line lineColor, or if it should select the nearest point when there are multiple intersections ChartPointsLineTrackerLayerSettings.selectNearest. This may be useful when working with a single line which can have multiple y positions for one x position and you want to highlight only one of them (the nearest).

You also can pass a closure to handle the position updates. More about this in the next section.

Tracer overlays

The tracer doesn't shows any overlays itself. It notifies you with the current intersections on each change, using the positionUpdateHandler closure. This closure receives an array of [ChartTrackerSelectedChartPoint] as a parameter, which is a wrapper for everything you need to know about the update - the line models where intersections ocurred, along with their indices, the position of the intersections, etc. With this information, you can show overlays (and any other needed logic). You of course have to manage the state of the overlays yourself. An example for this can be found here.

Tracer interpolation

The tracer interpolates between the chart points. If you have a chart point at (2, 2) and another at (3, 2), when you move the tracer between these points you will get updates for (2,1, 2), (2,11, 2) and so on. Snapping currently has to be implemented externally, in the position update handler, by fixing the overlays to the position of the chart points.