Using dynamic data for google charts

Question

I am creating a my googlecharts in react like so:

            <Chart 
            width={'inherit'}
            height={'400px'}
            chartType={'PieChart'}
            loader={<div>Loading Data...</div>}
            data={[
                ['Stats', 'All Stats'],
                ['Submitted', 3],
                ['Reviewed', 5],
                ['Approved', 3],
                ['Rejected', 2],
                
            ]}
            options={{title: 'Statistics'}}
            rootProps={{'data-testid' : '1'}} 
        />

with the hard coded data, it works and I get the chart. I would however like to use a dynamic value that i get in the component like so:

const statList = stats && stats.length

when I do:

            data={[
                ['Stats', 'All Stats'],
                ['Submitted', {statList} ],
                ['Reviewed', 5],
                ['Approved', 3],
                ['Rejected', 2],
                
            ]}

It doesnt work. anyone know how to go about this. Will really appreciate any help. Thanks

score 0 · Accepted Answer · answered Jul 03 '20 at 19:19

Since you are passing an Array to data prop, you don't need brackets around statList. Just remove them and you'r good.

Here's a little example:

const chart = () => {

    const submitted = ['john', 'hopkins', 'junior']

    const data = [
        ['Stats', 'All Stats'],
        ['Submitted', submitted.length],
        ['Reviewed', 5],
        ['Approved', 3],
        ['Rejected', 2],
    ];

    return (
        <Chart
            width={'inherit'}
            height={'400px'}
            chartType={'PieChart'}
            loader={<div>Loading Data...</div>}
            data={data}
            options={{ title: 'Statistics' }}
            rootProps={{ 'data-testid': '1' }}
        />
    )
}

Using dynamic data for google charts

1 Answers1