Connecting Gauges and Charts

[wedwards99]

I've successfully connected up a few of the dashboard GUI components, logs, process, etc. to our running application but am having some trouble getting numeric values into gauges and charts, I can hook up two non-GUI sides okay. Like this fairly simple example:

Process A

var Monitor = require('monitor').start();
var stat = Monitor.getStatLogger('lint');
setInterval(function () {
    var randomInt = Math.floor(Math.random() * (10));
    stat.increment('loop.counter', randomInt);
    console.log('Changed stat to: ' + randomInt);
}, 5000);

Output
Changed stat to: 3
Changed stat to: 8
Changed stat to: 5

Process B

var util = require('util');
var Monitor = require('monitor');

var statOptions = {
    hostName: 'localhost',
    probeClass: 'Stat',
    initParams: {
        pollInterval: 1000,
        pattern: 'lint.loop.counter'
    }
};
var statMonitor = new Monitor(statOptions);

statMonitor.on('change', function (data) {
    console.log(util.inspect(statMonitor.get('bundle')));
});

statMonitor.connect(function (error) {
    console.log('Connect stat return');
    if (error) {
        console.error('Error connecting with the stat probe: ', error);
        process.exit(1);
    }
});

Output
[ [ '2014-05-15T21:52:26.691Z', 'lint', 'loop.counter', 3, 'c' ] ]
[ [ '2014-05-15T21:52:31.702Z', 'lint', 'loop.counter', 8, 'c' ] ]
[ [ '2014-05-15T21:52:36.713Z', 'lint', 'loop.counter', 5, 'c' ] ]

So far so good.

Where I am having trouble is in getting that loop.counter integer to show in a Gauge or in a Line chart. For, example this is the monitor definition for a the Gauge as far as I have it:

  "monitor": {
    "probeClass": "Stat",
    "hostName": "localhost",
    "appName": "",
    "appInstance": "1",
    "probeId": "59cb6efe-7cf7-a7b1-43ec-1384735b292a",
    "id": "",
    "name": "",
    "probeName": "Stat",
    "initParams": {
      "pollInterval": 1000,
      "pattern": "lint.loop.counter"
    },
    "writableAttributes": []
  },

But I'm guessing I need at least one more dab of glue to get it hooked up.

Thanks a lot, in advance,
Will

[lorenwest]

Hi Will,

You're absolutely right - a little glue is all you need. In this case, you're probably wanting some code that breaks apart the bundle, placing it into the graph data.

The charts are Highcharts, and there's lots of documentation on the web as to how they work. Drag a new chart into your page, and open the settings form. In the JavaScript onInit field, enter the code you have above to connect with your remote monitor, read the bundle, then place the results into the chart data.

At some point this will be more automated, but for now you have to write a little code to place data into the chart. Start by placing any data into the chart - some constants. Then migrate that to data you've read from a remote monitor. You're already well on your way!

-Loren