first commit

2024-11-08 15:31:00 +01:00
commit 0cfc5938bd
370 changed files with 143453 additions and 0 deletions
--- a/high/highcharts/examples/gauge-clock/index.htm
+++ b/high/highcharts/examples/gauge-clock/index.htm
@ -0,0 +1,206 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<title>Highcharts Example</title>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+		<style type="text/css">
+${demo.css}
+		</style>
+		<script type="text/javascript">
+$(function () {
+
+    /**
+     * Get the current time
+     */
+    function getNow() {
+        var now = new Date();
+
+        return {
+            hours: now.getHours() + now.getMinutes() / 60,
+            minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
+            seconds: now.getSeconds() * 12 / 60
+        };
+    }
+
+    /**
+     * Pad numbers
+     */
+    function pad(number, length) {
+        // Create an array of the remaining length + 1 and join it with 0's
+        return new Array((length || 2) + 1 - String(number).length).join(0) + number;
+    }
+
+    var now = getNow();
+
+    // Create the chart
+    $('#container').highcharts({
+
+        chart: {
+            type: 'gauge',
+            plotBackgroundColor: null,
+            plotBackgroundImage: null,
+            plotBorderWidth: 0,
+            plotShadow: false,
+            height: 200
+        },
+
+        credits: {
+            enabled: false
+        },
+
+        title: {
+            text: 'The Highcharts clock'
+        },
+
+        pane: {
+            background: [{
+                // default background
+            }, {
+                // reflex for supported browsers
+                backgroundColor: Highcharts.svg ? {
+                    radialGradient: {
+                        cx: 0.5,
+                        cy: -0.4,
+                        r: 1.9
+                    },
+                    stops: [
+                        [0.5, 'rgba(255, 255, 255, 0.2)'],
+                        [0.5, 'rgba(200, 200, 200, 0.2)']
+                    ]
+                } : null
+            }]
+        },
+
+        yAxis: {
+            labels: {
+                distance: -20
+            },
+            min: 0,
+            max: 12,
+            lineWidth: 0,
+            showFirstLabel: false,
+
+            minorTickInterval: 'auto',
+            minorTickWidth: 1,
+            minorTickLength: 5,
+            minorTickPosition: 'inside',
+            minorGridLineWidth: 0,
+            minorTickColor: '#666',
+
+            tickInterval: 1,
+            tickWidth: 2,
+            tickPosition: 'inside',
+            tickLength: 10,
+            tickColor: '#666',
+            title: {
+                text: 'Powered by<br/>Highcharts',
+                style: {
+                    color: '#BBB',
+                    fontWeight: 'normal',
+                    fontSize: '8px',
+                    lineHeight: '10px'
+                },
+                y: 10
+            }
+        },
+
+        tooltip: {
+            formatter: function () {
+                return this.series.chart.tooltipText;
+            }
+        },
+
+        series: [{
+            data: [{
+                id: 'hour',
+                y: now.hours,
+                dial: {
+                    radius: '60%',
+                    baseWidth: 4,
+                    baseLength: '95%',
+                    rearLength: 0
+                }
+            }, {
+                id: 'minute',
+                y: now.minutes,
+                dial: {
+                    baseLength: '95%',
+                    rearLength: 0
+                }
+            }, {
+                id: 'second',
+                y: now.seconds,
+                dial: {
+                    radius: '100%',
+                    baseWidth: 1,
+                    rearLength: '20%'
+                }
+            }],
+            animation: false,
+            dataLabels: {
+                enabled: false
+            }
+        }]
+    },
+
+        // Move
+        function (chart) {
+            setInterval(function () {
+
+                now = getNow();
+
+                if (chart.axes) { // not destroyed
+                    var hour = chart.get('hour'),
+                        minute = chart.get('minute'),
+                        second = chart.get('second'),
+                        // run animation unless we're wrapping around from 59 to 0
+                        animation = now.seconds === 0 ?
+                            false :
+                            {
+                                easing: 'easeOutBounce'
+                            };
+
+                    // Cache the tooltip text
+                    chart.tooltipText =
+                        pad(Math.floor(now.hours), 2) + ':' +
+                        pad(Math.floor(now.minutes * 5), 2) + ':' +
+                        pad(now.seconds * 5, 2);
+
+
+                    hour.update(now.hours, true, animation);
+                    minute.update(now.minutes, true, animation);
+                    second.update(now.seconds, true, animation);
+                }
+
+            }, 1000);
+
+        });
+});
+
+/**
+ * Easing function from https://github.com/danro/easing-js/blob/master/easing.js
+ */
+Math.easeOutBounce = function (pos) {
+    if ((pos) < (1 / 2.75)) {
+        return (7.5625 * pos * pos);
+    }
+    if (pos < (2 / 2.75)) {
+        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
+    }
+    if (pos < (2.5 / 2.75)) {
+        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
+    }
+    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
+};
+		</script>
+	</head>
+	<body>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/highcharts-more.js"></script>
+
+<div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div>
+
+	</body>
+</html>