Need some help for implementing API data in charts

[Shaikh-Aatif]

for example :
{"data":[{"Score":24.0,"month":"Aug","year":2023}],"message":"found successfully.","paging":{},"status":"OK","statusCode":200,"timestamp":"24-08-2023 07:12:44"}

I extracted multiple "Score" 24.0 values into a list and I want to display it in the chart like I am doing in "val chartEntryModelProducer1 = ChartEntryModelProducer(entriesOf(4f, 12f, 8f, 16f)) "
How do i achieve this pardon my English and Sorry if this is a Stupid Question i am a beginner trying to learn

fun Function(data:ArrayList){

        val chartEntryModelProducer1 = ChartEntryModelProducer(entriesOf(4f, 12f, 8f, 16f))


        ProvideChartStyle(rememberChartStyle(columnChartColors, lineChartColors)) {

            val defaultColumns = currentChartStyle.columnChart.columns
            val defaultLines = currentChartStyle.lineChart.lines
            val columnChart = columnChart(
                remember(defaultColumns) {
                    defaultColumns.map { _ ->
                        LineComponent(

                            Color(54,166,125).toArgb(),
                            thicknessDp = 40f,
                            // margins = dimensionsOf(-5.dp),

// shape = Shapes.roundedCornerShape(columnCornerRadius),

                        )
                    }
                },
                maxY = 100f,

                )

            Chart(
                chart = remember(columnChart,) { columnChart  },
                chartModelProducer = chartEntryModelProducer1,

                endAxis =null,
                startAxis = startAxis(

                    guideline = null, tickLength = 5.dp,
                    maxLabelCount = 5,
                    axis = LineComponent(color = Color(224,221,233).toArgb()),
                    tick = LineComponent(color = Color(224,221,233).toArgb()),
                ),
                bottomAxis = bottomAxis(
                    guideline = null,
                    sizeConstraint = Axis.SizeConstraint.TextWidth("Week 1"),
                    axis = LineComponent(color = Color(255, 255, 255).toArgb()),
                    tick = null,
                ),

            )
        }
    }

[patrickmichalik]

Hello! First of all, no need to apologize. It’s a good question, and I’ll be happy to help. Start by creating a ChartEntryModelProducer and linking it to your chart. I presume you have a ViewModel, and you have access to the score list there, so you can put the ChartEntryModelProducer in the ViewModel. Please avoid instantiating ChartEntryModelProducer in composable functions.

val chartEntryModelProducer = ChartEntryModelProducer()

Wherever the list of scores is returned, you can add a call to ChartEntryModelProducer#setEntries. You’ll have to map the scores to ChartEntry instances. Let’s say the list is called scores. You can use something like this:

chartEntryModelProducer.setEntries(scores.mapIndexed { index, score -> entryOf(index, score) })

After this is executed, the chart will be updated. Let me know if that helps.

[Aatif-Thinkitive]

Yes, thank you this works!!

[patrickmichalik]

You’re welcome!