Can we create realtime chart with this which updates evry second?

[ytheekshana]

Hi. I am creating a linechart with RAM usage. So the used ram will be updated every second. Can I plot this in vico?

[Gowsky]

Hi @ytheekshana , yes, you can. Please check the wiki and the sample app.

[anchithAcharya]

Hi @Gowsky can you please provide links for the same? I didn't find anything related to realtime data in the wiki. I found out about CartesianChartModelProducer.registerForUpdates but it has no documentation nor examples whatsoever. I am trying to make a realtime chart now but I keep getting ANRs.

[Gowsky]

@anchithAcharya, real-time updates work like regular updates, which are described here. You can run runTransaction as many times and as often as you need.

I found out about CartesianChartModelProducer.registerForUpdates

This is meant for internal use, and it's not supposed to show in the API reference. We will hide it. You should not use it directly.

I am trying to make a realtime chart now but I keep getting ANRs

It sounds like you're blocking the main thread, and that's unrelated to Vico. We'd have to see your code to tell you what's wrong.

[anchithAcharya]

This is how I'm trying to implement the real-time updates:

// A class that produces new data once every second
class DataProducer(private val onNewData: (Int) -> Unit) {
    private val handler = Handler(Looper.getMainLooper())

    private fun produceData() {
        onNewData((0 .. 100).random())
        handler.postDelayed({produceData()}, 1000)
    }

    fun start() = produceData()
    fun stop() = handler.removeCallbacksAndMessages(null)
}

@Composable
fun MainComposable() {
    val cartesianChartModelProducer = remember { CartesianChartModelProducer() }
    val chartValues = remember { mutableStateListOf<Int>() }
    val dataProducer = remember { DataProducer { chartValues.add(it) } }
    var isDataProducerEnabled by remember { mutableStateOf(false) }

    LaunchedEffect(chartValues) {
        if (chartValues.isEmpty()) return@LaunchedEffect
        cartesianChartModelProducer.runTransaction {
            lineSeries {
                series(chartValues)
            }
        }
    }

    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(chartValues.size.toString())
        RealtimeChart(cartesianChartModelProducer)
        Switch(checked = isDataProducerEnabled, onCheckedChange = {
            isDataProducerEnabled = !isDataProducerEnabled
            if (isDataProducerEnabled) dataProducer.start()
            else dataProducer.stop()
        })
    }
}

@Composable
fun RealtimeChart(cartesianChartModelProducer: CartesianChartModelProducer) {
    val chart = rememberCartesianChart(
        rememberLineCartesianLayer(),
        startAxis = rememberStartAxis(),
        bottomAxis = rememberBottomAxis()
    )

    Card(
        modifier = Modifier
            .fillMaxWidth(1f)
            .fillMaxHeight(0.8f),
        onClick = {}
    ) {
        CartesianChartHost(
            chart = chart,
            modelProducer = cartesianChartModelProducer,
            placeholder = { Text("No data yet") }
        )
    }
}

I got rid of the ANR, but I still can't get the chart to update when the new values come in. It looks like the code is not entering the LaunchedEffect, even though charValues is changing every time.
I should also mention that I'm running this on Wear OS, in case that makes any difference.

[Gowsky]

@anchithAcharya

It looks like the code is not entering the LaunchedEffect, even though charValues is changing every time.

chartValues is mutated but it's still the same instance of MutableStateList. For a LaunchedEffect to be reinvoked, you need a key that actually changes (instead of being mutated) and causes a recomposition.

[anchithAcharya]

I put chartValues.toList() as the key and sure enough, it worked. Thanks a lot!