diff --git a/ampel-firmware/web_server.cpp b/ampel-firmware/web_server.cpp index 1258c0808a63bee2dc89bf28fc65a4a250151ebb..e84037b960403b1f434b265d947e3fb6b4dd80c6 100644 --- a/ampel-firmware/web_server.cpp +++ b/ampel-firmware/web_server.cpp @@ -130,10 +130,12 @@ namespace web_server { ".then(addLog)" ".then(_=>Plotly.newPlot('graph',data,layout,{displaylogo:false}))" ".catch(console.error);" - "xs=[];" - "data=[{x:xs,y:[],type:'scatter',name:'CO<sub>2</sub>',line:{color:'#2ca02c'}}," - "{x:xs,y:[],type:'scatter',name:'Temperature',yaxis:'y2',line:{color:'#ff7f0e',dash:'dot'}}," - "{x:xs,y:[],type:'scatter',name:'Humidity',yaxis:'y3',line:{color:'#1f77b4',dash:'dot'}}];" + "xs=[];y1=[];y2=[];y3=[];" + "m='lines+markers';" + "s={symbol:123};" // diamond-tall-open from https://plotly.com/python/marker-style/ + "data=[{x:xs,y:y1,type:'scatter',name:'CO<sub>2</sub>',line:{color:'#2ca02c'},mode:m,marker:s}," + "{x:xs,y:y2,type:'scatter',name:'Temperature',yaxis:'y2',line:{color:'#ff7f0e',dash:'dot'},mode:m,marker:s}," + "{x:xs,y:y3,type:'scatter',name:'Humidity',yaxis:'y3',line:{color:'#1f77b4',dash:'dot'},mode:m,marker:s}];" "layout={height:600,title:'%s',legend:{xanchor:'right',x:0.2,y:1.0}," "xaxis:{domain:[0.0,0.85]},yaxis:{ticksuffix:'ppm',range:[0,2000],dtick:200}," "yaxis2:{overlaying:'y',side:'right',ticksuffix:'°C',position:0.9,anchor:'free',range:[0,30],dtick:3}," @@ -150,9 +152,9 @@ namespace web_server { //Don't display points without time "if (!fs[0].includes('1970-')){" "xs.push(fs[0]);" - "data[0]['y'].push(fs[1]);" - "data[1]['y'].push(fs[2]);" - "data[2]['y'].push(fs[3]);" + "y1.push(fs[1]);" + "y2.push(fs[2]);" + "y3.push(fs[3]);" "};" "if(i>4 && i<n-12){if(i==5){fs=['...','...','...','...']}else{return;}}" "r=document.createElement('tr');"