Skip to content

Support XYDataPoint support in LineDataSet #489

@escay

Description

@escay

Checklist

  • I made sure that there are no existing issues - open or closed - which I could contribute my information to.
  • I have taken the time to fill in all the required details. I understand that the feature request will be dismissed otherwise.
  • This issue contains only one feature request/enhancement.

Description

Support XYDataPoint support in LineDataSet to be able to model a ChartJs graph like:

https://jsfiddle.net/escay/y9j3x5cf/6/

for Time series with non equidistant date values. In pull request #488 you can see an example of how it might work. Although I am not sure if introducing new XYLineDataSet classes would be desired as a solution.

Relevant ChartJs documentation: https://www.chartjs.org/docs/latest/axes/cartesian/time.html where line dataset can contain XYDataPoints:

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [{
                x: '2021-11-06 23:39:30',
                y: 50
            }, {
                x: '2021-11-07 01:00:28',
                y: 60
            }, {
                x: '2021-11-07 09:00:28',
                y: 20
            }]
        }],
    },

Full example of the goal, but using epoch timestamps to let ChartJs do the timezone conversion of the x axis:

{
        "data": {
            "datasets": [
                {
                    "backgroundColor": "rgba(40, 180, 99, 0.3)",
                    "borderColor": "rgb(40, 180, 99)",
                    "borderWidth": 1,
                    "data": [
                        {
                            "x": 1699457269877,
                            "y": 20
                        },
                        {
                            "x": 1700047109694,
                            "y": 20
                        }
                    ],
                    "hidden": false,
                    "label": "Device Id: 524967 Register: A- total Wh",
                },
                {
                    "backgroundColor": "rgba(218, 117, 255, 0.3)",
                    "borderColor": "rgb(218, 117, 255)",
                    "borderWidth": 1,
                    "data": [
                        {
                            "x": 1699457267847,
                            "y": 10
                        },
                        {
                            "x": 1700047108397,
                            "y": 234
                        }
                    ],
                    "hidden": false,
                    "label": "Device Id: 524967 Register: A+ total Wh",
                }
            ]
        },
        "options": {
            "plugins": {
                "legend": {
                    "display": true,
                    "fullWidth": true,
                    "position": "top",
                    "reverse": false,
                    "rtl": false
                },
                "title": {
                    "display": true,
                    "text": "Values from the meter"
                }
            },
            "scales": {
                "x": {
                    "beginAtZero": false,
                    "offset": true,
                    "reverse": false,
                    "stacked": true,
                    "ticks": {
                        "autoSkip": true,
                        "maxRotation": 0,
                        "minRotation": 0,
                        "mirror": false,
                        "source": "data"
                    },
                    "time": {
                        "displayFormats": {
                            "minute": "dd.LL T"
                        },
                        "round": "minute",
                        "stepSize": "60",
                        "unit": "minute"
                    },
                    "type": "time"
                },
                "y": {
                    "beginAtZero": false,
                    "offset": false,
                    "reverse": false,
                    "stacked": true,
                    "ticks": {
                        "autoSkip": true,
                        "mirror": false
                    }
                }
            },
            "showLine": true,
            "spanGaps": false
        },
        "type": "line"
    }

Additional information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions