0

I am looking for the best way to set nvd3 chart x domain to represent given period of time in real time line chart - for example last hour. In other words - I am adding new data (y is numeric value, x is timestamp) every second and I want x axis to show last hour of time. Currently I am updating forceX with every data update - it works, but seems very ineffective.

var startDate = (new Date()).getTime();
startDate = startDate-3600000;
options.chart.forceX = [startDate,new Date()];
data[0].values.push({x: new Date(), y: newValue});
api.update();

Is there a better way?

strangelove_phd
  • 1
  • 2

1 Answers1

0

In D3 JS ; code like below can be used to update the axis based on the change on scale values,

 // Update scale with new values
  var xScale = d3.time.scale().domain([newMinDate, newMaxDate])   
        .range([0,width]);

   // Update the Axis new scale
   var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

  // select svg axis node and update the view
  svg.selectAll("g.x-axis").call(xAxis)
Nithin CV
  • 1,046
  • 9
  • 23
  • It seems very similar to what I am doing with nvd3 (forceX), but it causes whole chart (both axis) redraw every data update with flickering.I am wondering if there is a faster method? – strangelove_phd Nov 24 '15 at 09:16
  • To avoid flickering you can use d3 animations, for example **axis .transition().duration(500).ease("linear")**, but which will not improve performance. – Nithin CV Nov 24 '15 at 09:29
  • OK, I managed to get what I needed using simple trick: 1. Initialize XDomain for specific period of time: `XDomain: [new Date()- chartPeriod,new Date()]` 2. Check if oldest date is not too old for the period I am interested in, and removing it: `if (data[0].values[0].x.getTime () < startDate) { data[0].values.shift(); }` – strangelove_phd Nov 24 '15 at 18:45