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

checkpoint for the morning check

Browse Source 
made some good progress.  Just need some more eyes on it, cuz I’m
literally typing without my glasses on right now.
This commit is contained in:
Tanner Linsley 2015-09-24 02:25:21 -06:00
parent e2a96501b7
commit ca48caa8b0
10 changed files with 348 additions and 902 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
samples/combo-bar-line.html
View File

@ -13,54 +13,56 @@
</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 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: [{
label: 'Dataset 1',
backgroundColor: "rgba(151,187,205,0.5)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
borderColor: 'white',
borderWidth: 2
}, {
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()]
}, ]
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,
}
};
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();
});
};
$('#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>

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

@ -1,131 +0,0 @@
<!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());
}
window.myLine.addDataset(newDataset);
});
$('#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) {
window.myLine.addData(randomScalingFactor(), index);
}
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
});
$('#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);
});
});
</script>
</body>
</html>

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

@ -6,9 +6,9 @@
<script src="../Chart.js"></script>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<style>
canvas {
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
}
canvas {
-webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .5);
}
</style>
</head>
@ -24,114 +24,114 @@
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
};
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,
borderDash: [5, 5],
}, {
label: "My Second dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
display: true,
labels: {
userCallback: function(dataLabel, index) {
return index % 2 === 0 ? dataLabel : null;
}
}
}],
yAxes: [{
display: true,
beginAtZero: false
}]
}
}
};
$.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: [],
var randomScalingFactor = function() {
return Math.round(Math.random() * 50 * (Math.random() > 0.5 ? 1 : 1)) + 50;
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
window.myLine.addDataset(newDataset);
});
$('#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) {
window.myLine.addData(randomScalingFactor(), index);
var config = {
type: 'line',
data: {
labels: ["January is a long month", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
fill: false,
borderDash: [5, 5],
}, {
label: "My Second dataset",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
display: true,
ticks: {
callback: function(dataLabel, index) {
return dataLabel;
}
}
}],
yAxes: [{
display: true,
beginAtZero: false
}]
}
}
}
});
};
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
});
$('#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);
$.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());
}
window.myLine.addDataset(newDataset);
});
$('#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) {
window.myLine.addData(randomScalingFactor(), index);
}
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
});
$('#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);
});
});
});
</script>
</body>

283
samples/scatter.html
View File

