Baklap4 Baklap4 - 6 months ago 257
Javascript Question

Add Time Scaling to linechart (Chart.js)

Heey all,

I'm using chartjs to generate a view charts. The data is loaded correctly now but i'm having troubles with the x-axis labels.
As Chart.js does support a time scale i was wondering how it does work?
The timeline will should be dynamic. And should show values over time.

This is what i've tried so far but somehow i don't get time values at my x-axis.
https://jsfiddle.net/fwxvb2zp/1/

I'm using the lastest Chart.js (2.1.2)

As you guys maybe see within the object there is a timestamp available. This is the timestamp to use for the data to be inserted in the graph.
The object i'm sending is as following:

var object = [
{
"avg_c_p_u":[
0.56,
0.38,
0.33
],
"timestamp":1463054879000
}
]

Answer
see below updated method from your jsFiddle code:
add below 2 lines:

chartdata.data.labels.shift();
chartdata.data.labels.push(Math.random().toFixed(2));


$.each(data, function() {
    var tmp = chartdata.data.datasets[0].data;
    tmp.shift();
    tmp.push(this['avg_c_p_u'][0]*100);
    chartdata.data.datasets[0].data = tmp;
    chartdata.data.labels.shift(); //new line
    chartdata.data.labels.push(Math.random().toFixed(2));//new line
    chartdata.update();
  });