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"> $('#bar').binarybar(); </script>
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.