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

Bar and combo support for time scale

Browse Source
This commit is contained in:
Tanner Linsley 2015-09-18 11:31:25 -06:00
parent 92682abbae
commit 677c249b61
4 changed files with 203 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
samples/combo-time-scale.html Normal file
View File

@ -0,0 +1,186 @@
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<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);
}
</style>
</head>
<body>
<div style="width:100%;">
<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>
<div>
<h3>Legend</h3>
<div id="legendContainer">
</div>
</div>
<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 newDate = function(days) {
var date = new Date();
return date.setDate(date.getDate() + days);
};
var newTimestamp = function(days) {
return Date.now() - days * 100000;
};
var config = {
type: 'bar',
data: {
//labels: [newTimestamp(0), newTimestamp(1), newTimestamp(2), newTimestamp(3), newTimestamp(4), newTimestamp(5), newTimestamp(6)], // unix timestamps
// labels: [newDate(0), newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], // Date Objects
labels: ["01/01/2015 20:00", "01/02/2015 20:00", "01/03/2015 22:00", "01/05/2015 23:00", "01/07/2015 03:00", "01/08/2015 10:00", "01/10/2015"], // Hours
// labels: ["01/01/2015", "01/02/2015", "01/03/2015", "01/06/2015", "01/15/2015", "01/17/2015", "01/30/2015"], // Days
// labels: ["12/25/2014", "01/08/2015", "01/15/2015", "01/22/2015", "01/29/2015", "02/05/2015", "02/12/2015"], // Weeks
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()]
}, ]
},
options: {
responsive: true,
scales: {
xAxes: [{
type: "time",
display: true,
tick: {
format: 'MM/DD/YYYY HH:mm',
// round: 'day'
}
}, ],
yAxes: [{
display: true
}]
},
elements: {
line: {
tension: 0
}
},
}
};
$.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);
updateLegend();
};
function updateLegend() {
$legendContainer = $('#legendContainer');
$legendContainer.empty();
$legendContainer.append(window.myLine.generateLegend());
}
$('#randomizeData').click(function() {
$.each(config.data.datasets, function(i, dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myLine.update();
updateLegend();
});
$('#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);
updateLegend();
});
$('#addData').click(function() {
if (config.data.datasets.length > 0) {
config.data.labels.push(
moment(
config.data.labels[config.data.labels.length - 1], config.options.scales.xAxes[0].time.format
).add(1, 'day')
.format('MM/DD/YYYY')
);
for (var index = 0; index < config.data.datasets.length; ++index) {
window.myLine.addData(randomScalingFactor(), index);
}
updateLegend();
}
});
$('#removeDataset').click(function() {
window.myLine.removeDataset(0);
updateLegend();
});
$('#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);
});
updateLegend();
});
</script>
</body>
</html>

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

@ -51,7 +51,7 @@
data: {
//labels: [newTimestamp(0), newTimestamp(1), newTimestamp(2), newTimestamp(3), newTimestamp(4), newTimestamp(5), newTimestamp(6)], // unix timestamps
// labels: [newDate(0), newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], // Date Objects
labels: ["01/01/2015 20:00", "01/02/2015 21:00", "01/03/2015 22:00", "01/05/2015 23:00", "01/07/2015 03:00", "01/08/2015 10:00", "02/1/2015"], // Hours
labels: ["01/01/2015 20:00", "01/02/2015 21:00", "01/03/2015 22:00", "01/05/2015 23:00", "01/07/2015 03:00", "01/08/2015 10:00", "01/10/2015"], // Hours
// labels: ["01/01/2015", "01/02/2015", "01/03/2015", "01/06/2015", "01/15/2015", "01/17/2015", "01/30/2015"], // Days
// labels: ["12/25/2014", "01/08/2015", "01/15/2015", "01/22/2015", "01/29/2015", "02/05/2015", "02/12/2015"], // Weeks
datasets: [{
@ -143,10 +143,10 @@
$('#addData').click(function() {
if (config.data.datasets.length > 0) {
config.data.labels.push(
moment(
config.data.labels[config.data.labels.length - 1], config.options.scales.xAxes[0].time.format
).add(1, 'day')
.format('MM/DD/YYYY')
myLine.scales['x-axis-0'].labelMoments[myLine.scales['x-axis-0'].labelMoments.length - 1]
.clone()
.add(1, 'day')
.format('MM/DD/YYYY HH:mm')
);
for (var index = 0; index < config.data.datasets.length; ++index) {

2
src/elements/element.rectangle.js
View File

@ -63,7 +63,7 @@
} else {
inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y);
}
}
}
return inRange;
},

19
src/scales/scale.time.js
View File

@ -160,6 +160,13 @@
this.firstTick.startOf(this.tickUnit);
this.lastTick.endOf(this.tickUnit);
this.smallestLabelSeparation = this.width;
var i = 0;
for (i = 1; i < this.labelMoments.length; i++) {
this.smallestLabelSeparation = Math.min(this.smallestLabelSeparation, this.labelMoments[i].diff(this.labelMoments[i - 1], this.tickUnit, true));
}
// Tick displayFormat override
@ -168,7 +175,6 @@
}
// For every unit in between the first and last moment, create a moment and add it to the labels tick
var i = 0;
if (this.options.labels.userCallback) {
for (; i <= this.tickRange; i++) {
this.ticks.push(
@ -192,13 +198,9 @@
// this.left, this.top, this.right, and this.bottom have been defined
if (this.isHorizontal()) {
var innerWidth = this.width - (this.paddingLeft + this.paddingRight);
var valueWidth = innerWidth / Math.max((this.ticks.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1);
var valueWidth = innerWidth / Math.max(this.ticks.length - 1, 1);
var valueOffset = (innerWidth * decimal) + this.paddingLeft;
if (this.options.gridLines.offsetGridLines && includeOffset) {
valueOffset += (valueWidth / 2);
}
return this.left + Math.round(valueOffset);
} else {
return this.top + (decimal * (this.height / this.ticks.length));
@ -212,7 +214,7 @@
// Functions needed for bar charts
calculateBaseWidth: function() {
return (this.getPixelForValue(null, this.ticks.length / 100, 0, true) - this.getPixelForValue(null, 0, 0, true)) - (2 * this.options.categorySpacing);
return (this.getPixelForValue(null, this.smallestLabelSeparation / this.tickRange, 0, true) - this.getPixelForValue(null, 0, 0, true)) - (2 * this.options.categorySpacing);
},
calculateBarWidth: function(barDatasetCount) {
//The padding between datasets is to the right of each bar, providing that there are more than 1 dataset
@ -226,7 +228,8 @@
calculateBarX: function(barDatasetCount, datasetIndex, elementIndex) {
var xWidth = this.calculateBaseWidth(),
xAbsolute = this.getPixelForValue(null, elementIndex, datasetIndex, true) - (xWidth / 2),
offset = this.labelMoments[elementIndex].diff(this.firstTick, this.tickUnit, true),
xAbsolute = this.getPixelForValue(null, offset / this.tickRange, datasetIndex, true) - (xWidth / 2),
barWidth = this.calculateBarWidth(barDatasetCount);
if (this.options.stacked) {