mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
ca48caa8b0
made some good progress. Just need some more eyes on it, cuz I’m literally typing without my glasses on right now.
70 lines
2.7 KiB
HTML
70 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Bar Chart</title>
|
|
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="../Chart.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div style="width: 50%">
|
|
<canvas id="canvas" height="450" width="600"></canvas>
|
|
</div>
|
|
<button id="randomizeData">Randomize Data</button>
|
|
<script>
|
|
var randomScalingFactor = function() {
|
|
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
|
|
};
|
|
var randomColorFactor = function() {
|
|
return Math.round(Math.random() * 255);
|
|
};
|
|
|
|
var barChartData = {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: [{
|
|
type: 'bar',
|
|
label: 'Dataset 1',
|
|
backgroundColor: "rgba(151,187,205,0.5)",
|
|
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
|
borderColor: 'white',
|
|
borderWidth: 2
|
|
}, {
|
|
type: 'bar',
|
|
label: 'Dataset 2',
|
|
backgroundColor: "rgba(151,187,205,0.5)",
|
|
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
|
borderColor: 'white',
|
|
borderWidth: 2
|
|
}, {
|
|
type: 'line',
|
|
label: 'Dataset 3',
|
|
backgroundColor: "rgba(220,220,220,0.5)",
|
|
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
|
}, ]
|
|
|
|
};
|
|
window.onload = function() {
|
|
var ctx = document.getElementById("canvas").getContext("2d");
|
|
window.myBar = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: barChartData,
|
|
options: {
|
|
responsive: true,
|
|
}
|
|
});
|
|
};
|
|
|
|
$('#randomizeData').click(function() {
|
|
$.each(barChartData.datasets, function(i, dataset) {
|
|
dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
|
|
dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
|
|
|
|
});
|
|
window.myBar.update();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|