Fix bars when displayed on a time scale.
Updated sample files.
// Moment js for each of the units. Replaces `displayFormat`
// To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/
displayFormats: {
- 'millisecond': 'SSS [ms]',
- 'second': 'h:mm:ss a', // 11:20:01 AM
- 'minute': 'h:mm:ss a', // 11:20:01 AM
- 'hour': 'MMM D, hA', // Sept 4, 5PM
- 'day': 'll', // Sep 4 2015
- 'week': 'll', // Week 46, or maybe "[W]WW - YYYY" ?
- 'month': 'MMM YYYY', // Sept 2015
- 'quarter': '[Q]Q - YYYY', // Q3
- 'year': 'YYYY', // 2015
- },
+ 'millisecond': 'SSS [ms]',
+ 'second': 'h:mm:ss a', // 11:20:01 AM
+ 'minute': 'h:mm:ss a', // 11:20:01 AM
+ 'hour': 'MMM D, hA', // Sept 4, 5PM
+ 'day': 'll', // Sep 4 2015
+ 'week': 'll', // Week 46, or maybe "[W]WW - YYYY" ?
+ 'month': 'MMM YYYY', // Sept 2015
+ 'quarter': '[Q]Q - YYYY', // Q3
+ 'year': 'YYYY', // 2015
+ },
+ // Sets the display format used in tooltip generation
+ tooltipFormat: ''
},
}
```
<html>
<head>
- <title>Line Chart</title>
- <script src="../node_modules/moment/min/moment.min.js"></script>
- <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>
+ <title>Line Chart</title>
+ <script src="../../node_modules/moment/min/moment.min.js"></script>
+ <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: [{
- 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()]
- }, ]
- },
- options: {
- responsive: true,
- scales: {
- xAxes: [{
- type: "time",
- display: true,
- time: {
- format: 'MM/DD/YYYY HH:mm',
- // round: 'day'
- }
- }, ],
- yAxes: [{
- display: true
- }]
- },
- elements: {
- line: {
- tension: 0.3
- }
- },
- }
- };
-
- $.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());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- updateLegend();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- config.data.labels.push(
- myLine.scales['x-axis-0'].labelMoments[myLine.scales['x-axis-0'].labelMoments.length - 1].add(1, 'day')
- .format('MM/DD/YYYY')
- );
-
- for (var index = 0; index < config.data.datasets.length; ++index) {
- config.data.datasets[index].data.push(randomScalingFactor());
- }
-
- window.myLine.update();
- updateLegend();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- updateLegend();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- config.data.datasets[datasetIndex].data.pop();
- });
-
- window.myLine.update();
- updateLegend();
- });
- </script>
+ <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 timeFormat = 'MM/DD/YYYY HH:mm';
+
+ function randomScalingFactor() {
+ return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+ }
+
+ function randomColorFactor() {
+ return Math.round(Math.random() * 255);
+ }
+
+ function randomColor(opacity) {
+ return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
+ }
+
+ function newDateString(days) {
+ return moment().add(days, 'd').format(timeFormat);
+ }
+
+ var config = {
+ type: 'bar',
+ data: {
+ labels: [newDateString(0), newDateString(1), newDateString(2), newDateString(3), newDateString(4), newDateString(5), newDateString(6)],
+ 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()]
+ }, ]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ xAxes: [{
+ type: "time",
+ display: true,
+ time: {
+ format: timeFormat,
+ // round: 'day'
+ }
+ }],
+ },
+ }
+ };
+
+ $.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());
+ }
+
+ config.data.datasets.push(newDataset);
+ window.myLine.update();
+ updateLegend();
+ });
+
+ $('#addData').click(function() {
+ if (config.data.datasets.length > 0) {
+ config.data.labels.push(
+ myLine.scales['x-axis-0'].labelMoments[myLine.scales['x-axis-0'].labelMoments.length - 1].add(1, 'day')
+ .format('MM/DD/YYYY')
+ );
+
+ for (var index = 0; index < config.data.datasets.length; ++index) {
+ config.data.datasets[index].data.push(randomScalingFactor());
+ }
+
+ window.myLine.update();
+ updateLegend();
+ }
+ });
+
+ $('#removeDataset').click(function() {
+ config.data.datasets.splice(0, 1);
+ window.myLine.update();
+ updateLegend();
+ });
+
+ $('#removeData').click(function() {
+ config.data.labels.splice(-1, 1); // remove the label first
+
+ config.data.datasets.forEach(function(dataset, datasetIndex) {
+ config.data.datasets[datasetIndex].data.pop();
+ });
+
+ window.myLine.update();
+ updateLegend();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Time Scale Point Data</title>
- <script src="../node_modules/moment/min/moment.min.js"></script>
- <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>
+ <title>Time Scale Point Data</title>
+ <script src="../../node_modules/moment/min/moment.min.js"></script>
+ <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="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: 'line',
- data: {
- datasets: [{
- label: "Dataset with point data",
- data: [{
- x: "12/31/2014 06:00",
- y: randomScalingFactor()
- }, {
- x: "01/04/2015 13:00",
- y: randomScalingFactor()
- }, {
- x: "01/07/2015 01:15",
- y: randomScalingFactor()
- }, {
- x: "01/15/2015 01:15",
- y: randomScalingFactor()
- }],
- fill: false
- }]
- },
- options: {
- responsive: true,
- scales: {
- xAxes: [{
- type: "time",
- display: true,
- time: {
- format: 'MM/DD/YYYY HH:mm',
- // round: 'day'
- },
- scaleLabel: {
- display: true,
- labelString: 'Date'
- }
- }, ],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'value'
- }
- }]
- },
- elements: {
- line: {
- tension: 0.3
- }
- },
- }
- };
-
- $.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();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- var newTime = myLine.scales['x-axis-0'].labelMoments[0][myLine.scales['x-axis-0'].labelMoments[0].length - 1]
- .clone()
- .add(1, 'day')
- .format('MM/DD/YYYY HH:mm');
-
- for (var index = 0; index < config.data.datasets.length; ++index) {
- config.data.datasets[index].data.push({
- x: newTime,
- y: randomScalingFactor()
- });
- }
-
- window.myLine.update();
- updateLegend();
- }
- });
-
- $('#removeData').click(function() {
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- updateLegend();
- });
- </script>
+ <div style="width:100%;">
+ <canvas id="canvas" style="width:100%;height:100%"></canvas>
+ </div>
+ <br>
+ <br>
+ <button id="randomizeData">Randomize Data</button>
+ <button id="addData">Add Data</button>
+ <button id="removeData">Remove Data</button>
+ <div>
+ <h3>Legend</h3>
+ <div id="legendContainer">
+ </div>
+ </div>
+ <script>
+ function randomScalingFactor() {
+ return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+ }
+
+ function randomColorFactor() {
+ return Math.round(Math.random() * 255);
+ }
+
+ function randomColor(opacity) {
+ return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
+ }
+
+ function newDate(days) {
+ return moment().add(days, 'd').toDate();
+ }
+
+ function newDateString(days) {
+ return moment().add(days, 'd').format();
+ }
+
+ var config = {
+ type: 'line',
+ data: {
+ datasets: [{
+ label: "Dataset with string point data",
+ data: [{
+ x: newDateString(0),
+ y: randomScalingFactor()
+ }, {
+ x: newDateString(2),
+ y: randomScalingFactor()
+ }, {
+ x: newDateString(4),
+ y: randomScalingFactor()
+ }, {
+ x: newDateString(5),
+ y: randomScalingFactor()
+ }],
+ fill: false
+ }, {
+ label: "Dataset with date object point data",
+ data: [{
+ x: newDate(0),
+ y: randomScalingFactor()
+ }, {
+ x: newDate(2),
+ y: randomScalingFactor()
+ }, {
+ x: newDate(4),
+ y: randomScalingFactor()
+ }, {
+ x: newDate(5),
+ y: randomScalingFactor()
+ }],
+ fill: false
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ xAxes: [{
+ type: "time",
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'Date'
+ }
+ }, ],
+ yAxes: [{
+ display: true,
+ scaleLabel: {
+ display: true,
+ labelString: 'value'
+ }
+ }]
+ }
+ }
+ };
+
+ $.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;
+ });
+
+ 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) {
+ $.each(dataset.data, function(j, dataObj) {
+ dataObj.y = randomScalingFactor();
+ });
+ });
+
+ window.myLine.update();
+ updateLegend();
+ });
+
+ $('#addData').click(function() {
+ if (config.data.datasets.length > 0) {
+ var newTime = myLine.scales['x-axis-0'].labelMoments[0][myLine.scales['x-axis-0'].labelMoments[0].length - 1]
+ .clone()
+ .add(1, 'day')
+ .format('MM/DD/YYYY HH:mm');
+
+ for (var index = 0; index < config.data.datasets.length; ++index) {
+ config.data.datasets[index].data.push({
+ x: newTime,
+ y: randomScalingFactor()
+ });
+ }
+
+ window.myLine.update();
+ updateLegend();
+ }
+ });
+
+ $('#removeData').click(function() {
+ config.data.datasets.forEach(function(dataset, datasetIndex) {
+ dataset.data.pop();
+ });
+
+ window.myLine.update();
+ updateLegend();
+ });
+ </script>
</body>
</html>
<html>
<head>
- <title>Line Chart</title>
- <script src="../node_modules/moment/min/moment.min.js"></script>
- <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>
+ <title>Line Chart</title>
+ <script src="../../node_modules/moment/min/moment.min.js"></script>
+ <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: 'line',
- 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", "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: "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()],
- }, {
- label: "Dataset with point data",
- data: [{
- x: "12/31/2014 06:00",
- y: randomScalingFactor()
- }, {
- x: "01/04/2015 13:00",
- y: randomScalingFactor()
- }, {
- x: "01/07/2015 01:15",
- y: randomScalingFactor()
- }, {
- x: "01/15/2015 01:15",
- y: randomScalingFactor()
- }],
- fill: false
- }]
- },
- options: {
- responsive: true,
- scales: {
- xAxes: [{
- type: "time",
- display: true,
- time: {
- format: 'MM/DD/YYYY HH:mm',
- // round: 'day'
- },
- scaleLabel: {
- display: true,
- labelString: 'Date'
- }
- }, ],
- yAxes: [{
- display: true,
- scaleLabel: {
- display: true,
- labelString: 'value'
- }
- }]
- },
- elements: {
- line: {
- tension: 0.3
- }
- },
- }
- };
-
- $.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());
- }
-
- config.data.datasets.push(newDataset);
- window.myLine.update();
- updateLegend();
- });
-
- $('#addData').click(function() {
- if (config.data.datasets.length > 0) {
- config.data.labels.push(
- 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) {
- config.data.datasets[index].data.push(randomScalingFactor());
- }
-
- window.myLine.update();
- updateLegend();
- }
- });
-
- $('#removeDataset').click(function() {
- config.data.datasets.splice(0, 1);
- window.myLine.update();
- updateLegend();
- });
-
- $('#removeData').click(function() {
- config.data.labels.splice(-1, 1); // remove the label first
-
- config.data.datasets.forEach(function(dataset, datasetIndex) {
- dataset.data.pop();
- });
-
- window.myLine.update();
- updateLegend();
- });
- </script>
+ <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 timeFormat = 'MM/DD/YYYY HH:mm';
+
+ function randomScalingFactor() {
+ return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
+ }
+
+ function randomColorFactor() {
+ return Math.round(Math.random() * 255);
+ }
+
+ function randomColor(opacity) {
+ return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
+ }
+
+ function newDate(days) {
+ return moment().add(days, 'd').toDate();
+ }
+
+ function newDateString(days) {
+ return moment().add(days, 'd').format(timeFormat);
+ }
+
+ function newTimestamp(days) {
+ return moment().add(days, 'd').unix();
+ }
+
+ var config = {
+ type: 'line',
+ data: {
+ labels: [newDate(0), newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], // Date Objects
+ 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()],
+ }, {
+ label: "Dataset with point data",
+ data: [{
+ x: newDateString(0),
+ y: randomScalingFactor()
+ }, {
+ x: newDateString(5),
+ y: randomScalingFactor()
+ }, {
+ x: newDateString(7),
+ y: randomScalingFactor()
+ }, {
+ x: newDateString(15),
+ y: randomScalingFactor()
+ }],
+ fill: false
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ xAxes: [{
+ type: "time",
+ time: {
+ format: timeFormat,
+ // round: 'day'
+ tooltipFormat: 'll HH:mm'
+ },
+ scaleLabel: {
+ display: true,
+ labelString: 'Date'
+ }
+ }, ],
+ yAxes: [{
+ scaleLabel: {
+ display: true,
+ labelString: 'value'
+ }
+ }]
+ },
+ }
+ };
+
+ $.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) {
+ $.each(dataset.data, function(j, dataObj) {
+ if (typeof dataObj === 'object') {
+ dataObj.y = randomScalingFactor();
+ } else {
+ dataset.data[j] = 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());
+ }
+
+ config.data.datasets.push(newDataset);
+ window.myLine.update();
+ updateLegend();
+ });
+
+ $('#addData').click(function() {
+ if (config.data.datasets.length > 0) {
+ config.data.labels.push(newDate(config.data.labels.length));
+
+ for (var index = 0; index < config.data.datasets.length; ++index) {
+ if (typeof config.data.datasets[index].data[0] === "object") {
+ config.data.datasets[index].data.push({
+ x: newDate(config.data.datasets[index].data.length),
+ y: randomScalingFactor(),
+ })
+ } else {
+ config.data.datasets[index].data.push(randomScalingFactor());
+ }
+ }
+
+ window.myLine.update();
+ updateLegend();
+ }
+ });
+
+ $('#removeDataset').click(function() {
+ config.data.datasets.splice(0, 1);
+ window.myLine.update();
+ updateLegend();
+ });
+
+ $('#removeData').click(function() {
+ config.data.labels.splice(-1, 1); // remove the label first
+
+ config.data.datasets.forEach(function(dataset, datasetIndex) {
+ dataset.data.pop();
+ });
+
+ window.myLine.update();
+ updateLegend();
+ });
+ </script>
</body>
</html>
var datasetCount = this.getBarCount();
var tickWidth = (function() {
- var min = xScale.getPixelForValue(null, 1) - xScale.getPixelForValue(null, 0);
+ var min = xScale.getPixelForTick(1) - xScale.getPixelForTick(0);
for (var i = 2; i < this.getDataset().data.length; i++) {
- min = Math.min(xScale.getPixelForValue(null, i) - xScale.getPixelForValue(null, i - 1), min);
+ min = Math.min(xScale.getPixelForTick(i) - xScale.getPixelForTick(i - 1), min);
}
return min;
}).call(this);
var barIndex = this.getBarIndex(datasetIndex);
var ruler = this.getRuler();
- var leftTick = xScale.getPixelForValue(null, index, barIndex, this.chart.isCombo);
+ var leftTick = xScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo);
leftTick -= this.chart.isCombo ? (ruler.tickWidth / 2) : 0;
if (xScale.options.stacked) {
}
// If it is in fact an object, dive in one more level
if (typeof(rawValue) === "object") {
- return getRightValue(this.isHorizontal() ? rawValue.x : rawValue.y);
+ if (rawValue instanceof Date) {
+ return rawValue;
+ } else {
+ return getRightValue(this.isHorizontal() ? rawValue.x : rawValue.y);
+ }
}
// Value is good, return it
if (helpers.isArray(unitDefinition.steps) && Math.ceil(this.tickRange / labelCapacity) < helpers.max(unitDefinition.steps)) {
// Use one of the prefedined steps
- for (var idx = 1; idx < unitDefinition.steps.length; ++idx) {
+ for (var idx = 0; idx < unitDefinition.steps.length; ++idx) {
if (unitDefinition.steps[idx] > Math.ceil(this.tickRange / labelCapacity)) {
- this.unitScale = unitDefinition.steps[idx - 1];
+ this.unitScale = unitDefinition.steps[idx];
break;
}
}
label = this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]);
}
+ // Format nicely
+ if (this.options.time.tooltipFormat) {
+ label = this.parseTime(label).format(this.options.time.tooltipFormat);
+ }
+
return label;
},
convertTicksToLabels: function() {
this.ticks = this.ticks.map(function(tick, index, ticks) {
- var formattedTick = tick.format(this.options.time.displayFormat ? this.options.time.displayFormat : this.options.time.displayFormats[this.tickUnit]);
+ var formattedTick = tick.format(this.displayFormat);
if (this.options.ticks.userCallback) {
return this.options.ticks.userCallback(formattedTick, index, ticks);
return this.left + Math.round(valueOffset);
} else {
- //return this.top + (decimal * (this.height / this.ticks.length));
var innerHeight = this.height - (this.paddingTop + this.paddingBottom);
var valueHeight = innerHeight / Math.max(this.ticks.length - 1, 1);
var heightOffset = (innerHeight * decimal) + this.paddingTop;
scale.update(400, 50);
// Counts down because the lines are drawn top to bottom
- expect(scale.ticks).toEqual(['Jan 1, 2015', 'Jan 2, 2015', 'Jan 3, 2015', 'Jan 4, 2015', 'Jan 5, 2015', 'Jan 6, 2015', 'Jan 7, 2015', 'Jan 8, 2015', 'Jan 9, 2015', 'Jan 10, 2015', 'Jan 11, 2015']);
+ expect(scale.ticks).toEqual(['Jan 1, 2015', 'Jan 3, 2015', 'Jan 5, 2015', 'Jan 7, 2015', 'Jan 9, 2015', 'Jan 11, 2015']);
+ });
+
+ it('should build ticks using date objects', function() {
+ // Helper to build date objects
+ function newDateFromRef(days) {
+ return moment('01/01/2015 12:00', 'DD/MM/YYYY HH:mm').add(days, 'd').toDate();
+ }
+
+ var scaleID = 'myScale';
+ var mockData = {
+ labels: [newDateFromRef(0), newDateFromRef(1), newDateFromRef(2), newDateFromRef(4), newDateFromRef(6), newDateFromRef(7), newDateFromRef(9)], // days
+ };
+
+ var mockContext = window.createMockContext();
+ var Constructor = Chart.scaleService.getScaleConstructor('time');
+ var scale = new Constructor({
+ ctx: mockContext,
+ options: Chart.scaleService.getScaleDefaults('time'), // use default config for scale
+ chart: {
+ data: mockData
+ },
+ id: scaleID
+ });
+
+ scale.update(400, 50);
+
+ // Counts down because the lines are drawn top to bottom
+ expect(scale.ticks).toEqual(['Jan 1, 2015', 'Jan 3, 2015', 'Jan 5, 2015', 'Jan 7, 2015', 'Jan 9, 2015', 'Jan 11, 2015', 'Jan 13, 2015']);
});
it('should build ticks using the config unit', function() {
projects / thirdparty / Chart.js.git / commitdiff
