mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Merge branch 'v2.0-dev' into v2.0-dev-refactor
Conflicts: samples/line-scale-override.html samples/line-x-axis-filter.html samples/line.html src/controllers/controller.bar.js src/core/core.controller.js src/scales/scale.category.js
This commit is contained in:
Tanner Linsley
commit
b22f569e4d
19
Chart.min.js
vendored
19
Chart.min.js
vendored
File diff suppressed because one or more lines are too long
@ -99,7 +99,8 @@
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
window.myBar.addDataset(newDataset, 1);
|
||||
barChartData.datasets.push(newDataset);
|
||||
window.myBar.update();
|
||||
updateLegend();
|
||||
});
|
||||
|
||||
@ -108,15 +109,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();
|
||||
});
|
||||
|
||||
@ -124,8 +128,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();
|
||||
});
|
||||
|
||||
|
||||
@ -147,7 +147,8 @@
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
window.myLine.addDataset(newDataset);
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
updateLegend();
|
||||
});
|
||||
|
||||
@ -159,15 +160,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();
|
||||
});
|
||||
|
||||
@ -175,9 +178,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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
137
samples/line-scale-override.html
Normal file
137
samples/line-scale-override.html
Normal file
@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart with Scale Override</title>
|
||||
<script src="../Chart.js"></script>
|
||||
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:50%;">
|
||||
<canvas id="canvas" style="width:100%;height:100%"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<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.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
|
||||
};
|
||||
var randomColorFactor = function() {
|
||||
return Math.round(Math.random() * 255);
|
||||
};
|
||||
var randomColor = function(opacity) {
|
||||
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
||||
fill: false,
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
override: {
|
||||
start: -100,
|
||||
stepWidth: 10,
|
||||
steps: 20
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.each(config.data.datasets, function(i, dataset) {
|
||||
dataset.borderColor = randomColor(0.4);
|
||||
dataset.backgroundColor = randomColor(0.5);
|
||||
dataset.pointBorderColor = randomColor(0.7);
|
||||
dataset.pointBackgroundColor = randomColor(0.5);
|
||||
dataset.pointBorderWidth = 1;
|
||||
});
|
||||
|
||||
console.log(config.data);
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("canvas").getContext("2d");
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
$('#randomizeData').click(function() {
|
||||
$.each(config.data.datasets, function(i, dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
$('#addDataset').click(function() {
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + config.data.datasets.length,
|
||||
borderColor: randomColor(0.4),
|
||||
backgroundColor: randomColor(0.5),
|
||||
pointBorderColor: randomColor(0.7),
|
||||
pointBackgroundColor: randomColor(0.5),
|
||||
pointBorderWidth: 1,
|
||||
data: [],
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
$('#addData').click(function() {
|
||||
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].data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
$('#removeDataset').click(function() {
|
||||
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) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -124,7 +124,8 @@
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
window.myLine.addDataset(newDataset);
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
updateLegend();
|
||||
});
|
||||
|
||||
@ -132,16 +133,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();
|
||||
});
|
||||
|
||||
@ -149,9 +152,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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -110,10 +110,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;
|
||||
|
||||
@ -127,6 +124,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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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.update(this, this.chart.width, this.chart.height);
|
||||
//this.chart.scale.setScaleSize();
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
@ -208,7 +162,7 @@
|
||||
Chart.scaleService.update(this, this.chart.width, this.chart.height);
|
||||
},
|
||||
|
||||
buildOrUpdateControllers: function() {
|
||||
buildOrUpdateControllers: function buildOrUpdateControllers(resetNewControllers) {
|
||||
var types = [];
|
||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
||||
if (!dataset.type) {
|
||||
@ -221,6 +175,10 @@
|
||||
return;
|
||||
}
|
||||
dataset.controller = new Chart.controllers[type](this, datasetIndex);
|
||||
|
||||
if (resetNewControllers) {
|
||||
dataset.controller.reset();
|
||||
}
|
||||
}, this);
|
||||
if (types.length > 1) {
|
||||
for (var i = 1; i < types.length; i++) {
|
||||
@ -238,10 +196,18 @@
|
||||
}, this);
|
||||
},
|
||||
|
||||
|
||||
update: function update(animationDuration, lazy) {
|
||||
// This will loop through any data and do the appropriate element update for the type
|
||||
Chart.scaleService.update(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);
|
||||
@ -299,15 +265,11 @@
|
||||
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) {
|
||||
|
||||
var eventPosition = helpers.getRelativePosition(e);
|
||||
var eventPosition = helpers.getRelativePosition(e, this.chart);
|
||||
var elementsArray = [];
|
||||
|
||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
||||
@ -323,7 +285,7 @@
|
||||
},
|
||||
|
||||
getElementsAtEvent: function(e) {
|
||||
var eventPosition = helpers.getRelativePosition(e);
|
||||
var eventPosition = helpers.getRelativePosition(e, this.chart);
|
||||
var elementsArray = [];
|
||||
|
||||
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
|
||||
@ -338,7 +300,7 @@
|
||||
},
|
||||
|
||||
getDatasetAtEvent: function(e) {
|
||||
var eventPosition = helpers.getRelativePosition(e);
|
||||
var eventPosition = helpers.getRelativePosition(e, this.chart);
|
||||
var elementsArray = [];
|
||||
|
||||
for (var datasetIndex = 0; datasetIndex < this.data.datasets.length; datasetIndex++) {
|
||||
@ -370,9 +332,13 @@
|
||||
|
||||
// if we scaled the canvas in response to a devicePixelRatio !== 1, we need to undo that transform here
|
||||
if (this.chart.originalDevicePixelRatio !== undefined) {
|
||||
canvas.scale(1 / this.chart.originalDevicePixelRatio, 1 / this.chart.originalDevicePixelRatio);
|
||||
this.chart.ctx.scale(1 / this.chart.originalDevicePixelRatio, 1 / this.chart.originalDevicePixelRatio);
|
||||
}
|
||||
|
||||
// Reset to the old style since it may have been changed by the device pixel ratio changes
|
||||
canvas.style.width = this.chart.originalCanvasStyleWidth;
|
||||
canvas.style.height = this.chart.originalCanvasStyleHeight;
|
||||
|
||||
delete Chart.instances[this.id];
|
||||
},
|
||||
|
||||
|
||||
@ -653,7 +653,7 @@
|
||||
};
|
||||
})(),
|
||||
//-- DOM methods
|
||||
getRelativePosition = helpers.getRelativePosition = function(evt) {
|
||||
getRelativePosition = helpers.getRelativePosition = function(evt, chart) {
|
||||
var mouseX, mouseY;
|
||||
var e = evt.originalEvent || evt,
|
||||
canvas = evt.currentTarget || evt.srcElement,
|
||||
@ -671,8 +671,11 @@
|
||||
// Scale mouse coordinates into canvas coordinates
|
||||
// by following the pattern laid out by 'jerryj' in the comments of
|
||||
// http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
|
||||
mouseX = Math.round((mouseX - boundingRect.left) / (boundingRect.right - boundingRect.left) * canvas.width);
|
||||
mouseY = Math.round((mouseY - boundingRect.top) / (boundingRect.bottom - boundingRect.top) * canvas.height);
|
||||
|
||||
// We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However
|
||||
// the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here
|
||||
mouseX = Math.round((mouseX - boundingRect.left) / (boundingRect.right - boundingRect.left) * canvas.width / chart.currentDevicePixelRatio);
|
||||
mouseY = Math.round((mouseY - boundingRect.top) / (boundingRect.bottom - boundingRect.top) * canvas.height / chart.currentDevicePixelRatio);
|
||||
|
||||
return {
|
||||
x: mouseX,
|
||||
@ -773,12 +776,16 @@
|
||||
var ctx = chart.ctx;
|
||||
var width = chart.canvas.width;
|
||||
var height = chart.canvas.height;
|
||||
chart.currentDevicePixelRatio = window.devicePixelRatio || 1;
|
||||
|
||||
if (window.devicePixelRatio !== 1) {
|
||||
ctx.canvas.height = height * window.devicePixelRatio;
|
||||
ctx.canvas.width = width * window.devicePixelRatio;
|
||||
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||
|
||||
ctx.canvas.style.width = width + 'px';
|
||||
ctx.canvas.style.height = height + 'px';
|
||||
|
||||
// Store the device pixel ratio so that we can go backwards in `destroy`.
|
||||
// The devicePixelRatio changes with zoom, so there are no guarantees that it is the same
|
||||
// when destroy is called
|
||||
|
||||
@ -50,6 +50,10 @@
|
||||
this.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
|
||||
}
|
||||
|
||||
// Store the original style of the element so we can set it back
|
||||
this.originalCanvasStyleWidth = context.canvas.style.width;
|
||||
this.originalCanvasStyleHeight = context.canvas.style.height;
|
||||
|
||||
// High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
|
||||
Chart.helpers.retinaScale(this);
|
||||
|
||||
|
||||
@ -301,6 +301,8 @@
|
||||
var setContextLineSettings;
|
||||
var isRotated;
|
||||
var skipRatio;
|
||||
var scaleLabelX;
|
||||
var scaleLabelY;
|
||||
|
||||
// Make sure we draw text in the correct color
|
||||
this.ctx.fillStyle = this.options.ticks.fontColor;
|
||||
@ -367,6 +369,19 @@
|
||||
this.ctx.restore();
|
||||
}
|
||||
}, this);
|
||||
|
||||
if (this.options.scaleLabel.show) {
|
||||
// Draw the scale label
|
||||
this.ctx.textAlign = "center";
|
||||
this.ctx.textBaseline = 'middle';
|
||||
this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
|
||||
|
||||
scaleLabelX = this.left + ((this.right - this.left) / 2); // midpoint of the width
|
||||
scaleLabelY = this.options.position == 'bottom' ? this.bottom - (this.options.scaleLabel.fontSize / 2) : this.top + (this.options.scaleLabel.fontSize / 2);
|
||||
|
||||
this.ctx.fillText(this.options.scaleLabel.labelString, scaleLabelX, scaleLabelY);
|
||||
}
|
||||
|
||||
} else {
|
||||
setContextLineSettings = true;
|
||||
var xTickStart = this.options.position == "left" ? this.right : this.left - 10;
|
||||
@ -430,6 +445,22 @@
|
||||
this.ctx.restore();
|
||||
}
|
||||
}, this);
|
||||
|
||||
if (this.options.scaleLabel.show) {
|
||||
// Draw the scale label
|
||||
scaleLabelX = this.options.position == 'left' ? this.left + (this.options.scaleLabel.fontSize / 2) : this.right - (this.options.scaleLabel.fontSize / 2);
|
||||
scaleLabelY = this.top + ((this.bottom - this.top) / 2);
|
||||
var rotation = this.options.position == 'left' ? -0.5 * Math.PI : 0.5 * Math.PI;
|
||||
|
||||
this.ctx.save();
|
||||
this.ctx.translate(scaleLabelX, scaleLabelY);
|
||||
this.ctx.rotate(rotation);
|
||||
this.ctx.textAlign = "center";
|
||||
this.ctx.font = helpers.fontString(this.options.scaleLabel.fontSize, this.options.scaleLabel.fontStyle, this.options.scaleLabel.fontFamily);
|
||||
this.ctx.textBaseline = 'middle';
|
||||
this.ctx.fillText(this.options.scaleLabel.labelString, 0, 0);
|
||||
this.ctx.restore();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user