7 Tage Inzidenz
Zeigt den aktuellen 7 Tages Inzidenz aus Deutschland an
Der hier verwendete Code
<html>
<head>
<style>
#tacho_svg circle {
stroke: #666;
stroke-width: 2em;
}
#tacho_svg .yellow {
stroke: #FF9F1E;
}
#tacho_svg .red {
stroke: red;
}
#tacho_svg .green {
stroke: green;
}
#tacho_svg {
border: 1px solid #555555;
}
body,
html {
width: 100%;
height: 100%;
margin: 0px auto;
background-color: #0a1a17;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
color: #ccc;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
#RPM {
font: bold 50px Verdana, Geneva, sans-serif;
}
#rpm_scale {
font: 24px Verdana, Geneva, sans-serif;
}
#rpm_text {
font: 24px Verdana, Geneva, sans-serif;
}
#rpm_hobbs {
font: 20px Verdana, Geneva, sans-serif;
}
#rpm_pointer {
stroke: white;
}
</style>
</head>
<body>
<h1 style="color:white">7-Tage-Inzidenz</h1>
<svg id="tacho_svg" viewBox="-250 -250 500 300" width="320" height="200">
<defs>
<style>
line {
stroke: white;
stroke-width: 3px;
}
text {
fill: white;
text-anchor: middle;
font-size: 22px;
font-family: sans-serif;
}
#id {
display: none;
}
rect {
fill: transparent;
}
</style>
</defs>
<circle id="red_arc" class="bar red" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>
<circle id = "yellow_arc" class="bar yellow" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>
<circle id="green_arc" class="bar green" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>
<g id="gauge" transform="rotate(-90)">
<g id="noon">
<rect x="-10" y="-220" width="20" height="100"/>
<line x1="0" y1="-190" x2="0" y2="-180"/>
<text x="0" y="-200"></text>
</g>
</g>
<text id="RPM" x="0" y="-40"></text>
<text id="rpm_scale" x="190" y="-210">200</text>
<text id="rpm_text" x="-190" y="-210">50</text>
<text id="rpm_hobbs" x="-180" y="40"></text>
<path id="rpm_pointer" d="M0 120 L0 175" stroke-width="6" transform="rotate(172 0 0)"/>
</svg>
<script>
async function getUpdate(){
const data = await fetch('https://api.corona-zahlen.org/germany')
const json = await data.json()
sieben=json.weekIncidence;
document.getElementById('RPM').innerHTML=sieben.toFixed(2);
if(sieben<=50){
var g=42,o=50,count=60;
}
if(sieben>50 && sieben<=150){
var g=16,o=50,count=160;
}
if(sieben>150 && sieben<=250){
var g=9.5,o=38.4,count=260;
}
if(sieben>250){
var g=5,o=20,count=500;
}
var pos=((180/count*sieben)+90);
document.getElementById('rpm_pointer').setAttribute('transform','rotate('+pos+' 0 0)');
green_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-g/100));
yellow_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-o/100));
for (i=0; i<=180; i = i + 12) {
var new_tick = noon.cloneNode(true);
new_tick.getElementsByTagName('text')[0].textContent = (i/180 *count).toFixed(0);
new_tick.removeAttribute("id");
new_tick.setAttribute("transform", "rotate(" + i + " 0 0)");
gauge.appendChild(new_tick);
}
}
function createDayNode(){
return function (obj) {
}
}
function compareDate(){
return function(a, b){
return a - b
}
}
getUpdate()
</script>