How to pass data in react-google-charts effectively without hardcoding?

Question

So my code is working absolutely fine my array is in correct syntax everything is fine

But i find myself hardcoding data manually in JSX ( in <Chart data = )

Problem

Right now i have 20 elements i will have to hardcode it manually which isnt very efficient .. is there a better way to do this ?

import React from 'react'
import Chart from "react-google-charts"
import {useSelector} from 'react-redux'
const Graph = () => {

    const products = useSelector(state => state.products)

    const colors = ['#51e2f5','#9df9ef','#edf756','#ffa8B6','#a28089','#a0d2eb','#e5eaf5','#d0bdf4','#8458B3','#a28089']
    for(var i=0;i<10;i++) {
        products[i].color = colors[i]
    }
    for(i =10;i<20;i++) {
        products[i].color = colors[i-10]
    }
    const arr = products.map((prod) => {
        return [prod.productName,parseInt(prod.price),prod.color,null]
    })

    return (
        <Chart
        {...console.log(arr[0])}
            width={'500px'}
            height={'300px'}
            chartType="BarChart"
            loader={<div>Loading Chart</div>}
            data={[
                [
                    'Element',
                    'Density',
                    { role: 'style' },
                    {
                        sourceColumn: 0,
                        role: 'annotation',
                        type: 'string',
                        calc: 'stringify',
                    },
                ],
                // ['Copper', 8.94, '#b87333', null],
                // ['Silver', 10.49, 'silver', null],       // this is the data format expected
                // ['Gold', 19.3, 'gold', null],
                // ['Platinum', 21.45, 'color: #e5e4e2', null],

                [arr[0][0],arr[0][1],arr[0][2],arr[0][3]],
                [arr[1][0],arr[1][1],arr[1][2],arr[1][3]],      // i want to do this 20 times i.e first index goes till 20 (now going till 3)
                [arr[2][0],arr[2][1],arr[2][2],arr[2][3]],
                [arr[3][0],arr[3][1],arr[3][2],arr[3][3]],


            ]}
            options={{
                title: 'Density of Precious Metals, in g/cm^3',
                width: 600,
                height: 400,
                bar: { groupWidth: '95%' },
                legend: { position: 'none' },
            }}
            // For tests
            rootProps={{ 'data-testid': '6' }}
        />
    )
}

export default Graph

score 2 · Accepted Answer · answered Aug 24 '20 at 14:17

You can use the spread operator

   data={[
            [
                'Element',
                'Density',
                { role: 'style' },
                {
                    sourceColumn: 0,
                    role: 'annotation',
                    type: 'string',
                    calc: 'stringify',
                },
            ],

            ...arr


        ]}

score 1 · Answer 2 · answered Aug 24 '20 at 14:26

I worked on a similar project recently. I was getting JSON data via AJAX and then needed to build my own function to create the data in a form Google Chart accepts.

Instead of hardcoding that data in the data property, simply create a function which needs to generate the array in the proper format. Then that function should return the data you need and use it in the data property.

Your hardcoding approach is fine, but convert that to a function and you'll be fine. What I did was to store the data in the state just in case the data changed.

I am converting the data `arr` contains all the info needed i will add a snippet of what `arr` contains hold on — Phil, Aug 24 '20 at 14:34

How to pass data in react-google-charts effectively without hardcoding?

2 Answers2