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

Merge pull request #1478 from etimberg/feature/data-change-api

Browse Source 
Data change must only happen by changing the data object
This commit is contained in:
Evert Timberg 2015-09-22 12:10:51 -04:00
commit cd0b95d383
20 changed files with 192 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
samples/bar.html
View File

@ -106,7 +106,8 @@
newDataset.data.push(randomScalingFactor());
}
window.myBar.addDataset(newDataset, 1);
barChartData.datasets.push(newDataset);
window.myBar.update();
updateLegend();
});
@ -115,15 +116,18 @@
barChartData.labels.push('data #' + barChartData.labels.length);
for (var index = 0; index < barChartData.datasets.length; ++index) {
window.myBar.addData(randomScalingFactor(), index);
//window.myBar.addData(randomScalingFactor(), index);
barChartData.datasets[index].data.push(randomScalingFactor());
}
window.myBar.update();
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myBar.removeDataset(0);
barChartData.datasets.splice(0, 1);
window.myBar.update();
updateLegend();
});
@ -131,8 +135,10 @@
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.datasets.forEach(function(dataset, datasetIndex) {
window.myBar.removeData(datasetIndex, -1);
dataset.data.pop();
});
window.myBar.update();
updateLegend();
});

12
samples/combo-time-scale.html
View File

@ -145,7 +145,8 @@
newDataset.data.push(randomScalingFactor());
}
window.myLine.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myLine.update();
updateLegend();
});
@ -157,15 +158,17 @@
);
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myLine.addData(randomScalingFactor(), index);
config.data.datasets[index].data.push(randomScalingFactor());
}
window.myLine.update();
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myLine.update();
updateLegend();
});
@ -173,9 +176,10 @@
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myLine.removeData(datasetIndex, -1);
config.data.datasets[datasetIndex].data.pop();
});
window.myLine.update();
updateLegend();
});
</script>

14
samples/doughnut.html
View File

@ -144,7 +144,8 @@
newDataset.backgroundColor.push(randomColor(0.7));
}
window.myDoughnut.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myDoughnut.update();
updateLegend();
});
@ -153,15 +154,18 @@
config.data.labels.push('data #' + config.data.labels.length);
$.each(config.data.datasets, function(index, dataset) {
window.myDoughnut.addData(randomScalingFactor(), index, dataset.data.length, randomColor(0.7));
dataset.data.push(randomScalingFactor());
dataset.backgroundColor.push(randomColor(0.7));
});
window.myDoughnut.update();
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myDoughnut.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myDoughnut.update();
updateLegend();
});
@ -169,9 +173,11 @@
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myDoughnut.removeData(datasetIndex, -1);
dataset.data.pop();
dataset.backgroundColor.pop();
});
window.myDoughnut.update();
updateLegend();
});
</script>

12
samples/line-logarithmic.html
View File

@ -126,7 +126,8 @@
newDataset.data.push(randomScalingFactor());
}
window.myLine.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myLine.update();
updateLegend();
});
@ -135,15 +136,17 @@
config.data.labels.push('dataset #' + config.data.labels.length);
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myLine.addData(randomScalingFactor(), index);
config.data.datasets[index].data.push(randomScalingFactor());
}
window.myLine.update();
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myLine.update();
updateLegend();
});
@ -151,9 +154,10 @@
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myLine.removeData(datasetIndex, -1);
dataset.data.pop();
});
window.myLine.update();
updateLegend();
});
</script>

14
samples/line-scale-override.html
View File

@ -101,7 +101,8 @@
newDataset.data.push(randomScalingFactor());
}
window.myLine.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myLine.update();
});
$('#addData').click(function() {
@ -109,21 +110,26 @@
config.data.labels.push('dataset #' + config.data.labels.length);
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myLine.addData(randomScalingFactor(), index);
config.data.datasets[index].data.push(randomScalingFactor());
}
window.myLine.update();
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myLine.update();
});
$('#removeData').click(function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myLine.removeData(datasetIndex, -1);
dataset.data.pop();
});
window.myLine.update();
});
</script>
</body>

12
samples/line-time-scale.html
View File

@ -144,7 +144,8 @@
newDataset.data.push(randomScalingFactor());
}
window.myLine.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myLine.update();
updateLegend();
});
@ -158,15 +159,17 @@
);
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myLine.addData(randomScalingFactor(), index);
config.data.datasets[index].data.push(randomScalingFactor());
}
window.myLine.update();
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myLine.update();
updateLegend();
});
@ -174,9 +177,10 @@
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myLine.removeData(datasetIndex, -1);
dataset.data.pop();
});
window.myLine.update();
updateLegend();
});
</script>

