Dave Dupplaw BSc. PhD.

jQuery Poll Bar Graph

Download

Fork me on GitHub

As part of a project I worked on at the University of Southampton, we produced a system for analysing SMS messages that arrived at the BBC Radio studios. I was responsible for creating the web-based front-end and I built a number of jQuery plugins for displaying the data. This is one of those, and it was used for showing the results of polls that were taken. For example, presenters might ask listeners to send in whether they preferred one artist or another and we would collate the results and display them.

Here's an example of the widget:

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/PollBarGraphWidget-1.0.js"></script>

Create an element in the page and then apply the poll bargraph widget to it, just as you would with any jQuery widget:

<div id="poll"></div>
<script type="text/javascript">
	$('#poll').pollbargraph();
</script>

The data in the widget can then be set using the setData method. This method expects an array of objects, where the objects must have two specific properties: title and value. The title property contains the name of the category used (so, Java, PHP etc, in the above example), and the value property contains the frequency. The bar graph scales to fit the data.

So for example, the above example is created using the following code:

$('#poll').pollbargraph( 'setData', [
	{ title: "PHP", value: 20 },
	{ title: "Java", value: 70 },
	{ title: "Groovy", value: 5 },
	{ title: "C++", value: 1 },
	{ title: "Other", value: 4 }
] );

The look and feel of the graph can be changed using the various styles availble through the options. For example, the following graph ...

It shows data from the UK government for food origins in the UK. The colours, labels and sizes are changed from the default. Also, the count for each bar is disabled (so only the percentage is shown) and a specific bar has been highlighted. The initialisation code for this bar is shown below:

$('#poll').pollbargraph( {
	XAxisLabel: "Origin of UK Food 2012",
	YAxisLabel: "Percentage",
	width: 600,
	XAxisFromBottom: 20,
	barFillStyle: '#FCF',
	barFillStyleHighlight: '#F8F',
	barStrokeStyle: '#000',
	barStrokeStyleHighlight: '#000',
	barTextStyle: '#000',
	barStatsStyle: '#505',
	barStatsFontSize: 12,
	showCount: false,
	highlightBars: ["EU"]
});

The above poll shows the animation of the poll as the values change. This example runs every 2 seconds, updating the category values (to random values) and updating the bar which is highlighted to be the bar with the maximum value.

// Autobot categories
var cats = ["Orion", "Bumblebee", "Wheeljack", "Cliffjumper", "Prowl", "Jazz"];

// Update every 2 seconds
$(document).everyTime( 2000, function()
{
	var max = 0; var indx = -1;
	var data = new Array();
	for( c in cats )
	{
		data[c] = { title: cats[c], value: Math.random()*10 };
		if( data[c].value > max ) { max = data[c].value; indx = c; }
	}
	$('#poll3').pollbargraph( 'setData', data );
	$('#poll3').pollbargraph( 'setHighlights', [cats[indx]] );
}, 0 );

Contributing

You can fork the code on GitHub.

License

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

Comments