]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Update time combo sample (#6736)
authorJukka Kurkela <jukka.kurkela@gmail.com>
Wed, 13 Nov 2019 00:20:52 +0000 (02:20 +0200)
committerEvert Timberg <evert.timberg+github@gmail.com>
Wed, 13 Nov 2019 00:20:52 +0000 (19:20 -0500)
samples/scales/time/combo.html

index 7df09763a96d6c4b61fe4baca5dee87766207d6a..01c38c93a4759fd1794597f119ff04c1ba9c5a69 100644 (file)
        <button id="addData">Add Data</button>
        <button id="removeData">Remove Data</button>
        <script>
-               var timeFormat = 'MM/DD/YYYY HH:mm';
+               function newDate(days) {
+                       return moment().startOf('day').add(days, 'd').valueOf();
+               }
 
-               function newDateString(days) {
-                       return moment().add(days, 'd').format(timeFormat);
+               var labels = [];
+               var data1 = [];
+               var data2 = [];
+               var data3 = [];
+               for (var i = 0; i < 7; i++) {
+                       labels.push(newDate(i));
+                       data1.push(randomScalingFactor());
+                       data2.push(randomScalingFactor());
+                       data3.push(randomScalingFactor());
                }
 
                var color = Chart.helpers.color;
                var config = {
                        type: 'bar',
                        data: {
-                               labels: [
-                                       newDateString(0),
-                                       newDateString(1),
-                                       newDateString(2),
-                                       newDateString(3),
-                                       newDateString(4),
-                                       newDateString(5),
-                                       newDateString(6)
-                               ],
+                               labels: labels,
                                datasets: [{
                                        type: 'bar',
                                        label: 'Dataset 1',
                                        backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                                        borderColor: window.chartColors.red,
-                                       data: [
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor()
-                                       ],
+                                       data: data1,
                                }, {
                                        type: 'bar',
                                        label: 'Dataset 2',
                                        backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                                        borderColor: window.chartColors.blue,
-                                       data: [
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor()
-                                       ],
+                                       data: data2,
                                }, {
                                        type: 'line',
                                        label: 'Dataset 3',
                                        backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
                                        borderColor: window.chartColors.green,
                                        fill: false,
-                                       data: [
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor(),
-                                               randomScalingFactor()
-                                       ],
+                                       data: data3,
                                }]
                        },
                        options: {
@@ -99,9 +76,9 @@
                                        xAxes: [{
                                                type: 'time',
                                                display: true,
+                                               offset: true,
                                                time: {
-                                                       format: timeFormat,
-                                                       // round: 'day'
+                                                       unit: 'day'
                                                }
                                        }],
                                },
 
                document.getElementById('addData').addEventListener('click', function() {
                        if (config.data.datasets.length > 0) {
-                               config.data.labels.push(newDateString(config.data.labels.length));
+                               config.data.labels.push(newDate(config.data.labels.length));
 
                                for (var index = 0; index < config.data.datasets.length; ++index) {
                                        config.data.datasets[index].data.push(randomScalingFactor());