jiahuang / d3-timeline

Simple JS timeline plugin for d3
1.04k stars 281 forks source link

does it work for dates (not times)? #45

Closed dpdonohue closed 9 years ago

dpdonohue commented 9 years ago

All your examples seem to show just time of a day. Can your timeline represent multiple years?

Jonwheeler commented 9 years ago

Yes, you should be able to. I've been using this with dates that span multiple years. You pass the chart unix timestamps in milliseconds. You can then pass options to tickFormat()

e.g.

{
  format: d3.time.format("%I %p"),
  tickTime: d3.time.hours,
  tickInterval: 1,
  tickSize: 6
}

Full example:

var data = [{
  label: "foo",
  times: [{
    starting_time: 1426478400000,
    ending_time: 1440907200000,
    }, {
      starting_time: 1426478400000,
      ending_time: 1438401600000,
    }]
  },{
    label: "bar",
    times: [{
      starting_time: 1426478400000,
      ending_time: 1451883600000,
    },{
      starting_time: 1426478400000,
      ending_time: 1451883600000,
    }]
  },{
    label: "baz",
    times: [{
      starting_time: 1426478400000,
      ending_time: 1451883600000,
    }]
  }
} 

var chart = d3.timeline()
  .stack()
  .tickFormat({
    format: d3.time.format("%x"),
    tickInterval: 5,
    tickSize: 2
  })
  .rotateTicks(90)
  .showToday()
  .margin({left:100, right:0, top:0, bottom:0})
  .height(200)

var svg = d3.select("#project-timeline")
  .append("svg")
  .attr("width", "1000")
  .datum(data)
  .call(chart)
)
dpdonohue commented 9 years ago

Hey thanks Jon that is helpful. This is a great tool