Is there ways to inject past 23 hours data from website

Hello, i currently learning how to inject historical data into MQTT but no luck so far. The data is only being updated every hours and i only learn how to inject the current hour's data. I wanted to inject past 23 hours (follow by hours) to create a graph and table.

I am currently using Node-RED 2

the data in wanted to combine
image

with

image

what i current done so far :

[
    {
        "id": "fe4a8be1e2cfcf9c",
        "type": "tab",
        "label": "Assignment - Mini Project",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "756eed0ccabf585f",
        "type": "inject",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 120,
        "y": 100,
        "wires": [
            [
                "e07b34fecc5dc172"
            ]
        ]
    },
    {
        "id": "e07b34fecc5dc172",
        "type": "http request",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "method": "GET",
        "ret": "obj",
        "paytoqs": "ignore",
        "url": "http://apims.doe.gov.my/data/public_v2/CAQM/last24hours.json",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "senderr": false,
        "x": 290,
        "y": 100,
        "wires": [
            [
                "6471c2fa28c5082b",
                "b882f143cd9b3ef6",
                "cc13d957a1b638fc"
            ]
        ]
    },
    {
        "id": "f955a43de3a266a5",
        "type": "debug",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 1350,
        "y": 100,
        "wires": []
    },
    {
        "id": "b882f143cd9b3ef6",
        "type": "function",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "func": "time = msg.payload[\"24hour_api_apims\"][0][25]\nAPI = msg.payload[\"24hour_api_apims\"][40][25]\nmsg.topic = \"API\"\nmsg.payload = time + \" \" + API\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 500,
        "y": 200,
        "wires": [
            [
                "589894decea145ca"
            ]
        ]
    },
    {
        "id": "6471c2fa28c5082b",
        "type": "debug",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 510,
        "y": 80,
        "wires": []
    },
    {
        "id": "cc13d957a1b638fc",
        "type": "change",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "$now()",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "topic",
                "pt": "msg",
                "to": "timestamp",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 520,
        "y": 140,
        "wires": [
            []
        ]
    },
    {
        "id": "f20c30298dd08d3c",
        "type": "join",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "mode": "custom",
        "build": "object",
        "property": "payload",
        "propertyType": "msg",
        "key": "topic",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 990,
        "y": 160,
        "wires": [
            [
                "00e2f9f131bea172"
            ]
        ]
    },
    {
        "id": "00e2f9f131bea172",
        "type": "json",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "property": "payload",
        "action": "str",
        "pretty": false,
        "x": 1150,
        "y": 160,
        "wires": [
            [
                "f955a43de3a266a5",
                "3a8a40cb7c4b4071"
            ]
        ]
    },
    {
        "id": "3a8a40cb7c4b4071",
        "type": "mqtt out",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "topic": "1905583/mypi/topic1",
        "qos": "0",
        "retain": "",
        "respTopic": "",
        "contentType": "",
        "userProps": "",
        "correl": "",
        "expiry": "",
        "broker": "e24538a1220d8976",
        "x": 1380,
        "y": 160,
        "wires": []
    },
    {
        "id": "a390f917b6627426",
        "type": "function",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "func": "let array = (msg.payload[0]*3600000)\nreturn msg\n\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 460,
        "y": 300,
        "wires": [
            [
                "1471df19b0c580e5"
            ]
        ]
    },
    {
        "id": "4b6194e258e8c688",
        "type": "inject",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 260,
        "y": 300,
        "wires": [
            [
                "a390f917b6627426",
                "db3ec0040b3579e9"
            ]
        ]
    },
    {
        "id": "1471df19b0c580e5",
        "type": "debug",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 610,
        "y": 300,
        "wires": []
    },
    {
        "id": "db3ec0040b3579e9",
        "type": "function",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "func": "let past = msg.payload -(3600) * 1000\nlet pastday = new Date(past).toLocaleString(\"en-US\");\npastday = pastday.replace(\",\",\"\");  // OPTIONAL Remove Commas\nmsg2 = {payload: pastday};\nreturn msg2",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 400,
        "wires": [
            []
        ]
    },
    {
        "id": "118854456cec17b8",
        "type": "change",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "$now()",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 480,
        "y": 340,
        "wires": [
            []
        ]
    },
    {
        "id": "589894decea145ca",
        "type": "debug",
        "z": "fe4a8be1e2cfcf9c",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 810,
        "y": 160,
        "wires": []
    },
    {
        "id": "e24538a1220d8976",
        "type": "mqtt-broker",
        "name": "Hivemq UCCN2513",
        "broker": "broker.hivemq.com",
        "port": "1883",
        "clientid": "",
        "autoConnect": true,
        "usetls": false,
        "protocolVersion": "4",
        "keepalive": "60",
        "cleansession": true,
        "birthTopic": "",
        "birthQos": "0",
        "birthPayload": "",
        "birthMsg": {},
        "closeTopic": "",
        "closeQos": "0",
        "closePayload": "",
        "closeMsg": {},
        "willTopic": "",
        "willQos": "0",
        "willPayload": "",
        "willMsg": {},
        "sessionExpiry": ""
    }
]

MQTT is generally only used to track the current or the last value of something and is not normally used to track historic data.

The best approach is to push the current hour's data to MQTT and have an mqtt-in node listening to the mqtt topic and push the new value to an array context variable. Use the updated context variable to create the chart & table.

is it the same with the node-red UI ?

??? Dashboard (AKA UI) is just for interacting with users, has nothing to do with data stores.