first commit

2023-01-30 08:01:11 +01:00
commit dd253ca7e9
1663 changed files with 846601 additions and 0 deletions
--- a/chart/samples/scales/display-settings.html
+++ b/chart/samples/scales/display-settings.html
@ -0,0 +1,124 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Suggested Min/Max Settings</title>
+    <script src="../../Chart.bundle.js"></script>
+    <script src="../utils.js"></script>
+    <style>
+    canvas{
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    .chart-container {
+        width: 500px;
+        margin-left: 40px;
+        margin-right: 40px;
+        margin-bottom: 40px;
+    }
+    .container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    </style>
+</head>
+
+<body>
+    <div class="container"></div>
+    <script>
+        function createConfig(gridlines, title) {
+            return {
+                type: 'line',
+                data: {
+                    labels: ["January", "February", "March", "April", "May", "June", "July"],
+                    datasets: [{
+                        label: "My First dataset",
+                        backgroundColor: window.chartColors.red,
+                        borderColor: window.chartColors.red,
+                        data: [10, 30, 39, 20, 25, 34, 0],
+                        fill: false,
+                    }, {
+                        label: "My Second dataset",
+                        fill: false,
+                        backgroundColor: window.chartColors.blue,
+                        borderColor: window.chartColors.blue,
+                        data: [18, 33, 22, 19, 11, 39, 30],
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    title:{
+                        display: true,
+                        text: title
+                    },
+                    scales: {
+                        xAxes: [{
+                            gridLines: gridlines
+                        }],
+                        yAxes: [{
+                            gridLines: gridlines,
+                            ticks: {
+                                min: 0,
+                                max: 100,
+                                stepSize: 10
+                            }
+                        }]
+                    }
+                }
+            };
+        }
+
+        window.onload = function() {
+            var container = document.querySelector('.container');
+
+            [{
+                title: 'Display: true',
+                gridLines: {
+                    display: true
+                }
+            }, {
+                title: 'Display: false',
+                gridLines: {
+                    display: false
+                }
+            }, {
+                title: 'Display: false, no border',
+                gridLines: {
+                    display: false,
+                    drawBorder: false
+                }
+            }, {
+                title: 'DrawOnChartArea: false',
+                gridLines: {
+                    display: true,
+                    drawBorder: true,
+                    drawOnChartArea: false,
+                }
+            }, {
+                title: 'DrawTicks: false',
+                gridLines: {
+                    display: true,
+                    drawBorder: true,
+                    drawOnChartArea: true,
+                    drawTicks: false,
+                }
+            }].forEach(function(details) {
+                var div = document.createElement('div');
+                div.classList.add('chart-container');
+
+                var canvas = document.createElement('canvas');
+                div.appendChild(canvas);
+                container.appendChild(div);
+
+                var ctx = canvas.getContext('2d');
+                var config = createConfig(details.gridLines, details.title);
+                new Chart(ctx, config);
+            });
+        };
+    </script>
+</body>
+
+</html>