jQuery Binary Bar


As part of a project written in Grails to analyse the SMS messages which came into the BBC Radio studio, I put together a user interface in Javascript that showed the sentiment of incoming messages. An overall sentiment meter was presented, but I also wanted to show the relative strength of positive and negative sentiments. For that I created this basic swing-meter.

Here's a quick demo of it working, using a random number generator:

To use it, you first need to include a few other javascript libraries. In particular, you require jQuery and the jQuery widget factory, but the code also uses canvas_utils.js (for drawing polygons) and jquery.timers (for its animation).

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/canvas_utils.js"></script>
<script type="text/javascript" src="/js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="/js/BinaryBarWidget-1.0.js"></script>

To create the basic widget, create an element in the page and then apply the widget to it, just as you would with any jQuery widget:

<div id="bar"></div>
<script type="text/javascript">

The plugin is very basic and only has one method, which is setValues. This expects a 2-element array which contains a value for each bar, between 0 and maxValue in the options.

$('#bar').binarybar( 'setValues', [8,4] );

The code is released under the MIT license, which basically means you can do whatever you like except pretend it's yours.