@ -15,150 +15,153 @@
</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 randomColor = function(opacity) {
return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var randomColor = function(opacity) {
return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
};
var scatterChartData = {
datasets: [{
label: "My First dataset",
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}, {
label: "My Second dataset",
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}]
};
var scatterChartData = {
datasets: [{
label: "My First dataset",
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}, {
label: "My Second dataset",
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}]
};
$.each(scatterChartData.datasets, function(i, dataset) {
dataset.borderColor = randomColor(0.4);
dataset.backgroundColor = randomColor(0.1);
dataset.pointBorderColor = randomColor(0.7);
dataset.pointBackgroundColor = randomColor(0.5);
dataset.pointBorderWidth = 1;
});
console.log(scatterChartData);
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = Chart.Scatter(ctx, {
data: scatterChartData,
options: {
scales: {
xAxes: [{
position: 'top',
gridLines: {
zeroLineColor: "rgba(0,255,0,1)"
},
scaleLabel: {
show: true,
labelString: 'x axis'
}
}],
yAxes: [{
position: 'right',
scaleLabel: {
show: true,
labelString: 'y axis'
}
}]
}
}
$.each(scatterChartData.datasets, function(i, dataset) {
dataset.borderColor = randomColor(0.4);
dataset.backgroundColor = randomColor(0.1);
dataset.pointBorderColor = randomColor(0.7);
dataset.pointBackgroundColor = randomColor(0.5);
dataset.pointBorderWidth = 1;
});
};
$('#randomizeData').click(function() {
scatterChartData.datasets[0].data = [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}];
scatterChartData.datasets[1].data = [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
window.myScatter.update();
});
console.log(scatterChartData);
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myScatter = Chart.Scatter(ctx, {
data: scatterChartData,
options: {
scales: {
xAxes: [{
position: 'top',
gridLines: {
zeroLineColor: "rgba(0,255,0,1)"
},
scaleLabel: {
show: true,
labelString: 'x axis'
}
}],
yAxes: [{
position: 'right',
gridLines: {
zeroLineColor: "rgba(0,255,0,1)"
},
scaleLabel: {
show: true,
labelString: 'y axis'
}
}]
}
}
});
};
$('#randomizeData').click(function() {
scatterChartData.datasets[0].data = [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}];
scatterChartData.datasets[1].data = [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
window.myScatter.update();
});
</script>
</body>

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

@ -16,8 +16,8 @@
type: "category",
// Specific to Bar Controller
categoryPercentage: 0.75,
barPercentage: 0.5,
categoryPercentage: 0.8,
barPercentage: 0.9,
// grid line settings
gridLines: {
@ -160,8 +160,8 @@
// Desired view properties
_model: {
x: this.calculateBarX(this.index, index),
y: reset ? yScalePoint : this.calculateBarY(this.index, index),
x: this.calculateBarX(index, this.index),
y: reset ? yScalePoint : this.calculateBarY(index, this.index),
// Tooltip
label: this.chart.data.labels[index],
@ -209,8 +209,8 @@
base = yScale.getPixelForValue(yScale.min);
if (yScale.beginAtZero || ((yScale.min <= 0 && yScale.max >= 0) || (yScale.min >= 0 && yScale.max <= 0))) {
base = yScale.getPixelForValue(0);
base += yScale.options.gridLines.lineWidth;
base = yScale.getPixelForValue(0, 0);
//base += yScale.options.gridLines.lineWidth;
} else if (yScale.min < 0 && yScale.max < 0) {
// All values are negative. Use the top as the base
base = yScale.getPixelForValue(yScale.max);
@ -225,9 +225,10 @@
var xScale = this.getScaleForID(this.getDataset().xAxisID);
var yScale = this.getScaleForID(this.getDataset().yAxisID);
var datasetCount = this.chart.data.datasets.length;
var tickWidth = xScale.getSmallestDataDistance();
console.log(tickWidth);
var datasetCount = !this.chart.isCombo ? this.chart.data.datasets.length : helpers.where(this.chart.data.datasets, function(ds) {
return ds.type == 'bar';
}).length;
var tickWidth = xScale.getPixelForValue(null, 1) - xScale.getPixelForValue(null, 0);
var categoryWidth = tickWidth * xScale.options.categoryPercentage;
var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2;
var fullBarWidth = categoryWidth / datasetCount;
@ -259,16 +260,16 @@
},
calculateBarX: function(datasetIndex, elementIndex) {
calculateBarX: function(index, datasetIndex) {
var yScale = this.getScaleForID(this.getDataset().yAxisID);
var xScale = this.getScaleForID(this.getDataset().xAxisID);
var leftTick = xScale.getPixelFromTickIndex(elementIndex);
var leftTick = xScale.getPixelForValue(null, index);
var ruler = this.getRuler();
if (yScale.options.stacked) {
return ruler.leftTick + (ruler.categoryWidth / 2) + ruler.categorySpacing;
return leftTick + (ruler.categoryWidth / 2) + ruler.categorySpacing;
}
return leftTick +
@ -279,7 +280,7 @@
(ruler.barSpacing * datasetIndex);
},
calculateBarY: function(datasetIndex, index) {
calculateBarY: function(index, datasetIndex) {
var xScale = this.getScaleForID(this.getDataset().xAxisID);
var yScale = this.getScaleForID(this.getDataset().yAxisID);

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

@ -116,7 +116,7 @@
// 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)
this.getDataset().metaData.splice(numData, numPoints - numData);
} else if (numData > numPoints) {
// Add new elements
for (var index = numPoints; index < numData; ++index) {
@ -192,7 +192,7 @@
// Desired view properties
_model: {
x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index),
x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo),
y: reset ? scaleBase : yScale.getPixelForValue(this.getDataset().data[index], index, this.index),
// Appearance
tension: point.custom && point.custom.tension ? point.custom.tension : (this.getDataset().tension || this.chart.options.elements.line.tension),

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

@ -209,14 +209,24 @@
},
buildOrUpdateControllers: function() {
var types = [];
helpers.each(this.data.datasets, function(dataset, datasetIndex) {
var type = dataset.type || this.config.type;
types.push(type);
if (dataset.controller) {
dataset.controller.updateIndex(datasetIndex);
return;
}
dataset.controller = new Chart.controllers[type](this, datasetIndex);
}, this);
if (types.length > 1) {
for (var i = 1; i < types.length; i++) {
if (types[i] != types[i - 1]) {
this.isCombo = true;
break;
}
}
}
},
resetElements: function resetElements() {

23
src/core/core.scale.js
View File

@ -46,11 +46,6 @@
this.beforeUpdate();
// Absorb the master measurements
if (!this.isHorizontal()) {
console.log(maxWidth);
}
this.maxWidth = maxWidth;
this.maxHeight = maxHeight;
this.margins = margins;
@ -132,6 +127,7 @@
//Max label rotation can be set or default to 90 - also act as a loop counter
while (this.labelWidth > tickWidth && this.labelRotation <= this.options.ticks.maxRotation) {
console.log(this.labelWidth, tickWidth, ',', this.labelRotation, this.options.ticks.maxRotation);
cosRotation = Math.cos(helpers.toRadians(this.labelRotation));
sinRotation = Math.sin(helpers.toRadians(this.labelRotation));
@ -145,6 +141,7 @@
this.paddingRight = this.options.ticks.fontSize / 2;
console.log(sinRotation * originalLabelWidth, this.maxHeight);
if (sinRotation * originalLabelWidth > this.maxHeight) {
// go back one step
this.labelRotation--;
@ -152,7 +149,6 @@
}
this.labelRotation++;
this.labelRotation = Math.max(this.labelRotation, this.options.ticks.minRotation);
this.labelWidth = cosRotation * originalLabelWidth;
}
@ -233,7 +229,6 @@
// Expand to max size
this.minSize.width = this.maxWidth;
}
this.minSize.width += 6; // extra padding
this.paddingTop = this.options.ticks.fontSize / 2;
this.paddingBottom = this.options.ticks.fontSize / 2;
@ -283,7 +278,8 @@
}
return this.left + Math.round(pixel);
} else {
return this.top + (index * (this.height / this.ticks.length));
var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
return this.top + (index * (innerHeight / (this.ticks.length - 1)));
}
},
@ -331,7 +327,7 @@
var xLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
if (this.options.gridLines.show) {
if (index === 0) {
if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
// Draw the first index specially
this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
@ -391,9 +387,10 @@
// }
var yLineValue = this.getPixelForTick(index); // xvalues for grid lines
var yLabelValue = this.getPixelForTick(index, this.options.gridLines.offsetGridLines); // x values for ticks (need to consider offsetLabel option)
var xLabelValue = this.left + (this.width / 2);
if (this.options.gridLines.show) {
if (index === 0) {
if (index === (typeof this.zeroLineIndex !== 'undefined' ? this.zeroLineIndex : 0)) {
// Draw the first index specially
this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
@ -426,11 +423,11 @@
if (this.options.ticks.show) {
this.ctx.save();
this.ctx.translate(this.left + (isRotated ? 10 : 5) + 3, yLabelValue - (this.options.ticks.fontSize / 2) + (isRotated ? this.options.ticks.fontSize / 1.5 : 0));
this.ctx.translate(xLabelValue, yLabelValue);
this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1);
this.ctx.font = this.font;
this.ctx.textAlign = (isRotated) ? "right" : "center";
this.ctx.textBaseline = (isRotated) ? "middle" : "top";
this.ctx.textAlign = 'center';
this.ctx.textBaseline = "middle";
this.ctx.fillText(label, 0, 0);
this.ctx.restore();
}

6
src/scales/scale.category.js
View File

@ -17,13 +17,11 @@
// Used to get data value locations. Value can either be an index or a numerical value
getPixelForValue: function(value, index, datasetIndex, includeOffset) {
if (this.isHorizontal()) {
var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
var valueWidth = innerWidth / Math.max((this.data.labels.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
var toZero = this.max - this.min;
var newVal = value - toZero;
var decimal = newVal / (this.max - toZero);
var valueOffset = (valueWidth * decimal) + this.paddingLeft;
var valueOffset = (valueWidth * index) + this.paddingLeft;
if (this.options.gridLines.offsetGridLines && includeOffset) {
valueOffset += (valueWidth / 2);

462
src/scales/scale.linear.js
View File

@ -74,24 +74,8 @@
}
// We need to decide how many ticks we are going to have. Each tick draws a grid line.
// There are two possibilities. The first is that the user has manually overridden the scale
// calculations in which case the job is easy. The other case is that we have to do it ourselves
//
// We assume at this point that the scale object has been updated with the following values
// by the chart.
//
// min: this is the minimum value of the scale
// max: this is the maximum value of the scale
// options: contains the options for the scale. This is referenced from the user settings
// rather than being cloned. This ensures that updates always propogate to a redraw
// Reset the ticks array. Later on, we will draw a grid line at these positions
// The array simply contains the numerical value of the spots where ticks will be
// Then calulate the ticks
this.ticks = [];
this.min = this.maxWidth;
this.max = this.maxHeight;
// Figure out what the max number of ticks we can support it is based on the size of
// the axis area. For now, we say that the minimum tick spacing in pixels must be 50
@ -156,18 +140,17 @@
this.start = this.max;
this.end = this.min;
} else {
this.start = this.min;
this.end = this.max;
this.start = this.max;
this.end = this.min;
}
this.zeroLineIndex = this.ticks.indexOf(0);
},
// Utils
// Get the correct value. If the value type is object get the x or y based on whether we are horizontal or not
getRightValue: function(rawValue) {
return (typeof(rawValue) === "object" && rawValue !== null) ? (this.isHorizontal() ? rawValue.x : rawValue.y) : rawValue;
},
getPixelForValue: function(value, index, datasetIndex, includeOffset) {
// This must be called after fit has been run so that
// this.left, this.top, this.right, and this.bottom have been defined
@ -176,437 +159,20 @@
if (this.isHorizontal()) {
var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
pixel = this.left + (innerWidth / range * (value - this.start));
pixel += this.paddingLeft;
pixel = this.left + (innerWidth / range * (this.getRightValue(value) - this.start));
return Math.round(pixel + this.paddingLeft);
} else {
// Bottom - top since pixels increase downard on a screen
var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
pixel = (this.bottom - this.paddingBottom) - (innerHeight / range * (value - this.start));
pixel = this.top + (innerHeight / range * (this.getRightValue(value) - this.start));
return Math.round(pixel + this.paddingTop);
}
return pixel;
},
// Functions needed for line charts
// calculateRange: function() {
// this.min = null;
// this.max = null;
// Get the correct value. If the value type is object get the x or y based on whether we are horizontal or not
getRightValue: function(rawValue) {
return (typeof(rawValue) === "object" && rawValue !== null) ? (this.isHorizontal() ? rawValue.x : rawValue.y) : rawValue;
},
// var positiveValues = [];
// var negativeValues = [];
// if (this.options.stacked) {
// helpers.each(this.data.datasets, function(dataset) {
// if (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id) {
// helpers.each(dataset.data, function(rawValue, index) {
// var value = this.getRightValue(rawValue);
// positiveValues[index] = positiveValues[index] || 0;
// negativeValues[index] = negativeValues[index] || 0;
// if (this.options.relativePoints) {
// positiveValues[index] = 100;
// } else {
// if (value < 0) {
// negativeValues[index] += value;
// } else {
// positiveValues[index] += value;
// }
// }
// }, this);
// }
// }, this);
// var values = positiveValues.concat(negativeValues);
// this.min = helpers.min(values);
// this.max = helpers.max(values);
// } else {
// helpers.each(this.data.datasets, function(dataset) {
// if (this.isHorizontal() ? dataset.xAxisID === this.id : dataset.yAxisID === this.id) {
// helpers.each(dataset.data, function(rawValue, index) {
// var value = this.getRightValue(rawValue);
// if (this.min === null) {
// this.min = value;
// } else if (value < this.min) {
// this.min = value;
// }
// if (this.max === null) {
// this.max = value;
// } else if (value > this.max) {
// this.max = value;
// }
// }, this);
// }
// }, this);
// }
// if (this.min === this.max) {
// this.min--;
// this.max++;
// }
// },
// getPointPixelForValue: function(rawValue, index, datasetIndex) {
// var value = this.getRightValue(rawValue);
// if (this.options.stacked) {
// var offsetPos = 0;
// var offsetNeg = 0;
// for (var i = this.data.datasets.length - 1; i > datasetIndex; --i) {
// if (this.data.datasets[i].data[index] < 0) {
// offsetNeg += this.data.datasets[i].data[index];
// } else {
// offsetPos += this.data.datasets[i].data[index];
// }
// }
// if (value < 0) {
// return this.getPixelForValue(offsetNeg + value);
// } else {
// return this.getPixelForValue(offsetPos + value);
// }
// } else {
// return this.getPixelForValue(value);
// }
// },
// Functions needed for bar charts
// calculateBarBase: function(datasetIndex, index) {
// var base = 0;
// if (this.options.stacked) {
// var value = this.data.datasets[datasetIndex].data[index];
// if (value < 0) {
// for (var i = 0; i < datasetIndex; i++) {
// if (this.data.datasets[i].yAxisID === this.id) {
// base += this.data.datasets[i].data[index] < 0 ? this.data.datasets[i].data[index] : 0;
// }
// }
// } else {
// for (var j = 0; j < datasetIndex; j++) {
// if (this.data.datasets[j].yAxisID === this.id) {
// base += this.data.datasets[j].data[index] > 0 ? this.data.datasets[j].data[index] : 0;
// }
// }
// }
// return this.getPixelForValue(base);
// }
// base = this.getPixelForValue(this.min);
// if (this.beginAtZero || ((this.min <= 0 && this.max >= 0) || (this.min >= 0 && this.max <= 0))) {
// base = this.getPixelForValue(0);
// base += this.options.gridLines.lineWidth;
// } else if (this.min < 0 && this.max < 0) {
// // All values are negative. Use the top as the base
// base = this.getPixelForValue(this.max);
// }
// return base;
// },
// calculateBarY: function(datasetIndex, index) {
// var value = this.data.datasets[datasetIndex].data[index];
// if (this.options.stacked) {
// var sumPos = 0,
// sumNeg = 0;
// for (var i = 0; i < datasetIndex; i++) {
// if (this.data.datasets[i].data[index] < 0) {
// sumNeg += this.data.datasets[i].data[index] || 0;
// } else {
// sumPos += this.data.datasets[i].data[index] || 0;
// }
// }
// if (value < 0) {
// return this.getPixelForValue(sumNeg + value);
// } else {
// return this.getPixelForValue(sumPos + value);
// }
// return this.getPixelForValue(value);
// }
// return this.getPixelForValue(value);
// },
// Fit this axis to the given size
// @param {number} maxWidth : the max width the axis can be
// @param {number} maxHeight: the max height the axis can be
// @return {object} minSize : the minimum size needed to draw the axis
/*fit: function() {
this.minSize = {
width: 0,
height: 0,
};
// In a horizontal axis, we need some room for the scale to be drawn
//
// -----------------------------------------------------
// | | | | |
//
// In a vertical axis, we need some room for the scale to be drawn.
// The actual grid lines will be drawn on the chart area, however, we need to show
// ticks where the axis actually is.
// We will allocate 25px for this width
// |
// -|
// |
// |
// -|
// |
// |
// -|
// Width
if (this.isHorizontal()) {
this.minSize.width = this.maxWidth; // fill all the width
} else {
this.minSize.width = this.options.gridLines.show && this.options.display ? 10 : 0;
}
// height
if (this.isHorizontal()) {
this.minSize.height = this.options.gridLines.show && this.options.display ? 10 : 0;
} else {
this.minSize.height = this.maxHeight; // fill all the height
}
this.paddingLeft = 0;
this.paddingRight = 0;
this.paddingTop = 0;
this.paddingBottom = 0;
if (this.options.ticks.show && this.options.display) {
// Don't bother fitting the ticks if we are not showing them
var labelFont = helpers.fontString(this.options.ticks.fontSize,
this.options.ticks.fontStyle, this.options.ticks.fontFamily);
if (this.isHorizontal()) {
// A horizontal axis is more constrained by the height.
var maxLabelHeight = this.maxHeight - this.minSize.height;
var labelHeight = 1.5 * this.options.ticks.fontSize;
this.minSize.height = Math.min(this.maxHeight, this.minSize.height + labelHeight);
var labelFont = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
this.ctx.font = labelFont;
var firstLabelWidth = this.ctx.measureText(this.ticks[0]).width;
var lastLabelWidth = this.ctx.measureText(this.ticks[this.ticks.length - 1]).width;
// Ensure that our ticks are always inside the canvas
this.paddingLeft = firstLabelWidth / 2;
this.paddingRight = lastLabelWidth / 2;
} else {
// A vertical axis is more constrained by the width. Labels are the dominant factor
// here, so get that length first
var maxLabelWidth = this.maxWidth - this.minSize.width;
var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.ticks);
if (largestTextWidth < maxLabelWidth) {
// We don't need all the room
this.minSize.width += largestTextWidth;
this.minSize.width += 3; // extra padding
} else {
// Expand to max size
this.minSize.width = this.maxWidth;
}
this.paddingTop = this.options.ticks.fontSize / 2;
this.paddingBottom = this.options.ticks.fontSize / 2;
}
}
if (this.margins) {
this.paddingLeft -= this.margins.left;
this.paddingTop -= this.margins.top;
this.paddingRight -= this.margins.right;
this.paddingBottom -= this.margins.bottom;
this.paddingLeft = Math.max(this.paddingLeft, 0);
this.paddingTop = Math.max(this.paddingTop, 0);
this.paddingRight = Math.max(this.paddingRight, 0);
this.paddingBottom = Math.max(this.paddingBottom, 0);
}
this.width = this.minSize.width;
this.height = this.minSize.height;
},*/
// Actualy draw the scale on the canvas
// @param {rectangle} chartArea : the area of the chart to draw full grid lines on
_draw: function(chartArea) {
if (this.options.display) {
var setContextLineSettings;
var hasZero;
// Make sure we draw text in the correct color
this.ctx.fillStyle = this.options.ticks.fontColor;
if (this.isHorizontal()) {
if (this.options.gridLines.show) {
// Draw the horizontal line
setContextLineSettings = true;
hasZero = helpers.findNextWhere(this.ticks, function(tick) {
return tick === 0;
}) !== undefined;
var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 5;
var yTickEnd = this.options.position == "bottom" ? this.top + 5 : this.bottom;
helpers.each(this.ticks, function(tick, index) {
// Grid lines are vertical
var xValue = this.getPixelForValue(tick);
if (tick === 0 || (!hasZero && index === 0)) {
// Draw the 0 point specially or the left if there is no 0
this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
setContextLineSettings = true; // reset next time
} else if (setContextLineSettings) {
this.ctx.lineWidth = this.options.gridLines.lineWidth;
this.ctx.strokeStyle = this.options.gridLines.color;
setContextLineSettings = false;
}
xValue += helpers.aliasPixel(this.ctx.lineWidth);
// Draw the label area
this.ctx.beginPath();
if (this.options.gridLines.drawTicks) {
this.ctx.moveTo(xValue, yTickStart);
this.ctx.lineTo(xValue, yTickEnd);
}
// Draw the chart area
if (this.options.gridLines.drawOnChartArea) {
this.ctx.moveTo(xValue, chartArea.top);
this.ctx.lineTo(xValue, chartArea.bottom);
}
// Need to stroke in the loop because we are potentially changing line widths & colours
this.ctx.stroke();
}, this);
}
if (this.options.ticks.show) {
// Draw the ticks
var labelStartY;
if (this.options.position == "top") {
labelStartY = this.bottom - 10;
this.ctx.textBaseline = "bottom";
} else {
// bottom side
labelStartY = this.top + 10;
this.ctx.textBaseline = "top";
}
this.ctx.textAlign = "center";
this.ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
helpers.each(this.ticks, function(label, index) {
var xValue = this.getPixelForValue(this.ticks[index]);
this.ctx.fillText(label, xValue, labelStartY);
}, this);
}
} else {
// Vertical
if (this.options.gridLines.show) {
// Draw the vertical line
setContextLineSettings = true;
hasZero = helpers.findNextWhere(this.ticks, function(tick) {
return tick === 0;
}) !== undefined;
var xTickStart = this.options.position == "right" ? this.left : this.right - 5;
var xTickEnd = this.options.position == "right" ? this.left + 5 : this.right;
helpers.each(this.ticks, function(tick, index) {
// Grid lines are horizontal
var yValue = this.getPixelForValue(tick);
if (tick === 0 || (!hasZero && index === 0)) {
// Draw the 0 point specially or the bottom if there is no 0
this.ctx.lineWidth = this.options.gridLines.zeroLineWidth;
this.ctx.strokeStyle = this.options.gridLines.zeroLineColor;
setContextLineSettings = true; // reset next time
} else if (setContextLineSettings) {
this.ctx.lineWidth = this.options.gridLines.lineWidth;
this.ctx.strokeStyle = this.options.gridLines.color;
setContextLineSettings = false; // use boolean to indicate that we only want to do this once
}
yValue += helpers.aliasPixel(this.ctx.lineWidth);
// Draw the label area
this.ctx.beginPath();
if (this.options.gridLines.drawTicks) {
this.ctx.moveTo(xTickStart, yValue);
this.ctx.lineTo(xTickEnd, yValue);
}
// Draw the chart area
if (this.options.gridLines.drawOnChartArea) {
this.ctx.moveTo(chartArea.left, yValue);
this.ctx.lineTo(chartArea.right, yValue);
}
this.ctx.stroke();
}, this);
}
if (this.options.ticks.show) {
// Draw the ticks
var labelStartX;
if (this.options.position == "left") {
if (this.options.ticks.mirror) {
labelStartX = this.right + this.options.ticks.padding;
this.ctx.textAlign = "left";
} else {
labelStartX = this.right - this.options.ticks.padding;
this.ctx.textAlign = "right";
}
} else {
// right side
if (this.options.ticks.mirror) {
labelStartX = this.left - this.options.ticks.padding;
this.ctx.textAlign = "right";
} else {
labelStartX = this.left + this.options.ticks.padding;
this.ctx.textAlign = "left";
}
}
this.ctx.textBaseline = "middle";
this.ctx.font = helpers.fontString(this.options.ticks.fontSize, this.options.ticks.fontStyle, this.options.ticks.fontFamily);
helpers.each(this.ticks, function(label, index) {
var yValue = this.getPixelForValue(this.ticks[index]);
this.ctx.fillText(label, labelStartX, yValue);
}, this);
}
}
}
}
});
Chart.scaleService.registerScaleType("linear", LinearScale, defaultConfig);