html och grafer

[Oltronix]

Jag har en applikation som samlar temperaturdata och presenterar ett antal grafer på en websida. Graferna är statiska. Websidan ser alltid lika dan ut. Ja ja förutom att mätvärdena ändrar sig. Jag har funderat på göra sidan mera dynamisk för att jämföra tex olika trender, men har inte gjort några försök ännu. Jag hittande följande: https://bing.com/covid Om man klickar på knappen "Compare" i delbilden "Compare in region" så får man upp ett antal grafer i en ny bild. Där kan man ta bort och lägga till grafer. Delvis vad jag tänkt göra. Så jag vill gärna kopiera.

Att leta i html/script-koden är ett hästjobb att hitta rätt och jag brukar bli väldigt frusterad, om jag försöker, innan jag hittar vad jag letar efter om jag någonsinn hittar något användbart.


1.Hur gör man?
Att skapa och ta bort grafer dynmaisk och kunna peka på dem och få mätdata.
2. Var lär man sig mer om grafer i html?

Det jag gjort är att söka på html och graph. Det bäst jag hittade var W3Schools, men det var ganska tunnt där.

[AndLi]

Jag kör https://www.chartjs.org/ för mina log grafer.
Har inte djupdykt i det hela med dynamiska grafer. Men allt grafritande sker i JavaScript på klienten så allt borde vara möjligt.

[Oltronix]

Chart.js fungerar. Det finns en hel del möjligheter, exempel och dokumention. Det går att lägga till och ta bort grafer bland annat. Det jag hade problem med var installationen. npm fungerade inte alls, kör linux, bower fungerade men klagade en hel del. Koden och bibliotek hamnade på något udda ställe.

Efter lite sökande kan jag notera att det finns en uppsjö av olika verktyg.
https://en.wikipedia.org/wiki/Compariso ... _libraries

[mounte]

Det finns många vägar att gå och det är svårt att ge ett enda svar.
Vill du koda allt själv så är javascript och canvas (eller svg) i riiiiktigt bra skick nu och ganska enkelt att hantera.
Du har redan fått tips på några js-bibliotek som löser troligen allt du behöver.
Vill flika in med ett förslag till: https://echarts.apache.org/
Ett mellanting mellan dessa om du har koll på din egen data och vill göra lite custom-grejjer är att använda d3.js

Slutligen så finns en del verktyg/tjänster t.ex.
https://www.datawrapper.de/
https://plotly.com/chart-studio/

Lycka till och visa gärna vad du kommer fram till i slutändan

[trycoon]

Om det enda din applikation gör är att visa upp grafer, så tjänar man på att använda nått färdigt istället för att försöka att utveckla det själv!
Installera "Grafana" på din dator/server/raspberry pi och sätt upp en enkel databas (t.ex. InfluxDB) som du kopplar denna till. Skriv om din applikation att spara mätvärden till InfluxDB och så är det klart. Det är faktiskt inte så svårt som det låter, och Grafana ger dig möjlighet att zooma, kolla på historiska värden, sätta upp larmnivåer, m.m.

https://play.grafana.org/d/000000012/gr ... me?orgId=1

[Oltronix]

Tack för tipsen. Det finns mycket att undersöka, olika verktyg. Jag snöade in på d3.js. Och har lagt ner ett antal timmar på d3 och javascript. (Borde skaffa en bok, men W3C https://www.w3schools.com/js/js_intro.asp är alltid ett bra ställe när förkunskaperna är låga.) Och har nått nån någon sort basnivå. Har även slagits med CORS. Jag har fått använda en RPI med webserver. Jag vill inte ha server på utvecklingskärran type Apache, som jag glömmer att stänga av. Försökte använda Tornado, men jag fick den inte att läsa min datafiler.

[anders_bzn]

Python och mathplot

[LarryXz]

https://www.highcharts.com/demo

[JimmyAndersson]

Larry:
Bra tips!
Verkar fungera lika bra i mobilen som datorn. Och det är inte vanligt, tyvärr.

Ett tips, måhända aningen galet, är att prova som jag gjorde: Använda javascript och små tabellceller som pixlar... och alltså göra diagram totalt manuellt.
Men det kräver nog att man är lite ...knäpp. Eller nyfiken. Vilket som går nog bra.
Det finns en tråd om det på forumet. (Om mitt diagram-script alltså. Tja, att jag är knäpp också iofs...)