DB2 - Chart node - time serie

Dashboard
1

Hi,
I'm starting to use DB2 and struggle with the Chart node.
I have an object containing a time serie that I want to plot

I get the chart to display the input if I put "X-axis type" as "Linear", but the I can format the dates on the x-axis.
If I put the "X-axis type" as "Timescale" that chart is blank after input.
Any ideas on what I'm missing?

[
    {
        "id": "6a15b152e6bbf7a4",
        "type": "ui-chart",
        "z": "087c3e2c9ec31c54",
        "group": "a38af8cdfd40b7a9",
        "name": "graphy",
        "label": "timechart",
        "order": 1,
        "chartType": "line",
        "category": "",
        "categoryType": "none",
        "xAxisLabel": "Date",
        "xAxisProperty": "x",
        "xAxisPropertyType": "property",
        "xAxisType": "time",
        "xAxisFormat": "",
        "xAxisFormatType": "d/L",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "Rainfall [mm]",
        "yAxisProperty": "y",
        "yAxisPropertyType": "property",
        "ymin": "0",
        "ymax": "100",
        "bins": "",
        "action": "replace",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": "8",
        "showLegend": false,
        "removeOlder": "365",
        "removeOlderUnit": "86400",
        "removeOlderPoints": "",
        "colors": [
            "#1f77b4",
            "#aec7e8",
            "#ff7f0e",
            "#2ca02c",
            "#98df8a",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#666666"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": 6,
        "height": 8,
        "className": "",
        "interpolation": "linear",
        "x": 510,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "1b009d913bff4bec",
        "type": "inject",
        "z": "087c3e2c9ec31c54",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "a",
        "payload": "[{\"x\":1734821701,\"y\":50},{\"x\":1740696901,\"y\":10}]",
        "payloadType": "json",
        "x": 330,
        "y": 240,
        "wires": [
            [
                "6a15b152e6bbf7a4"
            ]
        ]
    },
    {
        "id": "a38af8cdfd40b7a9",
        "type": "ui-group",
        "name": "Graphs",
        "page": "aebc2d7fc859603b",
        "width": "6",
        "height": "1",
        "order": 2,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "aebc2d7fc859603b",
        "type": "ui-page",
        "name": "UI2",
        "ui": "8071e69eb67e4e66",
        "path": "/ui2",
        "icon": "",
        "layout": "grid",
        "theme": "6cf98fc8cedde7c6",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "8071e69eb67e4e66",
        "type": "ui-base",
        "name": "UI2",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-control",
            "ui-notification"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "titleBarStyle": "default",
        "showReconnectNotification": false,
        "notificationDisplayTime": 5,
        "showDisconnectNotification": false
    },
    {
        "id": "6cf98fc8cedde7c6",
        "type": "ui-theme",
        "name": "Green",
        "colors": {
            "surface": "#ffffff",
            "primary": "#01bb0c",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]
2

The chart node expect an ISO timestamp or a unix timestamp in milliseconds. Your timestamps are in seconds. Therefore the chart plots them but you limit the chart to display last 365 days. Convert your timestamps to milliseconds or ISO timestamps.

1 Like
3

Thanks, so simple but yet so impacting
I put is seconds as it seems to be written that way is the instruction

  • If your data is an object, you can provide the key of the timestamp in your data, e.g. {"myTime": 1234567890} would set the "X" property to the type key and the value myTime.
4

Understandable, and I don't see any where in the chart doc's that actually states the time formats that the chart accepts.

Does anyone know if the accepted formats are documented? @joepavitt

5

Fair point, oversight on my part, and apologies @Switchblade2 for the mis-leading example. I won't get a chance to fix it before Monday - but if anyone can open a Pull Request in the mean time, they're always welcome

2 Likes