</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()];
+ $('#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();
});
- window.myBar.update();
- });
</script>
</body>
+++ /dev/null
-<!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>
<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>
<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
+ 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 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
+ }]
+ }
}
- }
- };
+ };
- $.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;
- });
+ $.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);
+ console.log(config.data);
- window.onload = function() {
- var ctx = document.getElementById("canvas").getContext("2d");
- window.myLine = new Chart(ctx, config);
- };
+ 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();
+ });
- $('#randomizeData').click(function() {
- $.each(config.data.datasets, function(i, dataset) {
- dataset.data = dataset.data.map(function() {
- return randomScalingFactor();
});
+ window.myLine.update();
});
- 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());
- }
+ $('#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);
- });
+ window.myLine.addDataset(newDataset);
+ });
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- config.data.labels.push('dataset #' + config.data.labels.length);
+ $('#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);
+ for (var index = 0; index < config.data.datasets.length; ++index) {
+ window.myLine.addData(randomScalingFactor(), index);
+ }
}
- }
- });
+ });
- $('#removeDataset').click(function() {
- window.myLine.removeDataset(0);
- });
+ $('#removeDataset').click(function() {
+ window.myLine.removeDataset(0);
+ });
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
+ $('#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);
+ config.data.datasets.forEach(function(dataset, datasetIndex) {
+ window.myLine.removeData(datasetIndex, -1);
+ });
});
- });
</script>
</body>
</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;
- });
+ $.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);
+ 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'
- }
- }]
- }
- }
- });
- };
+ 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();
- });
+ $('#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>
type: "category",
// Specific to Bar Controller
- categoryPercentage: 0.75,
- barPercentage: 0.5,
+ categoryPercentage: 0.8,
+ barPercentage: 0.9,
// grid line settings
gridLines: {
// 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],
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);
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;
},
- 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 +
(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);
// 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) {
// 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),
},
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() {
this.beforeUpdate();
// Absorb the master measurements
- if (!this.isHorizontal()) {
- console.log(maxWidth);
- }
-
-
this.maxWidth = maxWidth;
this.maxHeight = maxHeight;
this.margins = margins;
//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));
this.paddingRight = this.options.ticks.fontSize / 2;
+ console.log(sinRotation * originalLabelWidth, this.maxHeight);
if (sinRotation * originalLabelWidth > this.maxHeight) {
// go back one step
this.labelRotation--;
}
this.labelRotation++;
- this.labelRotation = Math.max(this.labelRotation, this.options.ticks.minRotation);
this.labelWidth = cosRotation * originalLabelWidth;
}
// 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;
}
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)));
}
},
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;
// }
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;
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();
}
// 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);
}
-
- // 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
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
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;
-
- // 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);
+ // 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;
+ },
- 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);
projects / thirdparty / Chart.js.git / commitdiff
