javaandroidkotlinmpandroidchart

How to Plot Line Chart in reverse direction ie. starting from right to left direction in Android using MPAndroidChart library?


Hi I am using this library https://github.com/PhilJay/MPAndroidChart and trying to draw line chart from Endpoint to Start point that is from right to left direction, I followed library document and tried to implement below custom class code:

    class CustomLineChartRender(
    chart: LineDataProvider?,
    animator: ChartAnimator?, viewPortHandler: ViewPortHandler?,
) : LineChartRenderer(chart, animator, viewPortHandler) {
    override fun drawHorizontalBezier(dataSet: ILineDataSet) {

        val phaseY = mAnimator.phaseY

        val trans = mChart.getTransformer(dataSet.axisDependency)

        mXBounds[mChart] = dataSet

        cubicPath.reset()

        if (mXBounds.range >= 1) {
            var prev = dataSet.getEntryForIndex(mXBounds.max)
            var cur = prev

            // let the spline start
            cubicPath.moveTo(cur.x, cur.y * phaseY)
            //for (j in mXBounds.min + 1..mXBounds.range + mXBounds.min) {
            for (j in (mXBounds.min until mXBounds.max).reversed()) {
                prev = cur
                cur = dataSet.getEntryForIndex(j)
                val cpx = (prev.x
                        - (prev.x - cur.x) / 2.0f)
                cubicPath.cubicTo(
                    cpx, prev.y * phaseY,
                    cpx, cur.y * phaseY,
                    cur.x, cur.y * phaseY)
            }
        }

        // if filled is enabled, close the path
        if (dataSet.isDrawFilledEnabled) {
            cubicFillPath.reset()
            cubicFillPath.addPath(cubicPath)
            // create a new path, this is bad for performance
            drawCubicFill(mBitmapCanvas, dataSet, cubicFillPath, trans, mXBounds)
        }
        mRenderPaint.color = dataSet.color
        mRenderPaint.style = Paint.Style.STROKE
        trans.pathValueToPixel(cubicPath)
        mBitmapCanvas.drawPath(cubicPath, mRenderPaint)
        mRenderPaint.pathEffect = null
    }
}

But above code stops animation lineChart.animateX(1000, Easing.EasingOption.Linear)starting from right direction at all. Any pointer will be appreciated!!

Current behavior is Line chart start rendering from Left to Right direction and Expected behavior is Line chart should start rendering from Right to Left direction with animation

Thank You


Solution

  • Here is an easy solution I found without any much code if anyone is looking into it:-

    Inside your XML file add one View on top of line chart like that below:-

        <FrameLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
        <com.github.mikephil.charting.charts.LineChart
           android:id="@+id/lineChart"
           android:layout_width="400dp"
           android:layout_height="244dp"/>
        
        <LinearLayout
           android:id="@+id/llOverLay"
           android:layout_width="400dp"
           android:layout_height="200dp"
           android:background="@color/white"/>
       </FrameLayout>
    

    Rendered line chart without animation first

    lineChart?.invalidate()
    

    Then apply reveal animation from right to left which is translate llOverLayView on top of line chart like below

    lineChart?.doOnLayout {
        ObjectAnimator.ofFloat(binding.llOverLay, "translationX", -screenWidth).apply {
                                        duration = 1000
                                        start()
    }
    

    Now this makes Line Chart rendering from right to left and thats it!!

    Please be advised, this approach has one restriction which enforced single or multiple series rendering in one fixed direction. Either forward or reverse direction at the same time.