CODEWITHSUNDEEP
javascriptd3.js
magic_dev
magic_dev

Reputation: 1439

D3.js line chart, x axis have arbitrary dates, but want to show them sequental

I have a line chart. x axis have dates, but they are not distributed noramally (no data for lunch or weekends), but I want to show them sequential. Sample data and my sample graph is below, I don't want my graph to show straight line for time which has no data, it should continue from previous date.

I use x = d3.time.scale().range([0, width]) to draw x line. Any idea?

x         y
10:00:00  4
10:10:00  5
10:20:00  3
10:30:00  2
10:40:00  5
10:50:00  3
14:30:00  6
14:40:00  7

enter image description here

Upvotes: 0

Views: 644

Answers (1)

SiddP
SiddP

Reputation: 1663

An ordinal scale would do the trick. Try something like this:

Replace x = d3.time.scale().range([0, width]) with below :

var x = d3.scale.ordinal()
    .domain(data.map(function(d) {
        return d.date;
    }))
    .rangeRoundBands([0, width], 0.1);

Upvotes: 5

Related Questions