LiveChart icon indicating copy to clipboard operation
LiveChart copied to clipboard

Visual bugs and data misrepresentation due to smoothing [BUG]

Open EdwardvanRaak opened this issue 4 years ago • 8 comments

Describe the bug Great lib, love the simple designs.

It's however possible with certain datasets and configurations to get some quite strange looking graphs.

As an example take (over-exaggerated) dataset:

Dataset(
     mutableListOf(
         DataPoint(0f, 0f),
         DataPoint(1f, 3.7f),
         DataPoint(2f, 3.6f),
         DataPoint(3f, 3.5f),
         DataPoint(4f, 0f),
         DataPoint(5f, 3.2f),
         DataPoint(6f, 0f),
         DataPoint(7f, 3.3f),
         DataPoint(8f, 0f)
     )
)

With XML

    <com.yabu.livechart.view.LiveChart
        android:id="@+id/dimensions_live_chart"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_marginStart="36dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="36dp"
        android:layout_marginBottom="32dp"
        app:layout_constraintBottom_toBottomOf="..."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="..." />

And code

        holder.dimensionsLiveChart.setDataset(it)
                .drawSmoothPath()
                .drawFill(false)
                .drawHorizontalGuidelines(steps = 3)
                .drawBaselineConditionalColor()
                .setBaselineManually(3f)
                .setOnTouchCallbackListener(object : LiveChart.OnTouchCallback {
                    @SuppressLint("SetTextI18n")
                    override fun onTouchCallback(point: DataPoint) {
                        //ommited
                    }

                    override fun onTouchFinished() {
                        //omitted
                    }
                })
                .drawDataset()
        }

This results in:

Screenshot from 2021-01-20 14-18-44

The bugs I discovered:

  • Due to line smoothing, datapoints can incorrectly return values that are higher or lower than the min/max values that were provided in the dataset. For example: using the provided dataset above you can retrieve data point 3.88 which is a point provided by smoothing but not a real value. As smoothing is a pure "visual" feature, I find it strange that datapoints are not accurately returned in this case.
  • It appears line smoothing does not work in conjunctions with the fill color in extreme cases, as fill color is not smoothed. As you can see in the screenshot, "pyramid shapes" are formed of the fill color.
  • I'm having problems where the lines are cropped off above or below the chart. This is especially clear when using smoothing, as the large bend artificially makes the graph bigger. I'm wondering how I can fix this, as including padding in XML breaks the graph even further and is clearly not supported.

EdwardvanRaak avatar Jan 20 '21 13:01 EdwardvanRaak

Hey, try to add this line in your xml that hold that view:

android:clipChildren="false"

MilanMalovic avatar Jan 22 '21 13:01 MilanMalovic

@MilanMalovic Yeah that worked for the clipping issue. I now see that it was included in the XML in the README as well, but totally missed it so thanks for that!

The other issues are less visible on large datasets and I can smooth out the original data points myself anyway, so for now I'm good!

EdwardvanRaak avatar Jan 24 '21 20:01 EdwardvanRaak

I'm still having Issue with chart been clipped I tried out to add android:clipChildren="false" but nothing changed photo_2021-02-15_12-03-11 can you please suggest me anything I can try to solve it. thanks in advance!

baraaaljabban avatar Feb 15 '21 04:02 baraaaljabban

Hi @baraaaljabban, try to add android:clipChildren="false" to other views above or below LiveChart view. Hope it helps

MilanMalovic avatar Feb 15 '21 16:02 MilanMalovic

Awesome charts!

I am not surprised if there is some issues with the smooth lines 🤕, especially with the fill. I'll raise two bugs for smoothing lines returning incorrect data points and for smooth fill inconsistencies.

Pfuster12 avatar Feb 15 '21 17:02 Pfuster12

@EdwardvanRaak You are right the drawSmoothPath() feature creates a new Path and it reads data points from the new path. Will have to figure out a way to maintain fidelity with the original dataset but display and follow the smooth path in the touch overlay.

Pfuster12 avatar Feb 15 '21 17:02 Pfuster12

@MilanMalovic yep this fixed it temporary thanks s I think there still some work to do because it dose not seems to be 100% ok as you guys munitioned up there in the comments

baraaaljabban avatar Feb 17 '21 08:02 baraaaljabban

@Pfuster12 thank you! and thanks to you my friend for what you have done and for this repo! I'll be waiting for the next update! thank you guys!

baraaaljabban avatar Feb 17 '21 08:02 baraaaljabban