How can I add dynamic data in React Google charts in mern stack?

Question

I am unable to dynamic add my data in this chart. It looks like I am trying to create a bar chart using Chart.js and React. my code seems mostly correct, but it's missing some interactivity for dynamic data updates.

import React from 'react';
import {
 Chart as ChartJS,
 CategoryScale,
 LinearScale,
 BarElement,
 Title,
  Tooltip,
 Legend
  } from "chart.js";

   import { Bar } from "react-chartjs-2";
 

   ChartJS.register(
   CategoryScale,
    LinearScale,
     BarElement,
    Title,
    Tooltip,
   Legend );

   const BarChart = ( { CompanyData } ) => {

    const filteredData = new Set();
    const BarData = {};


     CompanyData.forEach( e => {

      filteredData.add( e.relevance );
     } );

       CompanyData.forEach( ( company ) => {
     const location = company.region === '' ? 'city' : 'country';

     if ( !BarData[ company[ location ] ] ) {
         BarData[ company[ location ] ] = 1;
     } else {
     BarData[ company[ location ] ] += 1;
      }
    } );

    const mainData = {
    labels: Object.keys( BarData ),
    datasets: [
  {
    label: 'Country wise City',
    data: Object.values( BarData ),
      backgroundColor: [ '#A0E4CB', '#C6EBC5', '#9ED5C5' ],
     },
    ],
    };
     return (
     <Bar data={ mainData } />
    );
 };
 export default BarChart;

I added a useState hook to manage the chart data as the component state. I used the useEffect hook to update the chart data whenever the CompanyData prop changes. The updateChartData function calculates the new chart data based on the provided data and sets it using setChartData.

Answer 1

check this code for a line chart between temperature and diffusivity. contact the data array with your data. graph

"use client";
import React from "react";
import { Chart } from "react-google-charts";
import { useRouter } from "next/navigation";
import { useState, useEffect } from "react";
import Link from "next/link";
export const dynamic = "force-dynamic";
const Dummy = () => {
  const [graphData, setGraphData] = useState([]);
  const [loading, setLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    fetch("/api/get_diffusivity", { cache: "no-store" })
      .then((res) => res.json())
      .then((data) => {
        setGraphData(data.graphData);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching data:", error);
        setLoading(false);
      });
  }, []);

  const deleteData = () => {
    fetch("/api/delete", {
      method: "DELETE",
    })
      .then((res) => {
        if (!res.ok) {
          throw new Error("Network response was not ok");
        }
        return res.json();
      })
      .then((data) => {
        setGraphData([]);
        router.push("/");
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  };

  const diffusivity = graphData.map((item) => item.diffusivity);
  const temperature = graphData.map((item) => parseFloat(item.temperature));

  const options = {
    pointSize: 5,
    legend: "none",
    hAxis: {
      title: "Temperature",
    },
    vAxis: {
      title: "Diffusivity",
      format: "scientific",
    },
  };

  return (
    <section className="px-4 sm:px-16 flex flex-col justify-center overflow-auto">
      {loading ? (
        "Loading... "
      ) : (
        <div>
          <h1 className="text-2xl font-bold my-4">Graph</h1>
          {graphData.length > 0 ? (
            <div>
              <h2 className="font-semibold mb-2">Temperature vs Diffusivity</h2>
              <div>
                {graphData.map((item, index) => {
                  return (
                    <div className="flex" key={index}>
                      <p className="border-2 px-6 py-1 w-[100px]">
                        {item.temperature}
                      </p>
                      <p className="border-2 px-6 py-1 w-[200px]">
                        {item.diffusivity}
                      </p>
                    </div>
                  );
                })}
              </div>
            </div>
          ) : (
            <Link
              className="border-2 px-4 py-2 w-[200px] text-center hover:bg-gray-400 bg-gray-200 rounded-md"
              href="/">
              Add Data
            </Link>
          )}
          <Chart
            chartType="LineChart"
            data={[["Temperature", "Diffusivity"]].concat(
              diffusivity.map((item, index) => [temperature[index], item])
            )}
            options={options}
            className="sm:w-4/5 w-[500px] h-[500px]"
          />
          <div className="flex flex-col mt-4">
            <Link
              className="border-2 px-4 py-2 w-[200px] text-center hover:bg-gray-400 bg-gray-200 rounded-md"
              href="/">
              Add more Data
            </Link>
            <button
              className="bg-red-600 rounded-md hover:bg-red-800 px-4 py-2 w-[200px] text-white mt-4 mb-8"
              onClick={deleteData}>
              Delete Data
            </button>
          </div>
        </div>
      )}
    </section>
  );
};

export default Dummy;