archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Add and remove data for bar charts

Browse Source
This commit is contained in:
Evert Timberg 2015-06-17 22:03:24 -04:00
parent 061566ee27
commit 7796c4e87d
3 changed files with 103 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
samples/bar.html
View File

@ -14,6 +14,8 @@
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
@ -54,10 +56,12 @@
};
$('#randomizeData').click(function() {
var zero = Math.random() < 0.2 ? [0, 0, 0, 0, 0, 0, 0] : false;
var zero = Math.random() < 0.2 ? true : false;
$.each(barChartData.datasets, function(i, dataset) {
dataset.backgroundColor = randomColor();
dataset.data = zero || [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
dataset.data = dataset.data.map(function() {
return zero ? 0.0 : randomScalingFactor();
});
});
window.myBar.update();
@ -67,15 +71,37 @@
var newDataset = {
label: 'Dataset ' + barChartData.datasets.length,
backgroundColor: randomColor(),
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
data: []
};
for (var index = 0; index < barChartData.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
window.myBar.addDataset(newDataset, 1);
});
$('#addData').click(function() {
if (barChartData.datasets.length > 0) {
barChartData.labels.push('dataset #' + barChartData.labels.length);
for (var index = 0; index < barChartData.datasets.length; ++index) {
window.myBar.addData(randomScalingFactor(), index);
}
}
});
$('#removeDataset').click(function() {
window.myBar.removeDataset(0);
});
$('#removeData').click(function() {
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.datasets.forEach(function(dataset, datasetIndex) {
window.myBar.removeData(datasetIndex, -1);
});
});
</script>
</body>

85
src/controllers/controller.bar.js
View File

@ -71,56 +71,71 @@
});
}, this);
},
addElementAndReset: function(index) {
this.getDataset().metaData = this.getDataset().metaData || [];
var rectangle = new Chart.elements.Rectangle({
_chart: this.chart.chart,
_datasetIndex: this.index,
_index: index,
});
this.updateElement(rectangle, index, true);
this.getDataset().metaData.splice(index, 0, rectangle);
},
removeElement: function(index) {
this.getDataset().metaData.splice(index, 1);
},
reset: function() {
this.update(true);
},
update: function(reset) {
helpers.each(this.getDataset().metaData, function(rectangle, index) {
this.updateElement(rectangle, index, reset);
}, this);
},
updateElement: function updateElement(rectangle, index, reset) {
var xScale = this.getScaleForId(this.getDataset().xAxisID);
var yScale = this.getScaleForId(this.getDataset().yAxisID);
helpers.each(this.getDataset().metaData, function(rectangle, index) {
var yScalePoint;
var yScalePoint;
if (yScale.min < 0 && yScale.max < 0) {
// all less than 0. use the top
yScalePoint = yScale.getPixelForValue(yScale.max);
} else if (yScale.min > 0 && yScale.max > 0) {
yScalePoint = yScale.getPixelForValue(yScale.min);
} else {
yScalePoint = yScale.getPixelForValue(0);
}
if (yScale.min < 0 && yScale.max < 0) {
// all less than 0. use the top
yScalePoint = yScale.getPixelForValue(yScale.max);
} else if (yScale.min > 0 && yScale.max > 0) {
yScalePoint = yScale.getPixelForValue(yScale.min);
} else {
yScalePoint = yScale.getPixelForValue(0);
}
helpers.extend(rectangle, {
// Utility
_chart: this.chart.chart,
_xScale: xScale,
_yScale: yScale,
_datasetIndex: this.index,
_index: index,
helpers.extend(rectangle, {
// Utility
_chart: this.chart.chart,
_xScale: xScale,
_yScale: yScale,
_datasetIndex: this.index,
_index: index,
// Desired view properties
_model: {
x: xScale.calculateBarX(this.chart.data.datasets.length, this.index, index),
y: reset ? yScalePoint : yScale.calculateBarY(this.index, index),
// Desired view properties
_model: {
x: xScale.calculateBarX(this.chart.data.datasets.length, this.index, index),
y: reset ? yScalePoint : yScale.calculateBarY(this.index, index),
// Tooltip
label: this.chart.data.labels[index],
datasetLabel: this.getDataset().label,
// Tooltip
label: this.chart.data.labels[index],
datasetLabel: this.getDataset().label,
// Appearance
base: yScale.calculateBarBase(this.index, index),
width: xScale.calculateBarWidth(this.chart.data.datasets.length),
backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth),
},
});
rectangle.pivot();
}, this);
// Appearance
base: yScale.calculateBarBase(this.index, index),
width: xScale.calculateBarWidth(this.chart.data.datasets.length),
backgroundColor: rectangle.custom && rectangle.custom.backgroundColor ? rectangle.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().backgroundColor, index, this.chart.options.elements.rectangle.backgroundColor),
borderColor: rectangle.custom && rectangle.custom.borderColor ? rectangle.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().borderColor, index, this.chart.options.elements.rectangle.borderColor),
borderWidth: rectangle.custom && rectangle.custom.borderWidth ? rectangle.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().borderWidth, index, this.chart.options.elements.rectangle.borderWidth),
},
});
rectangle.pivot();
},
draw: function(ease) {

24
src/core/core.controller.js
View File

@ -92,6 +92,30 @@
this.update();
},
// Add data to the given dataset
// @param data: the data to add
// @param {Number} datasetIndex : the index of the dataset to add to
// @param {Number} index : the index of the data
addData: function addData(data, datasetIndex, index) {
if (datasetIndex < this.data.datasets.length) {
if (index === undefined) {
index = this.data.datasets[datasetIndex].data.length;
}
this.data.datasets[datasetIndex].data.splice(index, 0, data);
this.data.datasets[datasetIndex].controller.addElementAndReset(index);
this.update();
}
},
removeData: function removeData(datasetIndex, index) {
if (datasetIndex < this.data.datasets.length) {
this.data.datasets[datasetIndex].data.splice(index, 1);
this.data.datasets[datasetIndex].controller.removeElement(index);
this.update();
}
},
resize: function resize(silent) {
this.stop();
var canvas = this.chart.canvas,