Custom marker android MP Chart

137 Views Asked by At

enter image description here I have to create a chart view like this with custom marker a dashed line which is draggable over the graph and it shows the points where the marker is left over. I have done the graph view with Mp chart android. How to add this draggable marker over the graph?

here is my graph view implementation.Graph is coming but no markers are showing

   AndroidView(
            factory = { LineChart(it) },
            update = { lineChart ->
                val marker = MarkerView(lineChart.context, R.layout.custom_marker)

                val dataSetList = chartData.map { dataSet ->
                    val entries = dataSet.pointsY.mapIndexed { index, yValue ->
                        Entry(convertTimeToFloat(dataSet.pointsX[index], "HH:mm"), yValue)
                    }
                    LineDataSet(entries, dataSet.legend).apply {
                        color = dataSet.lineColor
                        axisDependency = YAxis.AxisDependency.LEFT
                        cubicIntensity = 1f
                        this.lineWidth = lineWidthPx
                        valueTextColor = valuesColor.toArgb()
                        this.valueTextSize = valueTextSize.value
                        setDrawCircles(false)
                        setDrawValues(false) // Flag to toggle drawing values above points in line
                    }
                }
                lineChart.apply {
                    data = LineData(dataSetList)

                    description.isEnabled = false
                    legend.isEnabled = false

                    // X Axis
                    xAxis.apply {
                        valueFormatter = object : ValueFormatter() {
                            override fun getFormattedValue(value: Float): String {
                                return convertFloatToTime(value, "HH:mm")
                            }
                        }
                        setDrawGridLines(true)
                        setAvoidFirstLastClipping(true)
                        this.setCenterAxisLabels(true)
                        position = XAxis.XAxisPosition.BOTTOM
                        isEnabled = true
                    }

                    axisRight.isEnabled = true
                    axisLeft.isEnabled = false
                    setDrawGridBackground(false)
                    setDrawBorders(false)
                    setBackgroundColor(android.graphics.Color.TRANSPARENT)
                    setTouchEnabled(false)
                    isDragEnabled = true
                    setPinchZoom(true)
                    setScaleEnabled(true)
                    setMarker(marker)
                    setDrawMarkers(true)
                    isHighlightPerTapEnabled = true



                    axisRight.apply {
                        axisLineColor = android.graphics.Color.BLACK
                        setDrawGridLines(true)
                        // axisMaximum = (data.yMax).plus(10f)
                        //axisMinimum = (data.yMin).minus(10f)
                        textColor = android.graphics.Color.BLACK

                    }
                    onChartGestureListener = object : OnChartGestureListener {
                        override fun onChartGestureStart(
                            me: MotionEvent?,
                            lastPerformedGesture: ChartTouchListener.ChartGesture?
                        ) {
                            android.util.Log.e("onChartGestureStart",me.toString())
                            lineChart.setDrawMarkers(true)
                            for (i in 0 until lineChart.lineData.dataSetCount) {
                                val set: ILineDataSet = lineChart.lineData.getDataSetByIndex(i)
                                set.isHighlightEnabled = true
                            }
                            me?.let { event ->
                                lineChart.highlightValue(
                                    lineChart.getHighlightByTouchPoint(
                                        me.x,
                                        me.y
                                    )
                                );

                            }

                        }

                        override fun onChartGestureEnd(
                            me: MotionEvent,
                            lastPerformedGesture: ChartTouchListener.ChartGesture
                        ) {
                            android.util.Log.e("onChartGestureEnd",me.toString())

                            lineChart.setDrawMarkers(false)
                            for (i in 0 until lineChart.lineData.dataSetCount) {
                                val set: ILineDataSet = lineChart.lineData.getDataSetByIndex(i)
                                set.isHighlightEnabled = false
                            }
                            lineChart.invalidate()
                        }

                        override fun onChartLongPressed(me: MotionEvent?) {

                        }

                        override fun onChartDoubleTapped(me: MotionEvent?) {
                            //  TODO("Not yet implemented")
                        }

                        override fun onChartSingleTapped(me: MotionEvent?) {
                            //  TODO("Not yet implemented")
                        }

                        override fun onChartFling(
                            me1: MotionEvent?,
                            me2: MotionEvent?,
                            velocityX: Float,
                            velocityY: Float
                        ) {
                            //                    TODO("Not yet implemented")
                        }

                        override fun onChartScale(me: MotionEvent?, scaleX: Float, scaleY: Float) {
                            //  TODO("Not yet implemented")
                        }

                        override fun onChartTranslate(me: MotionEvent?, dX: Float, dY: Float) {
                            //   TODO("Not yet implemented")
                        }

                        // Implement other gesture listener methods if needed
                        // ...
                    }


                }

            },
            modifier = Modifier
                .fillMaxSize()
                .zIndex(1f)
        )
0

There are 0 best solutions below