Areas, lines, circles (interactive) example - how to clear popup

[christinalau]

In the Areas line, circles (interactive) example, the popup is shown and previous popup is clear whenever I clicked on a circle. How can I clear the popup if I click on any place on the graph that is not the circle (e.g. the white space). Thanks...

[ivnsch]

You can add a transparent overlay view that covers the chart when the user taps on the circle. There's a utility class HandlingView which you could use for this - you can pass a touchHandler to it in which you clear the popup.

In order for the circles to continue being interactive while the overlay is open you'd have to make that the overlay is added behind the circles (in this case the overlay can be added permanently, no need to do it only when user taps). I'd create a ChartLayer class and implement chartInitialized such that it adds this overlay as subview of the chart. Then pass this layer to Chart initialiser before the layer holding the circles. If you don't want to create new layer class you can also instantiate ChartPointsViewsLayer with a dummy chart point, where you just add the overlay to the chart in the view generator.

[ivnsch]

P.S. Here also code to make clearer what I mean, with ChartPointsViewsLayer approach, it would look similar to this

let overlayGenerator = {(chartPointModel: ChartPointLayerModel, layer: ChartPointsLayer, chart: Chart) -> UIView? in
let view = HandlingView(frame: chart.frame)
    view.touchHandler = {
    // code to hide current popup
    }
    return view
}

let dummyChartPoint = ChartPoint(0, 0) // coordinates are not important here since we don't use them
let overlayLayer = ChartPointsViewsLayer(xAxis: xAxis, yAxis: yAxis, innerFrame: innerFrame, chartPoints: dummyChartPoint, viewGenerator: overlayGenerator)

...

let chart = Chart(
    frame: chartFrame,
    layers: [
        ...
        overlayLayer,
        circlesLayer,
        ...
    ]
)

let me know if it works out for you or you face any other issues!

[christinalau]

Didn't seem to work, the touchHandler was never entered. Would it be possible to provide an updated running example? Thanks so much for your quick response.

[ivnsch]

This is an exact copy of the areas example, you can find the overlay part enclosed in ////////////. https://gist.github.com/i-schuetz/a7801eba798e2d04d1c5

[christinalau]

Thank you. This is what I observed now, if I click on any of the green space, then the pop up is clear. However, if I click on some of the white space, then sometimes the popup is not clear. For example, click 6,290, then click on the first top box (i.e. 350-300,0-2), then it is not clear.

[ivnsch]

Ah, you have to pass chart.bounds instead of chart.frame to the HandlingView. The chart's frame starts at 0,70 which is why the overlay doesn't cover the upper part.