javascript - Rickshaw.Graph.Axis.Time Resolution - Stack Overflow

admin管理员组

文章数量:1426631

I am trying to write a real time graph based on dummy data for now. My problem is that the resolution for my graph is too big for me. My timeUnit is an hour, but I get a range of 16 hours which I don't need to see right now in the same graph. For example the graph starts at 00:00 and ends at 16:00. I would like to have a resolution like that: 00:00, 00:05, 00:10, 00:15, and so on....(tick every five minute). I tried to work with timeunit=minute, but I still get the same range which is now divided to a more points.

This is my code for x-axis :

var time = new Rickshaw.Fixtures.Time();
var hours = time.unit('hour');
var xAxis = new Rickshaw.Graph.Axis.Time( {
  graph: graph,
  ticksTreatment: ticksTreatment,
  timeUnit: hours,
  timeFixture: new Rickshaw.Fixtures.Time()
} );

I am trying to write a real time graph based on dummy data for now. My problem is that the resolution for my graph is too big for me. My timeUnit is an hour, but I get a range of 16 hours which I don't need to see right now in the same graph. For example the graph starts at 00:00 and ends at 16:00. I would like to have a resolution like that: 00:00, 00:05, 00:10, 00:15, and so on....(tick every five minute). I tried to work with timeunit=minute, but I still get the same range which is now divided to a more points.

This is my code for x-axis :

var time = new Rickshaw.Fixtures.Time();
var hours = time.unit('hour');
var xAxis = new Rickshaw.Graph.Axis.Time( {
  graph: graph,
  ticksTreatment: ticksTreatment,
  timeUnit: hours,
  timeFixture: new Rickshaw.Fixtures.Time()
} );

• javascript
• rickshaw

Share Improve this question Follow edited Mar 3, 2015 at 22:51 Ross Rogers 24.3k2828 gold badges114114 silver badges172172 bronze badges asked Nov 17, 2013 at 8:00 BrkBrk 10711 gold badge44 silver badges1616 bronze badges 1

• Anybody has an idea? Rickshaw.js based on d3.js,if someone know how to do it in d3.js and it wil be helpfull :) – Brk Commented Nov 17, 2013 at 15:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You could try this:

var unit = {}
unit.formatTime = function(d) {
  return d.toUTCString().match(/(\d+:\d+):/)[1];
};
unit.formatter = function(d) { return this.formatTime(d)};
unit.name = "5 minute";
unit.seconds = 300;
var xAxis = new Rickshaw.Graph.Axis.Time({
  graph: graph,
  timeUnit:unit,
  ticksTreatment: ticksTreatment,
  timeFixture: new Rickshaw.Fixtures.Time.Local()
});

本文标签： javascriptRickshawGraphAxisTime ResolutionStack Overflow