You can't really change the rate at which navdata comes in. You can just ignore navdata if you don't want to process it. The code below only processes navdata once per second:
var lastNavDataMs = 0;
client.on('navdata', function(d) {
var nowMs = new Date().getTime();
if (nowMs - lastNavDataMs > 1000) {
lastNavDataMs = nowMs;
// Process navdata once per second.
if (d.demo){
console.log('pitch:' + d.demo.rotation.roll);
}
}
});
For displaying a realtime graph of sensor values, you might try the Smoothie Charts library. It's specifically intended to handle charts and graphs with realtime updating. Their tutorial makes it look very easy. Below, I've tried to adapt their tutorial to showing navdata information from the AR.Drone. I haven't tested it, but it might be a good starting point.
First, in your HTML, include the Smoothie script and create a canvas element to hold the graphs:
<script type="text/javascript" src="smoothie.js"></script>
<canvas id="mycanvas" width="400" height="100"></canvas>
The code:
var arDrone = require('ar-drone');
var smoothie = new SmoothieChart();
smoothie.streamTo(document.getElementById("mycanvas"));
// Lines on the chart.
var rollLine = new TimeSeries();
var altitudeLine = new TimeSeries();
var client = new arDrone.createClient();
client.on('navdata', function(d) {
if (d.demo) {
// Add new measurements for roll and altitude.
var time = new Date().getTime();
rollLine.append(time, d.demo.rotation.roll);
altitudeLine.append(time, d.demo.altitudeMeters);
}
});
// Add the lines to our chart.
smoothie.addTimeSeries(rollLine);
smoothie.addTimeSeries(altitudeLine);