kotlin mpchart setting in yaxis, marker view

28 Views Asked by At

This is the chart I want

enter image description here

my create chart Code

    val chartData = LineData()
    val set1 = LineDataSet(clickCount, "클릭수")
    set1.color = ContextCompat.getColor(itemView.context, R.color.text_mint)
    set1.setCircleColor(ContextCompat.getColor(itemView.context, R.color.text_mint))
    chartData.addDataSet(set1)

    val set2 = LineDataSet(showCount, "조회수")
    set1.color = ContextCompat.getColor(itemView.context, R.color.chart_yellow)
    set1.setCircleColor(ContextCompat.getColor(itemView.context, R.color.chart_yellow))
    chartData.addDataSet(set2)

   // val marker = MyMarkerView(this, android.R.layout.custom_marker_view)

    val mv = CustomMarkerView(itemView.context, R.layout.custom_marker, dayChart)
    mv.chartView = dayChart

    dayChart.setOnChartValueSelectedListener(object :
        OnChartValueSelectedListener {
        override fun onValueSelected(e: Entry, h: Highlight) {
            val highlight = arrayOfNulls<Highlight>(
                dayChart.data.dataSets.size
            )
            for (j in 0 until dayChart.data.dataSets.size) {
                val iDataSet: IDataSet<*> =
                    dayChart.data.dataSets[j]
                for (i in (iDataSet as LineDataSet).values.indices) {
                    if ((iDataSet as LineDataSet).values[i].x == e.x) {
                        highlight[j] = Highlight(e.x, e.y, j)
                    }
                }
            }
            dayChart.highlightValues(highlight)
        }

        override fun onNothingSelected() {}
    })

    dayChart.run {
        data = chartData
        axisLeft.axisMaximum = 1000f
        axisLeft.axisMinimum = 0f
        axisRight.isEnabled = false
        axisLeft.isEnabled = true
        xAxis.isEnabled = false
        legend.isEnabled = true
        description.isEnabled = false
        legend.form = Legend.LegendForm.CIRCLE
        legend.horizontalAlignment = Legend.LegendHorizontalAlignment.RIGHT
        markerView = mv
    }


    dayChart.invalidate()

my custom Market Class

class CustomMarkerView(context: Context?, layoutResource: Int, val lineChart: LineChart) : MarkerView(context, layoutResource) {
    private val tvContent: TextView = findViewById<View>(R.id.tv_date_chart) as TextView
    private val tvViewCount: TextView = findViewById<View>(R.id.tv_view_count) as TextView
    private val tvClickCount: TextView = findViewById<View>(R.id.tv_click_count) as TextView

    private val chartMarker: ConstraintLayout = findViewById<View>(R.id.chart_marker) as ConstraintLayout
    private val totalWidth = resources.displayMetrics.widthPixels

    var count = 0f

    init {
        // this markerview only displays a textview
    }

    // callbacks everytime the MarkerView is redrawn, can be used to update the
    // content (user-interface)
    override fun refreshContent(e: Entry?, highlight: Highlight?) {
        super.refreshContent(e, highlight)

        Timber.d("Chart $e $highlight")

        //tvContent.text = "" + e .getVal() // set the entry-value as the display text
    }


    override fun getOffsetForDrawingAtPoint(posX: Float, posY: Float): MPPointF {
        val supposedX = posX + width
        val mpPointF = MPPointF()

        mpPointF.x = when {
            supposedX > totalWidth -> -width.toFloat()
            posX - width < 0 -> 0f
            else -> 0f
        }

        mpPointF.y = if (posY > height)
            -height.toFloat()
        else
            0f
        return mpPointF
    }

Run screen enter image description here

I would like to place a marker at the top as shown in the picture. How can I do this?

̷1̷.̷ ̷I̷ ̷w̷a̷n̷t̷ ̷t̷o̷ ̷a̷d̷d̷ ̷o̷n̷l̷y̷ ̷o̷n̷e̷ ̷m̷a̷r̷k̷e̷r̷ ̷f̷r̷o̷m̷ ̷m̷u̷l̷t̷i̷p̷l̷e̷ ̷h̷i̷g̷h̷l̷i̷g̷h̷t̷s̷.̷

̷2̷.̷ ̷T̷h̷e̷ ̷m̷a̷x̷i̷m̷u̷m̷ ̷v̷a̷l̷u̷e̷ ̷i̷s̷ ̷b̷r̷o̷k̷e̷n̷ ̷(̷1̷0̷0̷0̷ ̷>̷ ̷,̷0̷0̷0̷)̷

  1. The marker is positioned at the top of the bar.

I would appreciate it if you could tell me the search keyword that can solve the problem.

Issue number 1 was resolved by displaying only one data and providing the data as json at once.

Issue number 2 was a zoom issue and was resolved with zoomout.

0

There are 0 best solutions below