How should I convert my JSON so that I can use it in my Ant Design Line Chart

I'm pulling data from BigQuery to my Django and I convert it into JSON then render it on my frontend (ReactJS) using Ant Design Charts. I need to do a multi line plotting.

My current JSON looks something like this:

[
    {
        "date": "2021-11-12", 
        "hour": "6.0", "predict": 25.6775, 
        "lower_80": 25.775, 
        "upper_80": 26.2, 
        "lower_90": 21.8525, 
        "upper_90": 26.2, 
        "lower_95": 20.92625, 
        "upper_95": 26.2
    }, 
    {
        "date": "2021-11-12", 
        "hour": "7.0", 
        "predict": 26.2, 
        "lower_80": 26.2, 
        "upper_80": 26.2, 
        "lower_90": 26.2, 
        "upper_90": 26.2, 
        "lower_95": 26.2, 
        "upper_95": 26.2
    },
    ...
]

I want to plot each line according to each column (lower_80, upper_80, etc...)

From the Ant Design Charts examples, they have a json data example such as:

[
    {
      "year": "1850",
      "value": 0,
      "category": "Liquid fuel"
    },
    {
      "year": "1850",
      "value": 54,
      "category": "Solid fuel"
    },
    ...
]

They are plotting according to the category column. What is the best way I can turn my data into something similar to their json format?

Note: Since I'm using Django to pull data from BigQuery, it is also possible if there is a solution through data manipulation using Pandas.

Solution

This can be achieved using df.melt() where I take in id_vars parameter which in this case the 'Date' and 'Hour' column. This will turn the dataframe into long format, which later then be converted into a JSON object to achieve the desired output.