LiveChart
LiveChart copied to clipboard
Visual bugs and data misrepresentation due to smoothing [BUG]
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:
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.
Hey, try to add this line in your xml that hold that view:
android:clipChildren="false"
@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!
I'm still having Issue with chart been clipped
I tried out to add android:clipChildren="false" but nothing changed
can you please suggest me anything I can try to solve it.
thanks in advance!
Hi @baraaaljabban, try to add android:clipChildren="false" to other views above or below LiveChart view. Hope it helps
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.
@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.
@MilanMalovic yep this fixed it temporary thanks
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
@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!