Creation of histogram with ChartJS

[Tristan1551]

Hi,

In a personnal projet i wanted to create histograms.

I mainly use ChartJS but there is no option for native histograms.

So i tried to use the ones from Plotly, but i was not happy with the results.

I then tried to do it with chartjs but i could not manage to find any relevant information on how to get unique values, count it, or create groups from the values and then count the occurence like excel of plotly would do but automaticaly.

So i figured a way to create automatic histograms with raw data arrays with editable intervals and grouping. I hope it will help.

The code is able to

1. Create groups with intervals,
2. Find the unique values in the dataset
3. Replace the dataset elements by the group name and count the occurence of each element

The first step is to declare my dataset
Here is a dataset containing a large range of data with a normal distribution

var numbers = [2.1,2.2,2.3,2.3,2.5,2.6,2.6,2.8,2.8,2.8,2.9,3,3,3.2,3.3,3.4,3.4,3.4,3.5,3.6,3.6,3.6,3.6,3.7,3.9,3.9,4,4.1,4.1,4.179,4.2,4.4,4.418,4.5,4.5,4.537,4.6,4.6,4.6,4.7,4.7,4.8,4.9,5.1,5.2,5.2,5.3,5.3,5.4,5.4,5.4,5.4,5.4,5.5,5.5,5.5,5.5,5.6,5.6,5.6,5.6,5.7,5.7,5.7,5.7,5.7,5.8,5.8,5.8,5.8,5.8,5.8,5.8,5.8,5.8,5.9,5.9,5.9,5.97,6,6,6,6,6,6,6,6,6.1,6.1,6.1,6.1,6.2,6.2,6.2,6.2,6.2,6.3,6.3,6.3,6.3,6.3,6.4,6.4,6.4,6.4,6.4,6.5,6.5,6.5,6.5,6.6,6.6,6.6,6.6,6.7,6.7,6.7,6.7,6.7,6.7,6.7,6.8,6.8,6.8,6.8,6.9,6.9,6.9,6.9,6.9,7,7.1,7.1,7.1,7.2,7.2,7.3,7.3,7.3,7.3,7.4,7.4,7.5,7.5,7.5,7.5,7.5,7.5,7.5,7.6,7.6,7.6,7.6,7.6,7.6,7.6,7.6,7.6,7.7,7.7,7.7,7.7,7.7,7.7,7.8,7.8,7.8,7.8,7.8,7.8,7.9,7.9,7.9,7.9,7.9,7.9,7.9,7.9,7.9,8,8,8,8,8.1,8.1,8.1,8.1,8.1,8.1,8.1,8.1,8.1,8.2,8.2,8.2,8.2,8.2,8.2,8.2,8.2,8.2,8.2,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.3,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.4,8.5,8.5,8.5,8.5,8.5,8.5,8.5,8.5,8.6,8.6,8.6,8.6,8.6,8.6,8.6,8.6,8.6,8.6,8.7,8.7,8.7,8.7,8.7,8.7,8.7,8.7,8.7,8.7,8.716,8.8,8.8,8.8,8.896,8.896,8.9,8.9,8.9,8.9,8.9,8.9,8.9,8.9,9,9,9,9,9,9,9,9,9,9,9,9,9,9.1,9.1,9.1,9.1,9.1,9.2,9.2,9.2,9.2,9.2,9.2,9.2,9.2,9.3,9.3,9.3,9.3,9.3,9.3,9.3,9.3,9.3,9.3,9.3,9.3,9.3,9.4,9.4,9.4,9.4,9.4,9.4,9.4,9.4,9.4,9.4,9.4,9.5,9.5,9.5,9.5,9.5,9.5,9.552,9.6,9.6,9.6,9.6,9.6,9.6,9.7,9.7,9.7,9.7,9.7,9.7,9.7,9.7,9.8,9.8,9.8,9.8,9.8,9.8,9.8,9.851,9.9,9.9,9.9,9.9,9.9,9.9,9.9,9.9,9.9,9.9,9.9,10,10,10,10,10.1,10.1,10.1,10.1,10.1,10.1,10.1,10.2,10.2,10.2,10.2,10.2,10.2,10.2,10.2,10.3,10.3,10.3,10.4,10.4,10.4,10.4,10.4,10.4,10.4,10.4,10.4,10.4,10.5,10.5,10.5,10.5,10.5,10.6,10.6,10.6,10.6,10.7,10.7,10.7,10.7,10.7,10.7,10.8,10.8,10.8,10.8,10.8,10.8,10.8,10.9,10.9,11,11,11,11,11.1,11.1,11.2,11.3,11.3,11.3,11.4,11.5,11.5,11.5,11.5,11.5,11.5,11.6,11.6,11.7,11.7,11.8,11.9,12,12,12.1,12.1,12.2,12.2,12.3,12.3,12.7,12.7,12.8,12.8,12.9,12.9,12.9,13.2,13.2,13.3,13.4,13.6,13.6,13.7,14.1,14.6,14.8,15.1,15.1,15.6,16,16.2,17,17.1,17.7];

Because there is a lot of values and i need the graph to automaticaly create groups with a specific interval here i choose to have 0.5 as interval.

1. -First i sort my list if not done
2. The inverval = 0.5

Var inter = 0.5;

Then i group my list by using the interval i choose (here 0.5).

	var grouped = [];
	for (var i = 0; i < numbers.length; i++) {
		var group = Math.floor(numbers[i] / inter);
		if (grouped[group]) {
			grouped[group].push(numbers[i]);
		} else {
			grouped[group] = [numbers[i]];
		}
	}

After that i keep only the first and last element of each group created and separate each first and last with a "-".

	var grouped2 = [];
	for (var i = 0; i < grouped.length; i++) {
		if (grouped[i]) {
			grouped2.push(grouped[i][0] + '-' + grouped[i][grouped[i].length - 1]);
		}
	}

Now i push the group name into each element of my dataset

	var grouped5 = [];
	for (var i = 0; i < numbers.length; i++) {
		var found = false;
		for (var j = 0; j < grouped2.length; j++) {
			var group = grouped2[j].split('-');
			if (numbers[i] >= group[0] && numbers[i] <= group[1]) {
				grouped5.push(grouped2[j]);
				found = true;
				break;
			}
		}
		if (!found) {
			grouped5.push(numbers[i]);
		}
	}

Now i get the unique values of the pushed grouped dataset

	function onlyUnique(value, index, self) {
		return self.indexOf(value) === index;
	}
	var unique = grouped5 .filter(onlyUnique);

And then i count the occurence of each unique in my pushed group

	var wordCount3 = [];
	for (var i = 0; i < unique3.length; i++) {
		wordCount3[i] = 0;
		for (var j = 0; j < grouped5.length; j++) {
			if (unique3[i] === grouped5[j]) {
				wordCount3[i]++;
			}
		}
	}

And now i can display my graph using with X the unique values and with y the count

Here the result

You can find the code here https://jsfiddle.net/tristanmrrpm/72c6pg4a/3/

[dradb]

Is it possible to show specification limits on the histogram?
That is, can the histogram be moved right and compressed, to give an "x" of zero instead of "2.1" as on your chart ?
Two vertical lines for the spec limits need to be added, which is easy enough.