How to plot X/Y Specific data

[kevinmamaqi]

Hello,

I have a huge array (sample below) with X and Y values and would like to plot the Y values on the X time, although I can not get my head around it. Any help please?

var dataPoints = [{x:0.000,y:-0.11700000},{x:0.003,y:-0.14400000},{x:0.007,y:-0.17500000},{x:0.010,y:-0.19200000},{x:0.013,y:-0.19900000},{x:0.017,y:-0.20500000},{x:0.020,y:-0.21000000},{x:0.023,y:-0.21400000}]

[nagix]

The x value can be in any of the date formats that Moment.js accepts. You can also use time.parser to specify a custom format to be used by Moment.js to parse the date.

{
    type: 'line',
    data: {
        datasets: [{
            data: [
                {x: '2019-02-01 09:30:15', y: -0.11700000},
                {x: '2019-02-01 09:30:20', y: -0.14400000},
                // ...
            ]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'realtime'
            }]
        }
    }
}

[kevinmamaqi]

Hello @nagix

Thanks for the answer, but I can not figure out how to output the proper values. I used the following code: https://jsfiddle.net/kevinmamaqi/htjkyu8s/35/ to transform each X value in a random (but ordered) milliseconds format, but nothings plots out. Could you take a look please?

[nagix]

First of all, this plugin shows the latest data points for the duration specified by duration. In your example, duration is set to 100 (milliseconds) and delay is 50, so the time range would be between Date.now() - 150 and Date.now() - 50 (milliseconds). Your preset data points '2019-01-01T05:00:00' + XXX are definitely out of the range.

Secondly, new data points need to be appended continuously because the chart is scrolling and data will be removed once it goes off the chart. See the onRefresh function in line chart example or push data feed example.

If your use case is to replay the data stream with the past timestamps, see also #40.

[lianglee]

How to show x/y values randomly while still moving the realtime animation? (x,y both are integer/floats not a time)

[nagix]

@lianglee You mean each datapoint has {x, y, timestamp} data? Chart.js doesn't support a 3D chart with 3 axes, but a workaround would be to map either of x or y value to r (radius in a bubble chart) or a color scale (background color of point/rectangle elements).

If you just want to animate {x, y} data series and a time axis is not needed, you don't need to use this plugin. Update {x, y} datasets and call the update function of the chart instance.

[nagix]

Closing as answered.