A New Nimbits Gadget: It’s About Time

I’ve just released an updated Google Gadget for monitoring your Nimbits data.

If you have no idea what that means, here’s a quick overview:

Nimbits has been updated several times since the first Gadget was released, most recently to version 3.2.  If you haven’t checked it out in awhile, you should head on over to their site to have a look around.  Among other things, you’ll find that each Data Point has a handy pop-up Report page that displays a chart and status information, and new integration options for WolframAlpha and SVG-based process diagrams.

While the Nimbits console is great for analyzing your data, for day-to-day monitoring I really like the iGoogle interface.  Using a gadget, you can plot all your data points in a few charts, leaving plenty of space for your e-mail, calendar, Twitter feed, hamster with OCD, and anything else you want to keep an eye on.

What’s New

I’ve added a number of enhancement to the gadget:

  1. It’s about time! The horizontal axis is now labelled with the date and time, making the chart much more meaningful.  You can now tell at a glance whether any of your data points have stopped updating, or had an outage in the past.
  2. The chart is rendered using Google’s newer Visualization API, similar to the one on the Nimbits Report pop-up.  It’s an interactive chart: you can position your mouse over any point in the chart to get a pop-up with its timestamp and exact value.
  3. Multiple data points can be plotted in the same chart (a feature that was in the original gadget, but was dropped a few months ago after a Nimbits upgrade).  If the data points use different scales, you can choose to plot some of them on a second axis on the right side of the chart.
  4. The Y axis is now automatically scaled to fit the data. That is, if all your data is between 500 and 600, the chart will automatically zoom in on the 500 to 600 range.

Getting Started

Before you can use the Gadget, you’ll need to create at least one data point on Nimbits.  To learn how to use the Nimbits’ user interface, click on the Learn link at the top of the Nimbits home page, or check out my (somewhat outdated) instructions in the Tweet-A-Watt: Beyond the Twitter, Part Deux article.  To learn how to write some code to post data to Nimbits, see the links on the right-hand side of the Nimbits home page.  For Python code that I’ve used in various projects, search my blog for “Nimbits”.

You can add the new Gadget to your iGoogle page using its entry in the Google Gadget Directory.

The Gadget will initially display a Settings dialog.   You’ll need to fill in at least 3 of the fields: a Data Point ID, your Gmail address, and the time span.

Settings

Server – If you are using the public Nimbits server, leave this field at its default setting of app.nimbits.com.  Otherwise, fill in site address of your personal Nimbits server (e.g. yournimbits.appspot.com)

Chart 1 Data Point – This field is used to add data points to the 1st chart in the gadget.

In the simplest case, where you want to plot just 1 data point, type its name into the Chart 1 Data Points textbox then click the Add button.  The data point name should then be listed below the textbox.

To add a second data point to the same chart, type in its name and click the Add button again.  The screenshot below shows a Settings dialog with 2 data points added  to the first Chart.

I’ve placed a (completely arbitrary) limit of 12 total data points in the gadget code.  So, for example, you could put 12 data points in the first chart (messy, messy), or 4 data points in each of 3 charts.   If you want to track more than 12 data points, you can add multiple copies of the gadget to your iGoogle page.

Chart 1 Right Axis – This text box is also used for adding data points to the first chart, but these ones will be plotted on a separate axis, on the right side of the chart.  This is useful if your data points are using 2 different numeric scales, such as temperature and humidity.  You can plot temperature on the left axis, and humidity on the right axis.  The following screenshot shows the settings for doing so, and the resulting chart.

Hey, I never said it would be pretty!  Personally, I prefer using separate charts for different measurement types.

Chart 2 Data Points, etc.  As you’ve no doubt figured out, these are for adding optional 2nd and 3rd charts to your gadget.  If you have multiple charts, you may want to adjust the size of the gadget in order to see them all — see Gadget Height, below.

Your Email.  Enter your Gmail address here.  Yes, I agree that its an egregious invasion of privacy, but otherwise the gadget won’t be able to figure out whose Data Points you want to see!  (You need a Gmail address, as opposed to other email providers, because Nimbits requires one.)  Those concerned about the security of their personal data can feel free to leave the e-mail field blank, in which case you’ll get a super-private empty chart.

Time Span and Time Span Units.  These fields determine how long a time frame is covered by the charts.  You can either specify either the # of hours or the # of readings — in both cases ending with the current time.  For example, if you specify 100 Readings, and select 2 Data Points, the chart will show the most recent 100 values logged for each of the Data Points.  There is no limit on the length of the time span, but too much data will affect performance.

Gadget Height.  The default of 240 pixels should allow 1 chart to fit in the gadget on any browser.  If you have multiple charts, and want them all to be visible, you should increase the height.  If not all of the charts will fit, a vertical scrollbar will appear to allow you to see the rest of the charts.

Other Features

Like all Google Gadgets, you can maximize the size of the gadget by clicking on the arrow icon at the right end of its titlebar.  This gives you a much more readable view of the data, especially if you have multiple data points in the chart:

Need more than 3 charts?  You can add multiple copies of the gadget to your iGoogle page. The settings for each are independent, so you can plot completely different data points in each one.

The gadget will automatically update the graphs from time to time — the interval is up to iGoogle and can’t be configured by mortals like us.  You can, of course, manually reload the iGoogle page to get more frequent updates.

Browser Compatibility

The gadget works (for me) in Chrome, Firefox and Internet Explorer.  Being based on Google technology, it renders the graphs fastest in Chrome.  Firefox is almost as fast, and the appearance of the chart is pretty much identical to Chrome.  Internet Explorer is noticeably slower and replaces Google’s chart fonts with its own — why can’t you two boys get along? — but is still quite usable.

Wrapping Up

I’ve been using the updated gadget for a couple of weeks now without any problems, so I hope it works well for you, too.  If you run into any problems, feel free to leave a comment or send me an e-mail.

I’m also open to suggestions for enhancements.  On my own To Do list are adding Settings to control how the date and time are labelled on the horizontal axis, and identifying the data points through properties other than its ID. (An, um, friend of mine made the mistake of labelling some of his Data Points Plant1Moisture, Plant2Moisture, etc.)

There are a lot of possible enhancements, because the Google Visualization Line Chart has a gazillion options. I found Google’s API to be quite fun to monkey around with, and it plugged into the Nimbits Data Series API without much coding effort.  I’ll write about the code and the basics of using the Google Chart Tools API in a future blog post.

This entry was posted in Electronics, Software Tools and tagged , . Bookmark the permalink.

One Response to A New Nimbits Gadget: It’s About Time

  1. Pingback: Cosm Gadget: Kissing the Pink Goodbye | GigaMegaBlog

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>