Zeigt die aktuelle Inzidenz an
Code
<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 .blue {
stroke: violet;
}
#tacho_svg .pink {
stroke: blue;
}
#tacho_svg .dark {
stroke: darkblue;
}
#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>
<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="dark_arc" class="bar dark" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>
<circle id="pink_arc" class="bar pink" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>
<circle id="blue_arc" class="bar blue" r="180" cx="0" cy="0" fill="transparent" stroke-dasharray="1130.97" stroke-dashoffset="565.49" transform="rotate(180 0 0)"></circle>
<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">0</text>
<text id="rpm_text" x="-190" y="-210">0</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);
//sieben=1100;
var green=false;
var orange=false;
var red=false;
var blue=false;
var pink=false;
var end=12;
var d=0;
var z=0;
if(sieben<=50){
var g=42,o=50,r=0, b=0, p=0, count=60;
green='true';
orange='true';
red='true';
var s=0;
z=60;
}
if(sieben>50 && sieben<=150){
var g=16,o=32,r=50, b=0, p=0,count=160;
green=true;
orange=true;
red=true;
var s=0;
}
if(sieben>150 && sieben<=250){
var g=10,o=20,r=238, b=50, p=0,count=260;
var s=0;
end=22;
z=260;
}
if(sieben>250 && sieben<=500){
var g=5,o=9,r=15, b=42, p=50,count=600;
var s=10;
end=20;
z=600;
}
if(sieben>500 && sieben<=1000){
var g=2,o=5,r=9, b=23, p=52,count=1100;
var s=9;
end=20;
z=1100;
}
if(sieben>1000 && sieben<=2000){
var g=1,o=3,r=6, b=9, p=13,count=2100;
d=24;
var s=9;
end=20;
z=2100;
}
var pos=((180/count*sieben)+90);
document.getElementById('rpm_scale').innerHTML=z;
document.getElementById('rpm_pointer').setAttribute('transform','rotate('+pos+' 0 0)');
//if(green=='true'){
green_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-g/100));
//}
//if(yellow=='true'){
yellow_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-o/100));
//}
//if(red=='true'){
red_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-r/100));
// }
//if(blue=='true'){
blue_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-b/100));
// }
// if(pink=='true'){
pink_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-p/100));
// }
pink_arc.setAttribute("stroke-dashoffset", 2*180*3.141529*(1-d/100));
for (i=s; i<=180; i = i + end) {
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>