LiveData Chart

[DSanjulian]

Question

I want to implement a linechart showing live data. I get values from a bluetooth device (aprox 10Hz) and create a mutableList of Pairs (value, timestamp). I then use this list in the chart component:

fun LineChartComponent(points: List<Pair<Float, Float>>) { val chartEntryModelProducer = remember {ChartEntryModelProducer()} val chartEntries = points.map { entryOf(it.second, it.first) } chartEntryModelProducer.setEntries(chartEntries) Chart( chart = lineChart(), chartModelProducer = chartEntryModelProducer, startAxis = rememberStartAxis(guideline = null), bottomAxis = rememberBottomAxis(guideline = null), chartScrollSpec = rememberChartScrollSpec(isScrollEnabled = false), runInitialAnimation = false )

This is not working. I tried to limit the size of the list to even just 10 elements, but didn't help. What I am doing wrong?

Thank you!

Vico version(s)

1.15.0

UI framework(s)

Jetpack Compose

[Gowsky]

Hi @DSanjulian, there are two issues in your code:

1. setEntries is called on each recomposition. Make sure to call the function only when the data changes e.g. by using LaunchedEffect with an appropriate key.
2. Chart uses the default diffAnimationSpec whose animation duration is too long for your use case. You need to provide a custom spec that is not longer than 100 ms (given the 10Hz update rate), or a null one.

Here's a snippet with the required fixes.

@Composable
fun LineChartComponent(points: List<Pair<Float, Float>>) {
    val chartEntryModelProducer = remember { ChartEntryModelProducer() }
    LaunchedEffect(points) {
        chartEntryModelProducer.setEntries(points.map { entryOf(it.first, it.second) })
    }
    Chart(
        chart = lineChart(),
        chartModelProducer = chartEntryModelProducer,
        startAxis = rememberStartAxis(guideline = null),
        bottomAxis = rememberBottomAxis(guideline = null),
        chartScrollSpec = rememberChartScrollSpec(isScrollEnabled = false),
        runInitialAnimation = false,
        diffAnimationSpec = null,
    )
}

[DSanjulian]

Hi Patrick, thanks a lot for the answer!
There's something still wrong, though. The .setEntries seems to not be properly working. I added

Log.d("didi", "Points passed: ${points.joinToString()}") Log.i("didi", "${chartEntryModelProducer.getModel()?.entries}")

And I get:

As you see, even if the list of points keeps growing, when I check the entries of the model there's just one.

[DSanjulian]

Hi @Gowsky,
This is the repository with all the files: Vico1
The problem is that I am getting the data to show in the chart from a bluetooth device, without it you can't test the app. I took the modelproducer out of the chart composable and removed the getModel debug, but it was giving interesting results, as the log was not the same as the one from points.map { entryOf(it.second, it.first) } It's still not working.

I tried implementing it with Vico2 as well, you can find it here: Vico2
But it isn't working either. Here I think the issue might be with the Dispatcher and its delay, as without it it's so slow, but I am not sure.

Thank you!

[Gowsky]

We get 404 when trying to access your repositories. They must be private.

The problem is that I am getting the data to show in the chart from a bluetooth device

Please create a mock data source then.

[DSanjulian]

Ups, sorry, now here you have the project with mock data using vico1 and vico2.
None working.

Thanks

[Gowsky]

First, there are some issues with your usage of Vico and Flow. The main problem however was caused by a growing list of x axis labels. Your axis settings added a label for every entry. The number of entries was very large and drawing hundreds (or more) labels slowed down the main thread. Ultimately, such settings don't make sense in this case as all the labels would get truncated. Here's an updated version of LiveData.kt (for Vico 2) with issues fixed and suggested bottom axis settings. This should perform as expected.

package com.example.bichomaker

import MockBTReader
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.patrykandpatrick.vico.compose.cartesian.CartesianChartHost
import com.patrykandpatrick.vico.compose.cartesian.axis.rememberBottomAxis
import com.patrykandpatrick.vico.compose.cartesian.axis.rememberStartAxis
import com.patrykandpatrick.vico.compose.cartesian.fullWidth
import com.patrykandpatrick.vico.compose.cartesian.layer.rememberLineCartesianLayer
import com.patrykandpatrick.vico.compose.cartesian.rememberCartesianChart
import com.patrykandpatrick.vico.compose.cartesian.rememberVicoScrollState
import com.patrykandpatrick.vico.core.cartesian.HorizontalLayout
import com.patrykandpatrick.vico.core.cartesian.axis.HorizontalAxis
import com.patrykandpatrick.vico.core.cartesian.data.AxisValueOverrider
import com.patrykandpatrick.vico.core.cartesian.data.CartesianChartModelProducer
import com.patrykandpatrick.vico.core.cartesian.data.lineSeries
import kotlin.math.roundToInt
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext

@Composable
fun LiveDataScreen() {
    val context = LocalContext.current
    val btReader = remember { MockBTReader(context) }
    var weight by remember { mutableFloatStateOf(0f) }
    var maxValue by remember { mutableFloatStateOf(0f) }
    var time by remember { mutableFloatStateOf(0f) }
    val graphPoints = remember {
        mutableStateListOf<Pair<Float, Float>>()
    } // Sin limitar numero de puntos
    val modelProducer = remember { CartesianChartModelProducer() }

    LaunchedEffect(Unit) {
        withContext(Dispatchers.Default) {
            btReader.lectura.collect { newEntry ->
                weight = newEntry.first
                time = newEntry.second
                if (weight > maxValue) {
                    maxValue = newEntry.first
                }
                graphPoints.add(Pair(weight, time))
                modelProducer.runTransaction {
                    lineSeries {
                        series(x = graphPoints.map { it.second }, y = graphPoints.map { it.first })
                    }
                }
            }
        }
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Text(
                text = "$weight kg",
                fontSize = 48.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.padding(start = 16.dp)
            )
            Text(
                text = "Max: $maxValue kg",
                fontSize = 24.sp,
                modifier = Modifier.padding(end = 16.dp)
            )
        }
        Spacer(modifier = Modifier.height(8.dp))
        Text(
            text = "${time.roundToInt()} s",
            fontSize = 24.sp,
            modifier = Modifier.padding(end = 16.dp)
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { maxValue = 0.0f }) { Text(text = "Reset Max") }
        Spacer(modifier = Modifier.height(16.dp))
        LineChartComponent(modelProducer)
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { graphPoints.clear() }) { Text(text = "Reset") }
    }
}

