Start again

2026-03-20 17:32:01 +01:00 · 2020-10-04 17:14:00 +02:00
parent c0d3912413
commit 091f119048
4382 changed files with 1762543 additions and 9606 deletions
--- a/vendors/Chart.js/samples/scatter-multi-axis.html
+++ b/vendors/Chart.js/samples/scatter-multi-axis.html
@@ -0,0 +1,186 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Scatter Chart Multi Axis</title>
+    <script src="../dist/Chart.bundle.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
+</head>
+
+<body>
+    <div style="width:75%">
+        <div>
+            <canvas id="canvas"></canvas>
+        </div>
+    </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 scatterChartData = {
+        datasets: [{
+            label: "My First dataset",
+            xAxisID: "x-axis-1",
+            yAxisID: "y-axis-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(),
+			}]
+        }, {
+            label: "My Second dataset",
+            xAxisID: "x-axis-1",
+            yAxisID: "y-axis-2",
+            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;
+    });
+
+    window.onload = function() {
+        var ctx = document.getElementById("canvas").getContext("2d");
+        window.myScatter = Chart.Scatter(ctx, {
+        	data: scatterChartData,
+        	options: {
+	            responsive: true,
+	            hoverMode: 'single',
+            	title: {
+	                display: true,
+	                text: 'Chart.js Scatter Chart - Multi Axis'
+	            },
+	            scales: {
+	            	xAxes: [{
+	            		position: "bottom",
+	            		gridLines: {
+	            			zeroLineColor: "rgba(0,0,0,1)"
+	            		}
+	            	}],
+	            	yAxes: [{
+		                type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+		                display: true,
+		                position: "left",
+		                id: "y-axis-1",
+		            }, {
+		                type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
+		                display: true,
+		                position: "right",
+		                reverse: true,
+		                id: "y-axis-2",
+		        
+		                // grid line settings
+		                gridLines: {
+		                    drawOnChartArea: false, // only want the grid lines for one axis to show up
+		                },
+		            }],
+	            }
+	        }
+        });
+    };
+
+    $('#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>
+
+</html>