How to display excel charts on web page

Question

There are about 40 excel sheets that contains hourly performance reports. It has charts in worksheet with color coding.

I need to display excel charts on a webpage so that the charts on webpage also gets updated whenever there is a change in the excel sheet. How can i achieve this?

I am a beginner in a company and this is my first project and I understand that I have to use JavaScript and react for this but I am unsure how to start and what the approach should I take.

Can anyone provide few suggestion how i can begin?

Answer 1

Edit: To combine Excel realtime so that the charts change dynamically (It's backend issue) -

1.You need to connect database with Excel.

2.Create API layer for communication with Frontend & Database.

3.Create Frontend

https://learn.microsoft.com/en-us/azure/sql-database/sql-database-connect-excel

---

For not dynamically:

1. Download data from excel to .csv
2. Convert data to json: http://www.convertcsv.com/csv-to-json.htm
3. Intuitively, you should know which chart will be the most appropriate

4. Choose appropriate library (https://dev.to/giteden/top-5-react-chart-libraries-for-2020-1amb)

5. Now the question is how this data should change? Should they be dynamic? You can start by creating a primitive data display:

You have your data in .json, you can:

• read it from file
• manually
• connect with database

The example component - (of the schema will be more complicated)

const data = [
    {
        "Name": "David",
        "Age": 27,
        "Hour": "7"
    },
    {
        "Name": "Ton",
        "Age": 26,
        "Hour": "12"
    },
    {
        "Name": "Kitty",
        "Age": 30,
        "Hour": "12"
    },
    {
        "Name": "Linda",
        "Age": 30,
        "Hour": "2"
    },
    {
        "Name": "Joe",
        "Age": 40,
        "Hour": "24"
    }
]


      <LineChart width={500} height={300} data={data}>
        <XAxis dataKey="name"/>
        <YAxis/>
        <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
        <Line type="monotone" dataKey="uv" stroke="#8884d8" />
        <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
      </LineChart>