initial commit

2021-07-10 16:25:16 +02:00
parent bff57cbf45
commit 20fb7267a8
2426 changed files with 792090 additions and 0 deletions
@@ -0,0 +1,177 @@
+<!DOCTYPE HTML>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Highcharts Example</title>
+
+		<style type="text/css">
+#container1 {
+    max-width: 800px;
+    height: 115px;
+    margin: 1em auto;
+}
+#container2, #container3 {
+    max-width: 800px;
+    height: 85px;
+    margin: 1em auto;
+}
+.hc-cat-title {
+  font-size: 13px;
+  font-weight: bold;
+}
+		</style>
+	</head>
+	<body>
+<script src="../../code/highcharts.js"></script>
+<script src="../../code/modules/bullet.js"></script>
+<div id="container1"></div>
+<div id="container2"></div>
+<div id="container3"></div>
+
+
+		<script type="text/javascript">
+Highcharts.setOptions({
+    chart: {
+        inverted: true,
+        marginLeft: 135,
+        type: 'bullet'
+    },
+    title: {
+        text: null
+    },
+    legend: {
+        enabled: false
+    },
+    yAxis: {
+        gridLineWidth: 0
+    },
+    plotOptions: {
+        series: {
+            pointPadding: 0.25,
+            borderWidth: 0,
+            color: '#000',
+            targetOptions: {
+                width: '200%'
+            }
+        }
+    },
+    credits: {
+        enabled: false
+    },
+    exporting: {
+        enabled: false
+    }
+});
+
+Highcharts.chart('container1', {
+    chart: {
+        marginTop: 40
+    },
+    title: {
+        text: '2017 YTD'
+    },
+    xAxis: {
+        categories: ['<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)']
+    },
+    yAxis: {
+        plotBands: [{
+            from: 0,
+            to: 150,
+            color: '#666'
+        }, {
+            from: 150,
+            to: 225,
+            color: '#999'
+        }, {
+            from: 225,
+            to: 9e9,
+            color: '#bbb'
+        }],
+        title: null
+    },
+    series: [{
+        data: [{
+            y: 275,
+            target: 250
+        }]
+    }],
+    tooltip: {
+        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
+    }
+});
+
+Highcharts.chart('container2', {
+    xAxis: {
+        categories: ['<span class="hc-cat-title">Profit</span><br/>%']
+    },
+    yAxis: {
+        plotBands: [{
+            from: 0,
+            to: 20,
+            color: '#666'
+        }, {
+            from: 20,
+            to: 25,
+            color: '#999'
+        }, {
+            from: 25,
+            to: 100,
+            color: '#bbb'
+        }],
+        labels: {
+            format: '{value}%'
+        },
+        title: null
+    },
+    series: [{
+        data: [{
+            y: 22,
+            target: 27
+        }]
+    }],
+    tooltip: {
+        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
+    }
+});
+
+
+Highcharts.chart('container3', {
+    xAxis: {
+        categories: ['<span class="hc-cat-title">New Customers</span><br/>Count']
+    },
+    yAxis: {
+        plotBands: [{
+            from: 0,
+            to: 1400,
+            color: '#666'
+        }, {
+            from: 1400,
+            to: 2000,
+            color: '#999'
+        }, {
+            from: 2000,
+            to: 9e9,
+            color: '#bbb'
+        }],
+        labels: {
+            format: '{value}'
+        },
+        title: null
+    },
+    series: [{
+        data: [{
+            y: 1650,
+            target: 2100
+        }]
+    }],
+    tooltip: {
+        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
+    },
+    credits: {
+        enabled: true
+    }
+});
+		</script>
+	</body>
+</html>