How do I synchronise zooming/scrolling/panning for multiple ios charts?

Question

I have a page in my app that displays multiple (16) charts using Daniel Gindi's Charts library. I have them arranged in a stackview so that I can toggle their display on/off. I would like to be able to synchronise zooming/pannning/scrolling of the graphs. They will all be sharing the same x-axis.

I have come across this like (https://github.com/danielgindi/Charts/issues/1415) but I could not get it to work for my case. I tried it 2 ways.

First way:

func translateCharts (chartView: CombinedChartView) {
        let currentMatrix = chartView.viewPortHandler.touchMatrix
        lineChart1.viewPortHandler.refresh(newMatrix: __CGAffineTransformMake(lineChart1.viewPortHandler.touchMatrix.a
            , lineChart1.viewPortHandler.touchMatrix.b, lineChart1.viewPortHandler.touchMatrix.c, lineChart1.viewPortHandler.touchMatrix.d, currentMatrix.tx, lineChart1.viewPortHandler.touchMatrix.ty), chart: lineChart1, invalidate: true)

        lineChart2.viewPortHandler.refresh(newMatrix: __CGAffineTransformMake(lineChart2.viewPortHandler.touchMatrix.a
            , lineChart2.viewPortHandler.touchMatrix.b, lineChart2.viewPortHandler.touchMatrix.c, lineChart2.viewPortHandler.touchMatrix.d, currentMatrix.tx, lineChart2.viewPortHandler.touchMatrix.ty), chart: lineChart2, invalidate: true)

        lineChart3.viewPortHandler.refresh(newMatrix: __CGAffineTransformMake(lineChart3.viewPortHandler.touchMatrix.a
            , lineChart3.viewPortHandler.touchMatrix.b, lineChart3.viewPortHandler.touchMatrix.c, lineChart3.viewPortHandler.touchMatrix.d, currentMatrix.tx, lineChart3.viewPortHandler.touchMatrix.ty), chart: lineChart3, invalidate: true)

            . . .

        lineChart16.viewPortHandler.refresh(newMatrix: __CGAffineTransformMake(lineChart16.viewPortHandler.touchMatrix.a
            , lineChart16.viewPortHandler.touchMatrix.b, lineChart16.viewPortHandler.touchMatrix.c,  lineChart16.viewPortHandler.touchMatrix.d, currentMatrix.tx, lineChart16.viewPortHandler.touchMatrix.ty), chart: lineChart16, invalidate: true)

    }

I tried the above method because I thought the solution I found online was more complicated than it needed to be. Then I tried to replicate the solution more closely:

func translateCharts (chartView: CombinedChartView) {
    if chartView == lineChart1 {
        let newMatrix = chartView.viewPortHandler.touchMatrix

        let oldMatrix2 = lineChart2.viewPortHandler.touchMatrix
        let currentMatrix2 = CGAffineTransform(a: oldMatrix2.a, b: oldMatrix2.b, c: oldMatrix2.c, d: oldMatrix2.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart2.viewPortHandler.refresh(newMatrix: currentMatrix2, chart: lineChart2, invalidate: true)

        let oldMatrix3 = lineChart3.viewPortHandler.touchMatrix
        let currentMatrix3 = CGAffineTransform(a: oldMatrix3.a, b: oldMatrix3.b, c: oldMatrix3.c, d: oldMatrix3.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart3.viewPortHandler.refresh(newMatrix: currentMatrix3, chart: lineChart3, invalidate: true)

        let oldMatrix4 = lineChart4.viewPortHandler.touchMatrix
        let currentMatrix4 = CGAffineTransform(a: oldMatrix4.a, b: oldMatrix4.b, c: oldMatrix4.c, d: oldMatrix4.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart4.viewPortHandler.refresh(newMatrix: currentMatrix4, chart: lineChart4, invalidate: true)

        let oldMatrix5 = lineChart5.viewPortHandler.touchMatrix
        let currentMatrix5 = CGAffineTransform(a: oldMatrix5.a, b: oldMatrix5.b, c: oldMatrix5.c, d: oldMatrix5.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart5.viewPortHandler.refresh(newMatrix: currentMatrix5, chart: lineChart5, invalidate: true)

        let oldMatrix6 = lineChart6.viewPortHandler.touchMatrix
        let currentMatrix6 = CGAffineTransform(a: oldMatrix6.a, b: oldMatrix6.b, c: oldMatrix6.c, d: oldMatrix6.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart6.viewPortHandler.refresh(newMatrix: currentMatrix6, chart: lineChart6, invalidate: true)

        let oldMatrix7 = lineChart3.viewPortHandler.touchMatrix
        let currentMatrix7 = CGAffineTransform(a: oldMatrix7.a, b: oldMatrix7.b, c: oldMatrix7.c, d: oldMatrix7.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart7.viewPortHandler.refresh(newMatrix: currentMatrix7, chart: lineChart7, invalidate: true)

        let oldMatrix8 = lineChart8.viewPortHandler.touchMatrix
        let currentMatrix8 = CGAffineTransform(a: oldMatrix8.a, b: oldMatrix8.b, c: oldMatrix8.c, d: oldMatrix8.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart8.viewPortHandler.refresh(newMatrix: currentMatrix8, chart: lineChart8, invalidate: true)

        let oldMatrix9 = lineChart9.viewPortHandler.touchMatrix
        let currentMatrix9 = CGAffineTransform(a: oldMatrix9.a, b: oldMatrix9.b, c: oldMatrix9.c, d: oldMatrix9.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart9.viewPortHandler.refresh(newMatrix: currentMatrix9, chart: lineChart9, invalidate: true)

        let oldMatrix10 = lineChart10.viewPortHandler.touchMatrix
        let currentMatrix10 = CGAffineTransform(a: oldMatrix10.a, b: oldMatrix10.b, c: oldMatrix10.c, d: oldMatrix10.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart10.viewPortHandler.refresh(newMatrix: currentMatrix10, chart: lineChart10, invalidate: true)

        let oldMatrix11 = lineChart11.viewPortHandler.touchMatrix
        let currentMatrix11 = CGAffineTransform(a: oldMatrix11.a, b: oldMatrix11.b, c: oldMatrix11.c, d: oldMatrix11.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart11.viewPortHandler.refresh(newMatrix: currentMatrix11, chart: lineChart11, invalidate: true)

        let oldMatrix12 = lineChart12.viewPortHandler.touchMatrix
        let currentMatrix12 = CGAffineTransform(a: oldMatrix12.a, b: oldMatrix12.b, c: oldMatrix12.c, d: oldMatrix12.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart12.viewPortHandler.refresh(newMatrix: currentMatrix12, chart: lineChart12, invalidate: true)

        let oldMatrix13 = lineChart13.viewPortHandler.touchMatrix
        let currentMatrix13 = CGAffineTransform(a: oldMatrix13.a, b: oldMatrix13.b, c: oldMatrix13.c, d: oldMatrix13.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart13.viewPortHandler.refresh(newMatrix: currentMatrix13, chart: lineChart13, invalidate: true)

        let oldMatrix14 = lineChart14.viewPortHandler.touchMatrix
        let currentMatrix14 = CGAffineTransform(a: oldMatrix14.a, b: oldMatrix14.b, c: oldMatrix14.c, d: oldMatrix14.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart14.viewPortHandler.refresh(newMatrix: currentMatrix14, chart: lineChart14, invalidate: true)

        let oldMatrix15 = lineChart15.viewPortHandler.touchMatrix
        let currentMatrix15 = CGAffineTransform(a: oldMatrix15.a, b: oldMatrix15.b, c: oldMatrix15.c, d: oldMatrix15.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart15.viewPortHandler.refresh(newMatrix: currentMatrix15, chart: lineChart15, invalidate: true)

        let oldMatrix16 = lineChart16.viewPortHandler.touchMatrix
        let currentMatrix16 = CGAffineTransform(a: oldMatrix16.a, b: oldMatrix16.b, c: oldMatrix16.c, d: oldMatrix16.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart16.viewPortHandler.refresh(newMatrix: currentMatrix16, chart: lineChart16, invalidate: true)


                        . . .


    } else if chartView == lineChart16 {
        let newMatrix = chartView.viewPortHandler.touchMatrix

        let oldMatrix1 = lineChart1.viewPortHandler.touchMatrix
        let currentMatrix1 = CGAffineTransform(a: oldMatrix1.a, b: oldMatrix1.b, c: oldMatrix1.c, d: oldMatrix1.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart1.viewPortHandler.refresh(newMatrix: currentMatrix1, chart: lineChart1, invalidate: true)

        let oldMatrix2 = lineChart2.viewPortHandler.touchMatrix
        let currentMatrix2 = CGAffineTransform(a: oldMatrix2.a, b: oldMatrix2.b, c: oldMatrix2.c, d: oldMatrix2.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart2.viewPortHandler.refresh(newMatrix: currentMatrix2, chart: lineChart2, invalidate: true)

        let oldMatrix3 = lineChart3.viewPortHandler.touchMatrix
        let currentMatrix3 = CGAffineTransform(a: oldMatrix3.a, b: oldMatrix3.b, c: oldMatrix3.c, d: oldMatrix3.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart3.viewPortHandler.refresh(newMatrix: currentMatrix3, chart: lineChart3, invalidate: true)

        let oldMatrix4 = lineChart4.viewPortHandler.touchMatrix
        let currentMatrix4 = CGAffineTransform(a: oldMatrix4.a, b: oldMatrix4.b, c: oldMatrix4.c, d: oldMatrix4.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart4.viewPortHandler.refresh(newMatrix: currentMatrix4, chart: lineChart4, invalidate: true)

        let oldMatrix5 = lineChart5.viewPortHandler.touchMatrix
        let currentMatrix5 = CGAffineTransform(a: oldMatrix5.a, b: oldMatrix5.b, c: oldMatrix5.c, d: oldMatrix5.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart5.viewPortHandler.refresh(newMatrix: currentMatrix5, chart: lineChart5, invalidate: true)

        let oldMatrix6 = lineChart6.viewPortHandler.touchMatrix
        let currentMatrix6 = CGAffineTransform(a: oldMatrix6.a, b: oldMatrix6.b, c: oldMatrix6.c, d: oldMatrix6.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart6.viewPortHandler.refresh(newMatrix: currentMatrix6, chart: lineChart6, invalidate: true)

        let oldMatrix7 = lineChart7.viewPortHandler.touchMatrix
        let currentMatrix7 = CGAffineTransform(a: oldMatrix7.a, b: oldMatrix7.b, c: oldMatrix7.c, d: oldMatrix7.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart7.viewPortHandler.refresh(newMatrix: currentMatrix7, chart: lineChart7, invalidate: true)

        let oldMatrix8 = lineChart8.viewPortHandler.touchMatrix
        let currentMatrix8 = CGAffineTransform(a: oldMatrix8.a, b: oldMatrix8.b, c: oldMatrix8.c, d: oldMatrix8.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart8.viewPortHandler.refresh(newMatrix: currentMatrix8, chart: lineChart8, invalidate: true)

        let oldMatrix9 = lineChart9.viewPortHandler.touchMatrix
        let currentMatrix9 = CGAffineTransform(a: oldMatrix9.a, b: oldMatrix9.b, c: oldMatrix9.c, d: oldMatrix9.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart9.viewPortHandler.refresh(newMatrix: currentMatrix9, chart: lineChart9, invalidate: true)

        let oldMatrix10 = lineChart10.viewPortHandler.touchMatrix
        let currentMatrix10 = CGAffineTransform(a: oldMatrix10.a, b: oldMatrix10.b, c: oldMatrix10.c, d: oldMatrix10.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart10.viewPortHandler.refresh(newMatrix: currentMatrix10, chart: lineChart10, invalidate: true)

        let oldMatrix11 = lineChart11.viewPortHandler.touchMatrix
        let currentMatrix11 = CGAffineTransform(a: oldMatrix11.a, b: oldMatrix11.b, c: oldMatrix11.c, d: oldMatrix11.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart11.viewPortHandler.refresh(newMatrix: currentMatrix11, chart: lineChart11, invalidate: true)

        let oldMatrix12 = lineChart12.viewPortHandler.touchMatrix
        let currentMatrix12 = CGAffineTransform(a: oldMatrix12.a, b: oldMatrix12.b, c: oldMatrix12.c, d: oldMatrix12.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart12.viewPortHandler.refresh(newMatrix: currentMatrix12, chart: lineChart12, invalidate: true)

        let oldMatrix13 = lineChart13.viewPortHandler.touchMatrix
        let currentMatrix13 = CGAffineTransform(a: oldMatrix13.a, b: oldMatrix13.b, c: oldMatrix13.c, d: oldMatrix13.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart13.viewPortHandler.refresh(newMatrix: currentMatrix13, chart: lineChart13, invalidate: true)

        let oldMatrix14 = lineChart14.viewPortHandler.touchMatrix
        let currentMatrix14 = CGAffineTransform(a: oldMatrix14.a, b: oldMatrix14.b, c: oldMatrix14.c, d: oldMatrix14.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart14.viewPortHandler.refresh(newMatrix: currentMatrix14, chart: lineChart14, invalidate: true)

        let oldMatrix15 = lineChart15.viewPortHandler.touchMatrix
        let currentMatrix15 = CGAffineTransform(a: oldMatrix15.a, b: oldMatrix15.b, c: oldMatrix15.c, d: oldMatrix15.d, tx: newMatrix.tx, ty: newMatrix.ty)
        lineChart15.viewPortHandler.refresh(newMatrix: currentMatrix15, chart: lineChart15, invalidate: true)

    }

}

In both cases the app still runs just fine. The graphs display as per normal. Only problem is that the graphs do not zoom/scroll/pan together.

try these `chartView.pinchZoomEnabled = true` `chartView.doubleTapToZoomEnabled = true` — channu, Aug 20 '19 at 06:04
thank you for your reply! but it doesn't seem to have worked. My github repo is here if you want to check it out (https://github.com/danialaqil/TFAApp/blob/master/AlarmChartsApp/LineChartController.swift) — danaq, Aug 20 '19 at 06:16
Does anyone else have any idea how to approach the problem? I am really stuck :/ — danaq, Aug 22 '19 at 08:14

How do I synchronise zooming/scrolling/panning for multiple ios charts?

0 Answers0