14
samples/line-x-axis-filter.html
View File

@ -108,7 +108,8 @@
newDataset.data.push(randomScalingFactor());
}
window.myLine.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myLine.update();
});
$('#addData').click(function() {
@ -116,21 +117,26 @@
config.data.labels.push('dataset #' + config.data.labels.length);
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myLine.addData(randomScalingFactor(), index);
config.data.datasets[index].data.push(randomScalingFactor());
}
window.myLine.update();
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myLine.update();
});
$('#removeData').click(function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myLine.removeData(datasetIndex, -1);
dataset.data.pop();
});
window.myLine.update();
});
</script>
</body>

16
samples/line.html
View File

@ -125,7 +125,8 @@
newDataset.data.push(randomScalingFactor());
}
window.myLine.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myLine.update();
updateLegend();
});
@ -133,16 +134,18 @@
if (config.data.datasets.length > 0) {
config.data.labels.push('dataset #' + config.data.labels.length);
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myLine.addData(randomScalingFactor(), index);
}
$.each(config.data.datasets, function(i, dataset) {
dataset.data.push(randomScalingFactor());
});
window.myLine.update();
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myLine.update();
updateLegend();
});
@ -150,9 +153,10 @@
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myLine.removeData(datasetIndex, -1);
dataset.data.pop();
});
window.myLine.update();
updateLegend();
});
</script>

6
samples/pie.html
View File

@ -108,11 +108,13 @@
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
};
window.myPie.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myPie.update();
});
$('#removeDataset').click(function() {
window.myPie.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myPie.update();
});
</script>
</body>

18
samples/polar-area.html
View File

@ -93,23 +93,25 @@
if (config.data.datasets.length > 0) {
config.data.labels.push('dataset #' + config.data.labels.length);
for (var index = 0; index < config.data.datasets.length; ++index) {
config.data.datasets[index].backgroundColor.push(randomColor());
window.myPolarArea.addData(randomScalingFactor(), index);
}
$.each(config.data.datasets, function(i, dataset) {
dataset.backgroundColor.push(randomColor());
dataset.data.push(randomScalingFactor());
});
window.myPolarArea.update();
updateLegend();
}
});
$('#removeData').click(function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.labels.pop(); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
dataset.backgroundColor.splice(-1, 1);
window.myPolarArea.removeData(datasetIndex, -1);
$.each(config.data.datasets, function(i, dataset) {
dataset.backgroundColor.pop();
dataset.data.pop();
});
window.myPolarArea.update();
updateLegend();
});
</script>

22
samples/radar.html
View File

