mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
Update bar sample to handle adding and removing datasets
This commit is contained in:
parent
e7850a796e
commit
f2298aed77
@ -12,6 +12,8 @@
|
|||||||
<canvas id="canvas" height="450" width="600"></canvas>
|
<canvas id="canvas" height="450" width="600"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<button id="randomizeData">Randomize Data</button>
|
<button id="randomizeData">Randomize Data</button>
|
||||||
|
<button id="addDataset">Add Dataset</button>
|
||||||
|
<button id="removeDataset">Remove Dataset</button>
|
||||||
<script>
|
<script>
|
||||||
var randomScalingFactor = function() {
|
var randomScalingFactor = function() {
|
||||||
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
|
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
|
||||||
@ -19,6 +21,9 @@
|
|||||||
var randomColorFactor = function() {
|
var randomColorFactor = function() {
|
||||||
return Math.round(Math.random() * 255);
|
return Math.round(Math.random() * 255);
|
||||||
};
|
};
|
||||||
|
var randomColor = function() {
|
||||||
|
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
|
||||||
|
};
|
||||||
|
|
||||||
var barChartData = {
|
var barChartData = {
|
||||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||||
@ -51,12 +56,26 @@
|
|||||||
$('#randomizeData').click(function() {
|
$('#randomizeData').click(function() {
|
||||||
var zero = Math.random() < 0.2 ? [0, 0, 0, 0, 0, 0, 0] : false;
|
var zero = Math.random() < 0.2 ? [0, 0, 0, 0, 0, 0, 0] : false;
|
||||||
$.each(barChartData.datasets, function(i, dataset) {
|
$.each(barChartData.datasets, function(i, dataset) {
|
||||||
dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
|
dataset.backgroundColor = randomColor();
|
||||||
dataset.data = zero || [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
|
dataset.data = zero || [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
|
||||||
|
|
||||||
});
|
});
|
||||||
window.myBar.update();
|
window.myBar.update();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#addDataset').click(function() {
|
||||||
|
var newDataset = {
|
||||||
|
label: 'Dataset ' + barChartData.datasets.length,
|
||||||
|
backgroundColor: randomColor(),
|
||||||
|
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
|
||||||
|
};
|
||||||
|
|
||||||
|
window.myBar.addDataset(newDataset, 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#removeDataset').click(function() {
|
||||||
|
window.myBar.removeDataset(0);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user