Learning Android Development

Making Graph Plotting Function in Jetpack Compose

Using bezier drawing to beautify graph plotting of scattered points, for Jetpack Compose

Photo by Chris Liverani on Unsplash

Assuming you have several points, and you like to create an App that plots the graph using Jetpack Compose. You know you can use Canvas Path drawing, and draw some lines to connect them up.

However, it looks something like the one below.

This doesn’t look aesthetically pleasing.

How can you make it look better?

Using Quadratic Bezier

In Android Jetpack Compose Canvas, we can draw into a path using Quadratic Bezier, as the API below is provided below.

fun quadraticBezierTo(x1: Float, y1: Float, x2: Float, y2: Float)

With some simple algorithms as guided by this article, we can get something as below.