ChartJS Line Chart

Multiple Line Chart

by xxjcaxx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

CSS

canvas { background-color : #eee;
}

JavaScript

var options = {
  type: 'bar',
  data: {
    labels: [],
    datasets: [
	    { label: 'Distribution of random numbers',
	      data: [], borderWidth: 1
    	}
		]
  }, options: { scales: { yAxes: [{ ticks: { reverse: false } }] } }
}

/* This function was borrowed from Stack Overflow.
   This answer: https://stackoverflow.com/a/5668246/8574934
   By Šime Vidas (https://stackoverflow.com/users/425275/%C5%A0ime-vidas)
   Licence: CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0/)
*/
function frequency(arr) {
    var a = [], b = [], prev;

    arr.sort();
    for ( var i = 0; i < arr.length; i++ ) {
        if ( arr[i] !== prev ) {
            a.push(arr[i]);
            b.push(1);
        } else {
            b[b.length-1]++;
        }
        prev = arr[i];
    }

    return [a, b];
}

// https://en.wikipedia.org/wiki/Box%E2%80%93Muller_transform
function BoxMullerTransform() {
    const u1 = Math.random();
    const u2 = Math.random();
    
    const z0 = Math.sqrt(-2.0 * Math.log(u1)) * Math.cos(2.0 * Math.PI * u2);
    const z1 = Math.sqrt(-2.0 * Math.log(u1)) * Math.sin(2.0 * Math.PI * u2);
    
    return { z0, z1 };
}

function GetNormallyDistributedRandomNumber(mean, stddev) {
    const { z0, _ } = BoxMullerTransform();
    
    return z0 * stddev + mean;
}

const mean = 15.0, stddev = 2;

const generatedNumbers = []
for (let i = 0; i < 100000; i += 1)
    generatedNumbers.push(GetNormallyDistributedRandomNumber(mean, stddev))

// Have to round all the numbers to not get 100000 bars in the chart.
const roundedGeneratedNumbers = generatedNumbers.map(n => Math.pow(Math.round(n),2));

// Count frequency of each number.
const freq = frequency(roundedGeneratedNumbers);

options.data.labels           = freq[0];
options.data.datasets[0].data = freq[1];

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);