CODEWITHSUNDEEP
javascriptjquerychartschart.js
Baklap4
Baklap4

Reputation: 4202

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
    }
]

Upvotes: 1

Views: 1480

Answers (1)

Krishnakant
Krishnakant

Reputation: 445

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();
  });

Upvotes: 1

Related Questions