{"id":9494,"date":"2016-12-29T14:37:16","date_gmt":"2016-12-29T13:37:16","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=9494"},"modified":"2026-01-12T09:14:53","modified_gmt":"2026-01-12T09:14:53","slug":"214-histogram-when-why-how-part2","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/214-histogram-when-why-how-part2\/","title":{"rendered":"Histograms: When, Why & How (Part 2)"},"content":{"rendered":"

In part 1 <\/a><\/b>of the Histograms post, we talked about what a Histogram can do for you, why you might want to use them, and looked at some examples of Histograms that gave us some insight into the data that they represented.
\nIn this post, we\u2019ll move on to when and how to implement Histograms, using Highcharts.<\/p>\n

WHEN TO USE A HISTOGRAM<\/h2>\n

Histograms are useful when exploring any set of continuous numeric data, with enough data points to make useful inferences.<\/p>\n

How many data points are enough? That\u2019s a topic of debate, with many suggestions ranging between 50 and 100 data points as a minimum size.<\/p>\n

The bottom line is, if you have too few data points, a Histogram isn\u2019t going to tell you anything useful. There is no danger in plotting a Histogram with too few data points – unless you try to base statistical conclusions on the result!<\/p>\n

BUILDING A HISTOGRAM IN HIGHCHARTS<\/h2>\n

One question that has been asked many times is how to go about creating a Histogram with Highcharts. Highcharts is a great tool for displaying Histograms, with a wide variety of options available to format the chart as needed.<\/p>\n

FORMATTING<\/h3>\n

On the formatting side, a Histogram is just a column chart. The primary difference is that gaps between columns are removed in a Histogram. This is done for one simple reason: each part of the x axis is a bin, and each bin covers part of a continuous range along the axis.
\nIf there is a range on the x axis with no column, that means that no data from the dataset fell into that range.
\nRemoving gaps between the bars makes it clear that each bin starts where the previous bin ended, and if a gap exists, it means something about your data.<\/p>\n

DATA PROCESSING<\/h3>\n

But what about the data?<\/p>\n

Users are often looking to the charting library to do the work – they have a dataset, and want the chart to process and bin the data into a Histogram<\/p>\n

But Highcharts is not a statistical analysis tool, it\u2019s a charting tool! Sometimes the line between those things is blurry, but honestly I would prefer that a library sticks to what it does best, and does it well, than that it tries to do everything.<\/p>\n

Fortunately, processing data to build a Histogram is not very difficult, and we can build a Javascript function to do this for us.
\nIncluded here is a function that I use when I need to process the data on the client side.<\/p>\n

When possible, I process the data before it ever gets to the client, using PHP, Python, R, or whatever is available in the setup at hand. But sometimes, you need to do it client side, and as long as the dataset is not incredibly large, this is not a problem. If you are new to Histograms, follow through the code and explanation below to understand the mechanics of this kind of data preparation.
\nThe function:<\/p>\n

function binData(data) {\r\n\r\n  var hData = new Array(), \/\/the output array\r\n  \tsize = data.length, \/\/how many data points\r\n  \tbins = Math.round(Math.sqrt(size)); \/\/determine how many bins we need\r\n       bins = bins > 50 ? 50 : bins; \/\/adjust if more than 50 cells\r\n  var max = Math.max.apply(null, data), \/\/lowest data value\r\n  \tmin = Math.min.apply(null, data), \/\/highest data value\r\n  \trange = max-min, \/\/total range of the data\r\n  \twidth = range\/bins, \/\/size of the bins\r\n  \tbin_bottom, \/\/place holders for the bounds of each bin\r\n  \tbin_top;\r\n\r\n  \/\/loop through the number of cells\r\n  for(var i = 0; i < bins; i++) {\r\n\r\n\t\/\/set the upper and lower limits of the current cell\r\n\tbin_bottom = min + (i * width) ;\r\n\tbin_top = bin_bottom + width;\r\n\r\n\t\/\/check for and set the x value of the bin\r\n\tif(!hData[i]) {\r\n  \t    hData[i] = new Array();\r\n    \t    hData[i][0] = bin_bottom + (width \/ 2);\r\n\t}\r\n\r\n\t\/\/loop through the data to see if it fits in this bin\r\n\tfor(var j = 0; j < size; j++) {\r\n  \t    var x = data[j];\r\n\r\n  \t    \/\/adjust if it's the first pass\r\n  \t    i == 0 && j == 0 ? bin_bottom -= 1 : bin_bottom = bin_bottom;\r\n\r\n  \t    \/\/if it fits in the bin, add it\r\n  \t    if(x > bin_bottom && x <= bin_top) {\r\n    \t        !hData[i][1] ? hData[i][1] = 1 : hData[i][1]++;     \t \r\n  \t    }\r\n\t}\r\n  }\r\n  \/\/cleanup\r\n  $.each(hData, function(i, point) {\r\n\tif(typeof point[1] == 'undefined') {\r\n  \thData[i][1] = null;\r\n\t}\r\n  });\r\n  return hData;\r\n}\r\n<\/pre>\n
And a Fiddle to experiment with: \u00a0https:\/\/jsfiddle.net\/jlbriggs\/gud4bp66\/<\/a><\/b>
\n