@Composable
fun LineChartComponent(modelProducer: CartesianChartModelProducer) {
    CartesianChartHost(
        chart =
            rememberCartesianChart(
                rememberLineCartesianLayer(
                    axisValueOverrider = AxisValueOverrider.auto() // .fixed( 0 20 0 50)
                ),
                startAxis = rememberStartAxis(guideline = null),
                bottomAxis =
                    rememberBottomAxis(
                        guideline = null,
                        itemPlacer =
                            remember {
                                HorizontalAxis.ItemPlacer.default(addExtremeLabelPadding = true)
                            },
                    ),
                horizontalLayout = HorizontalLayout.fullWidth(),
            ),
        modelProducer = modelProducer,
        animationSpec = null,
        runInitialAnimation = false,
        scrollState = rememberVicoScrollState(scrollEnabled = false)
    )
}

[DSanjulian]

It's working now! Thank you so much, you've been a great help!
One last thing: I am not able to make the graph show the axis label values :S

Thanks again!

[Gowsky]

What axis label values? That's how it's supposed to look with the code we've provided.

[DSanjulian]

Weird, in my phone Huawei with EMUI 12.0.0 looks like this:

[Gowsky]

@DSanjulian it looks like your device is using dark mode which your app doesn't support. Vico adjusts its color to dark mode and uses white color for the labels. You can see it in your screenshot. You have to adjust your screen's background color or the labels' color.

[DSanjulian]

That was it, thank you very much @Gowsky!

[Gowsky]

You're welcome!