How to Display a Vertical Line Chart with Timestamps on Y-Axis and Values on X-Axis in MPAndroidChart?

  Kiến thức lập trình

I am using the MPAndroidChart library in my Android project to plot a line chart where the Y-axis represents timestamps and the X-axis represents values. I want the chart to be drawn vertically, with the line starting from the top and progressing downward (i.e., the chart should be rotated 90 degrees counterclockwise).

Currently, the chart is drawn horizontally from left to right, but I need the following layout:

  • The Y-axis on the left should display timestamps (in portrait mode).
  • The X-axis at the top should display the corresponding values.
  • The line should be drawn from top to bottom, not from left to right.

I’ve tried rotating the chart using the available settings, but I can’t achieve the desired vertical layout where the chart is drawn downward. Also, I swapped the timestamp data to the Y array and values to the X array, but the chart still draws from left to right.
I also tried using the is setInverted but that only inverts the specific axis.

This is a test project I created for testing this:

drawGraphUsingValues(
            listOf(
                OffsetDateTime.parse("2024-05-02T17:18:10.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
                OffsetDateTime.parse("2024-05-02T17:18:12.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
                OffsetDateTime.parse("2024-05-02T17:18:13.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
                OffsetDateTime.parse("2024-05-02T17:18:15.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
                OffsetDateTime.parse("2024-05-02T17:18:16.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
                OffsetDateTime.parse("2024-05-02T17:18:17.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
                OffsetDateTime.parse("2024-05-02T17:18:18.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME),
                OffsetDateTime.parse("2024-05-02T17:18:19.000+00:00", DateTimeFormatter.ISO_OFFSET_DATE_TIME)
            ),
            listOf(22f, 33f, -11f, 55f, 100f, 200f, 15f, 40f)

        )
private fun drawGraphUsingValues(
        timeStampAxisList: List<OffsetDateTime>,
        valueAxisList: List<Float>,
    ) {

        val minTimestamp = timeStampAxisList.minByOrNull { it.toInstant() }!!.toInstant()

        val entries: MutableList<Entry> = ArrayList()
        valueAxisList.forEachIndexed { index, value ->
            val currentInstant = timeStampAxisList[index].toInstant()
            val millisBetween = ChronoUnit.SECONDS.between(minTimestamp, currentInstant).toFloat()
            entries.add(Entry(value, millisBetween))
        }

        Collections.sort(entries, EntryXComparator())
        val dataSet2 = LineDataSet(entries, "test chart")
        dataSet2.setDrawCircles(true)
        dataSet2.lineWidth = 2f

        binding.lineChart.description.isEnabled = false
        with(binding.lineChart) {
            legend.isEnabled = false
            isDragEnabled = true
            isDoubleTapToZoomEnabled = true

            axisLeft.apply {
                setDrawLabels(true)

                axisMinimum = valueAxisList.min()
                valueFormatter = object : ValueFormatter() {
                    override fun getAxisLabel(value: Float, axis: AxisBase?): String {
                        val baseDate = minTimestamp
                        val duration = Duration.ofSeconds(value.toLong())
                        val date = baseDate.plus(duration)
                        return date.format(DateTimeFormatter.ofPattern("MMM dd yyyy"))
                    }
                }
            }

            setPinchZoom(true)
            setScaleEnabled(true)

            data = LineData(dataSet2)
            invalidate()
        }
    }

This code renders the following:

Actual chart

What I’m trying to achieve is the following:

Desire chart

Is this possible with MPAndroidChart ? if that’s the case could someone provide guidance on how to achieve this orientation using MPAndroidChart? thanks!

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT