Showing marker on curve

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');"