QuigleyCom Logo

QUIGLEY


Meters

Meters is a set of Java/Swing components for creating live, real-time dashboards, which visualize telemetric data.

Meters provides visually rich components with organic movement, which gets the user interface out of the way, allowing the data to communicate.

Meters is implementation agnostic—it provides easily extended interfaces and base classes, which allow you to integrate your existing data sources. Create a simple Java wrapper around your existing technology and incorporate your telemetry data into Meters.

Eventually, Meters will become a rich toolkit for building “dashboards”—interfaces, which display large amounts of changing, evolving, monitored data. This first release includes a single, highly-configurable, side-scrolling “plotter” component.

The PlotterMeter

The primary component in Meters is the PlotterMeter. The PlotterMeter presents a left-to-right, side-scrolling display of one, or more changing data values. The display can be augmented with horizontal and vertical “axis labels”, a “title area”, and any number of “indicators”. PlotterMeter delegates to a Plotter instance to handle the actual plotting of data values.

PlotterMeter is highly configurable. Configuration is done by attaching a number of extensible delegates into the PlotterMeter instance. I'll show you an example—Let's start with a basic PlotterMeter. Consider the following code:

PlotterMeter plotterMeter = new PlotterMeter();

RandomSampler redSampler = new RandomSampler(Color.red);
plotterMeter.addSampler(redSampler);

plotterMeter.setPlotter(new CurvePlotter());
plotterMeter.setSamplingInterval(1500);

Data is made available to the PlotterMeter by instantiating a subclass of Sampler. The subclass is added to the meter by calling the addSampler method. For our example, we've chosen the RandomSampler subclass, which emits random numbers. We've done this work on lines 3 and 4.

The code to create a JFrame and add our PlotterMeter to it has been omitted for brevity. The source repository contains the a working example in a class named PlotterMeterExample. This little walkthrough is based on that example class.

Anyway, running the above code would result in a PlotterMeter like this:

This shows us a single evolving data point. The horizontal axis represents time. The vertical axis represents the range of the values, over time. Notice that PlotterMeter smoothly and automatically re-scales as the displayed data range changes—the data appears to “grow” or “shrink”. Also notice that data moves along the time axis smoothly. Both of these organic movements make it easy for the user to observe changes in the data.

To make it even easier to visually understand changes in the data, PlotterMeter includes an Indicator delegate. Indicators are used to overlay additional visual cues onto the meter. The framework includes a “floating line indicator”, which works like a pointer, pointing to the current value for a Sampler. We can add that to our example, like this:

plotterMeter.addIndicator(new FloatingLineIndicator(redSampler));

The FloatingLineIndicator takes the Sampler instance to monitor as a constructor argument. If we run the example again, we'll get something like this:

PlotterMeter includes support for three “label areas”. There are label areas for both the horizontal and vertical axes (I'll demonstrate those in a minute), and also for a “title area”. I feel like it makes sense to include high-level “header” information in the title area. The PlotterMeter allocates space for the title area at the top of the meter display. The framework includes a PlainTitleArea implementation, which simply shows the current numeric value from each Sampler present in the meter. Add one like this:

plotterMeter.setTitleArea(new PlainTitleArea());

Run the example again, and we'll get a result like this:

PlotterMeter can support any number (within reason, visually) of samplers. Add another RandomSampler to the example, like this:

PlotterMeter plotterMeter = new PlotterMeter();

RandomSampler redSampler = new RandomSampler(Color.red);
plotterMeter.addSampler(redSampler);

RandomSampler orangeSampler = new RandomSampler(Color.orange);
plotterMeter.addSampler(orangeSampler);

plotterMeter.setPlotter(new CurvePlotter());
plotterMeter.setTitleArea(new PlainTitleArea());
plotterMeter.addIndicator(new FloatingLineIndicator(redSampler));
plotterMeter.addIndicator(new FloatingLineIndicator(orangeSampler));
plotterMeter.setSamplingInterval(1500);

Notice how the title area automatically picked up the additional sampler?

The Meters framework includes a PlainHorizontalAxis, which provides a set of timestamp labels and some vertical grid lines, making it easy to see exactly how data aligns with time. Add one of those:

plotterMeter.setHorizontalAxis(new PlainHorizontalAxis());

The PlainVerticalAxis provides maximum and midpoint labels and horizontal grid lines, making it easy to see the visual scale of the meter:

plotterMeter.setVerticalAxis(new PlainVerticalAxis());

Don't like the automatic vertical rescaling? Working with a value domain that makes more sense when presented within a fixed range? No problem! Do this:

plotterMeter.lockMaxScale(1000.0);

Check out the source from the Github for more details. A Maven build is included, which can easily produce an executable jar. The code includes Javadoc, which will give you more details about implementing your own extensions and integrations.

Run the example like this:

$ git clone https://github.com/michaelquigley/meters.git
$ cd meters
$ mvn package
$ java -jar target/meters-0.0.1-with-dependencies.jar

Future Directions

I started the Meters project because I've always enjoyed interesting visual representations of complex data. I intend to experiment with other kinds of visual indicators and metering implementations. This current release includes a CurvePlotter, which was inspired by the Gnome System Monitor on the Linux desktop. It uses linked cubic curves to present a smoothly curved plot of the data values. Certainly there are other kinds of plots to be developed.

The upcoming 1.1.0 release of my Zabbix/J project will include support for a live, graphical client, which is capable of showing live telemetry from your Zabbix agents. That telemetry dashboard will include meters from this project.

Maven

You can include Meters into your Maven-based Java projects with the following coordinates:

<dependency>
	<groupId>com.quigley</groupId>
	<artifactId>meters</artifactId>
	<version>0.0.1</version>
</dependency>

Project last updated on Thursday, January 23, 2014 by Michael Quigley.

Home →

About →

Contact →

Feed →