var chartColors = {
	red: 'rgb(255, 99, 132)',
	blue: 'rgb(54, 162, 235)'
};
var effectColors = {
	highlight: 'rgba(255, 255, 255, 0.75)',
	shadow: 'rgba(0, 0, 0, 0.5)',
	glow: 'rgb(255, 255, 0)'	
};

function randomScalingFactor() {
	return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
}

var color = Chart.helpers.color;
var config = {
	type: 'bar',
	data: {
		labels: [2, 4, 6, 8, 10, 12, 0],
		datasets: [{
			label: 'Dataset 1',
			backgroundColor: chartColors.red,
			borderWidth: 0,
			data: [0, 0, 0, 0, 0, 0, 0].map(function() {
				return randomScalingFactor();
			}),
			bevelWidth: [2, 4, 6, 8, 10, 12, 0],
			bevelHighlightColor: effectColors.highlight,
			bevelShadowColor: effectColors.shadow
		}, {
			label: 'Dataset 2',
			backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
			borderWidth: 0,
			data: [0, 0, 0, 0, 0, 0, 0].map(function() {
				return randomScalingFactor();
			}),
			bevelWidth: [2, 4, 6, 8, 10, 12, 0],
			bevelHighlightColor: effectColors.highlight,
			bevelShadowColor: effectColors.shadow
		}]
	},
	options: {
		title: {
			display: true,
			text: 'Bevel effect sample'
		},
		scales: {
			xAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'BevelWidth'
				}
			}],
			yAxes: [{
				scaleLabel: {
					display: true,
					labelString: 'Value'
				}
			}]
		},
		tooltips: {
			bevelWidth: 2,
			bevelHighlightColor: effectColors.highlight,
			bevelShadowColor: effectColors.shadow
		}
	}
};

window.onload = function() {
	var ctx = document.getElementById('myChart').getContext('2d');
	window.myChart = new Chart(ctx, config);
};

document.getElementById('randomizeData').addEventListener('click', function() {
	config.data.datasets.forEach(function(dataset) {
		dataset.data = dataset.data.map(function() {
			return randomScalingFactor();
		});
	});
	window.myChart.update();
});