How to solve React Google Chart Error: "Data column(s) for axis #0 cannot be of type string"?

62 views Asked by At

I am trying to create a React google chart component (LineChart) and i want it to be dynamic (Displaying according to the data coming from my Database).

i structured the data skeleton according to how React Google Chart is waiting the data to be Exple:

export const bodyMassdata = [
["Year", "index"],
["Jan", 23],
["Feb", 13],
["Mar", 33],
["Apr", 14],
["May", 46],
["Jun", 18,],
["Jul", 20],
["Aug", 57],
["Sep", 26],
["Oct", 29],
["Nov", 13],
["Dec", 37],

]

then:

<GraphComponent
                            graphID={"patientBodyMass"}
                            width={"100%"}
                            height={"270px"}
                            chartType={"LineChart"}
                            data={bodyMassdata}
                            options={bodyIndexOptions}
                        />

By doing it with hardcore data, it works fine: enter image description here

This is what i did to render it as dynamic. I declared the array at first:

let bmiData = [
    ["test", "Charger"]
];

then i updated it with the data coming from the backend.

useEffect(()=>{
    if (clinicEntries.length > 0) {
        clinicEntries.map((item: ClinicEntry) => {
            bmiData.push([new Date(item.dateAdd).toLocaleString('default', { month: 'short' }), item.bodyMassIndex as any]);
        });
    }

    console.log("BodyMassIindex array:", bmiData);

    console.log("First ARRAY", bodyMassdata);
    
}, [clinicEntries])

then when i passed the "bmiData" to the graph component as Data i have his error: enter image description here

i did a console.log of the "bmiData" to see if it is tructured as the graph is waiting and it is correct. If you noticed, it is the exact and same structure as the hardcore data.

0

There are 0 answers