Mixed + parent defined

by loicbourgois

HTML

<script src="https://rawgit.com/loicbourgois/e7e15137acecc2e502fffaf7bb9d1dbd/raw/9a7d5bd40288c57d9244b99307ad438728f0b910/mixed.chart.bundle.js"></script>

<!doctype html>
<html>

<head>
		<title>Mixed Chart</title>
		<style>
			canvas {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				width: 255px;
				height: 255px;
			}
			div {
				display: flex;
				flex-wrap: wrap;
			}
			div div {
				flex-grow: 1;
				width: 49%;
			}
		</style>
</head>

<body>
		<button id="randomizeData">Randomize Data</button>
		<div id="container">
		</div>
		<script>
    	var randomScalingFactor = function() {
      	return Math.random()*200-100;
      }
			var sets = [];
			childs = [
				{type:'scatter', color:'#f844'},
				{type:'line', color:'#f484', fill:false},
				{type:'bubble', color:'#8f44'},
				{type:'bar', color:'#48f4'},
				{type:'horizontalBar', color:'#84f4'},
			]
			childs.forEach(function(child1) {
				childs.forEach(function(child2) {
					//childs.forEach(function(child3) {
						sets.unshift({
							parents: [child1.type],
							childs: [child1, child2],
						})
					//});
				});
			});
			var size = 8;
			var charts = [];
			sets.forEach(function(set) {
				var parents = set.parents;
				var childs = set.childs;
				parents.forEach(function(parent) {
					var datasets = [];
					var childId = -1;
					var labels = [];
					childs.forEach(function(child) {
						childId++;
						var data = [];
						for (var i = 0 ; i < size ; i++) {
							if (child.type === 'bubble') {
								data.push({x:randomScalingFactor(), y:randomScalingFactor(),r:Math.max(randomScalingFactor()/2, 20)});
							} else if (child.type === 'scatter') {
								data.push({x:randomScalingFactor(),y:randomScalingFactor()});
							} else {
								data.push(randomScalingFactor());
							}
							if (childId === 0) {
								labels.push('label '+(i+1));
							}
						}
						datasets.push({
							type: child.type,
							label:...