@ -16,7 +16,7 @@
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
]<div>
<div>
<h3>Legend</h3>
<div id="legendContainer">
@ -97,7 +97,8 @@
newDataset.data.push(randomScalingFactor());
}
window.myRadar.addDataset(newDataset);
config.data.datasets.push(newDataset);
window.myRadar.update();
updateLegend();
});
@ -105,26 +106,29 @@
if (config.data.datasets.length > 0) {
config.data.labels.push('dataset #' + config.data.labels.length);
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myRadar.addData(randomScalingFactor(), index);
}
$.each(config.data.datasets, function (i, dataset) {
dataset.data.push(randomScalingFactor());
});
window.myRadar.update();
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myRadar.removeDataset(0);
config.data.datasets.splice(0, 1);
window.myRadar.update();
updateLegend();
});
$('#removeData').click(function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.labels.pop(); // remove the label first
config.data.datasets.forEach(function(dataset, datasetIndex) {
window.myRadar.removeData(datasetIndex, -1);
$.each(config.data.datasets, function(i, dataset) {
dataset.data.pop();
});
window.myRadar.update();
updateLegend();
});
</script>

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

@ -107,9 +107,7 @@
this.update(true);
},
update: function(reset) {
var numBars = this.getBarCount();
buildOrUpdateElements: function buildOrUpdateElements() {
var numData = this.getDataset().data.length;
var numRectangles = this.getDataset().metaData.length;
@ -123,6 +121,10 @@
this.addElementAndReset(index);
}
}
},
update: function update(reset) {
var numBars = this.getBarCount();
helpers.each(this.getDataset().metaData, function(rectangle, index) {
this.updateElement(rectangle, index, reset, numBars);

30
src/controllers/controller.doughnut.js
View File

@ -84,20 +84,7 @@
this.update(true);
},
update: function(reset) {
this.chart.outerRadius = Math.max((helpers.min([this.chart.chart.width, this.chart.chart.height]) / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.chart.data.datasets.length;
this.getDataset().total = 0;
helpers.each(this.getDataset().data, function(value) {
this.getDataset().total += Math.abs(value);
}, this);
this.outerRadius = this.chart.outerRadius - (this.chart.radiusLength * this.index);
this.innerRadius = this.outerRadius - this.chart.radiusLength;
buildOrUpdateElements: function buildOrUpdateElements() {
// Make sure we have metaData for each data point
var numData = this.getDataset().data.length;
var numArcs = this.getDataset().metaData.length;
@ -112,6 +99,21 @@
this.addElementAndReset(index);
}
}
},
update: function update(reset) {
this.chart.outerRadius = Math.max((helpers.min([this.chart.chart.width, this.chart.chart.height]) / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.chart.data.datasets.length;
this.getDataset().total = 0;
helpers.each(this.getDataset().data, function(value) {
this.getDataset().total += Math.abs(value);
}, this);
this.outerRadius = this.chart.outerRadius - (this.chart.radiusLength * this.index);
this.innerRadius = this.outerRadius - this.chart.radiusLength;
helpers.each(this.getDataset().metaData, function(arc, index) {
this.updateElement(arc, index, reset);

18
src/controllers/controller.line.js
View File

@ -101,14 +101,7 @@
this.update(true);
},
update: function(reset) {
var line = this.getDataset().metaDataset;
var points = this.getDataset().metaData;
var yScale = this.getScaleForId(this.getDataset().yAxisID);
var xScale = this.getScaleForId(this.getDataset().xAxisID);
var scaleBase;
buildOrUpdateElements: function buildOrUpdateElements() {
// Handle the number of data points changing
var numData = this.getDataset().data.length;
var numPoints = this.getDataset().metaData.length;
@ -123,6 +116,15 @@
this.addElementAndReset(index);
}
}
},
update: function update(reset) {
var line = this.getDataset().metaDataset;
var points = this.getDataset().metaData;
var yScale = this.getScaleForId(this.getDataset().yAxisID);
var xScale = this.getScaleForId(this.getDataset().xAxisID);
var scaleBase;
if (yScale.min < 0 && yScale.max < 0) {
scaleBase = yScale.getPixelForValue(yScale.max);

19
src/controllers/controller.polarArea.js
View File

@ -79,7 +79,24 @@
this.update(true);
},
update: function(reset) {
buildOrUpdateElements: function buildOrUpdateElements() {
// Handle the number of data points changing
var numData = this.getDataset().data.length;
var numPoints = this.getDataset().metaData.length;
// Make sure that we handle number of datapoints changing
if (numData < numPoints) {
// Remove excess bars for data points that have been removed
this.getDataset().metaData.splice(numData, numPoints - numData)
} else if (numData > numPoints) {
// Add new elements
for (var index = numPoints; index < numData; ++index) {
this.addElementAndReset(index);
}
}
},
update: function update(reset) {
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
//this.chart.scale.setScaleSize();

19
src/controllers/controller.radar.js
View File

@ -95,7 +95,24 @@
this.update(true);
},
update: function(reset) {
buildOrUpdateElements: function buildOrUpdateElements() {
// Handle the number of data points changing
var numData = this.getDataset().data.length;
var numPoints = this.getDataset().metaData.length;
// Make sure that we handle number of datapoints changing
if (numData < numPoints) {
// Remove excess bars for data points that have been removed
this.getDataset().metaData.splice(numData, numPoints - numData)
} else if (numData > numPoints) {
// Add new elements
for (var index = numPoints; index < numData; ++index) {
this.addElementAndReset(index);
}
}
},
update: function update(reset) {
var line = this.getDataset().metaDataset;
var points = this.getDataset().metaData;

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

@ -75,52 +75,6 @@
return this;
},
addDataset: function addDataset(dataset, index) {
if (index !== undefined) {
this.data.datasets.splice(index, 0, dataset);
} else {
this.data.datasets.push(dataset);
}
this.buildOrUpdateControllers();
dataset.controller.reset(); // so that animation looks ok
this.update();
},
removeDataset: function removeDataset(index) {
this.data.datasets.splice(index, 1);
this.buildOrUpdateControllers();
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;
}
var addElementArgs = [index];
for (var i = 3; i < arguments.length; ++i) {
addElementArgs.push(arguments[i]);
}
this.data.datasets[datasetIndex].data.splice(index, 0, data);
this.data.datasets[datasetIndex].controller.addElementAndReset.apply(this.data.datasets[datasetIndex].controller, addElementArgs);
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;
@ -210,7 +164,7 @@
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
},
buildOrUpdateControllers: function() {
buildOrUpdateControllers: function buildOrUpdateControllers(resetNewControllers) {
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
var type = dataset.type || this.config.type;
if (dataset.controller) {
@ -218,6 +172,10 @@
return;
}
dataset.controller = new Chart.controllers[type](this, datasetIndex);
if (resetNewControllers) {
dataset.controller.reset();
}
}, this);
},
@ -227,10 +185,18 @@
}, this);
},
update: function update(animationDuration, lazy) {
// This will loop through any data and do the appropriate element update for the type
Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height);
// Make sure dataset controllers are updated and new controllers are reset
this.buildOrUpdateControllers(true);
// Make sure all dataset controllers have correct meta data counts
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
dataset.controller.buildOrUpdateElements();
}, this);
// This will loop through any data and do the appropriate element update for the type
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
dataset.controller.update();
}, this);
@ -288,10 +254,6 @@
this.tooltip.transition(easingDecimal).draw();
},
// Get the single element that was clicked on
// @return : An object containing the dataset index and element index of the matching element. Also contains the rectangle that was draw
getElementAtEvent: function(e) {
@ -333,9 +295,9 @@
for (var datasetIndex = 0; datasetIndex < this.data.datasets.length; datasetIndex++) {
for (var elementIndex = 0; elementIndex < this.data.datasets[datasetIndex].metaData.length; elementIndex++) {
if (this.data.datasets[datasetIndex].metaData[elementIndex].inLabelRange(eventPosition.x, eventPosition.y)) {
helpers.each(this.data.datasets[datasetIndex].metaData, function(element, index) {
elementsArray.push(element);
}, this);
helpers.each(this.data.datasets[datasetIndex].metaData, function(element, index) {
elementsArray.push(element);
}, this);
}
}
}

2
test/controller.bar.tests.js
View File

@ -194,6 +194,7 @@ describe('Bar controller tests', function() {
var controller = new Chart.controllers.bar(chart, 1);
chart.data.datasets[1].data = [1, 2]; // remove 2 items
controller.buildOrUpdateElements();
controller.update();
expect(chart.data.datasets[1].metaData.length).toBe(2);
@ -236,6 +237,7 @@ describe('Bar controller tests', function() {
});
chart.data.datasets[1].data = [1, 2, 3];
controller.buildOrUpdateElements();
controller.update();
expect(chart.data.datasets[1].metaData.length).toBe(3); // should add a new meta data item

2
test/controller.doughnut.tests.js
View File

@ -205,6 +205,7 @@ describe('Doughnut controller tests', function() {
// Change the amount of data and ensure that arcs are updated accordingly
chart.data.datasets[0].data = [1, 2]; // remove 2 elements from dataset 0
controller.buildOrUpdateElements();
controller.update();
expect(chart.data.datasets[0].metaData.length).toBe(2);
@ -213,6 +214,7 @@ describe('Doughnut controller tests', function() {
// Add data
chart.data.datasets[0].data = [1, 2, 3, 4];
controller.buildOrUpdateElements();
controller.update();
expect(chart.data.datasets[0].metaData.length).toBe(4);

4
test/controller.line.tests.js
View File

@ -574,14 +574,14 @@ describe('Line controller tests', function() {
var controller = new Chart.controllers.line(chart, 0);
chart.data.datasets[0].data = [1, 2]; // remove 2 items
controller.buildOrUpdateElements();
controller.update();
expect(chart.data.datasets[0].metaData.length).toBe(2);
expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);
expect(chart.data.datasets[0].metaData[1] instanceof Chart.elements.Point).toBe(true);
chart.data.datasets[0].data = [1, 2, 3, 4, 5]; // add 3 items
controller.buildOrUpdateElements();
controller.update();
expect(chart.data.datasets[0].metaData.length).toBe(5);
expect(chart.data.datasets[0].metaData[0] instanceof Chart.elements.Point).toBe(true);