Histogram Generator with jqPlot

Last updated on September 27, 2012 in Development

HTML5 Histogram

Histograms are a great way of visualizing the distribution of data. I use them a lot at work but today I was searching for a histogram generator and did not come up quickly with meaningful results. I did find histogram generators like this but I needed something better. I am pretty familiar with jqPlot so I decided to write my own histogram generator, something a little better than this jsfiddle histogram example.

It turns out that making a histogram with ranges and frequency points is damn simple but I also wanted to give you the ability to enter in your own data and select how many buckets you want (points on the x-axis or ranges). This was a bit more complicated, you take all the data and sort it. You divide the highest number by the number of ranges you want to have. At this point you have to decide what to do with decimals (I decided to limit it to 2 numbers) and make a for-loop for all the ranges to figure out what values you will put in each bucket. A while loop inside the for loop does this and it removes values it puts in the buckets using JavaScript shift function to not iterate through the entire array every time. I am sure that this can be done better but for a 1 hour effort, I think it does a pretty good job.

Check out my Histogram Generator and look at the source to see how it was build.

jqPlot is a really great JavaScript charting library and it comes with lots of examples and great documentation. It use to be my favorite JS charting library but currently, d3 takes the cake and easily supports histograms. There are many examples, even some documentation for histogram creation. D3 was actually built from Protovis which also supports histograms.