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)
)