diagram options till Bootstrap/jQuery.

[sodjan]

Skulle vilja ha lite enkla diagramfunktioner på websidor. Kör Bootstrap.
Inga konstigheter, bara de vanliga diagramtyperna.

Jag har letat/Googlat ett tag efter "bootstrap charts free", "charts jquery"
och liknande, och får massor av "Top 10...","Best 20..." o.s.v träffar.
En jäkla djungel, if you ask me...

Någon som faktiskt testat och/eller använder något av de alternativ som finns?
jChartFX, charts.js, jqPlot är exempel på sådant som jag har "scannat" igenom,
men det är svårt att bedöma alla direkt...

[maDa]

Google Charts har jag lekt lite med, inte dumt alls.

https://developers.google.com/chart/int ... cs/gallery

[sodjan]

Jo, ett annat kvar är att det är helt "self contained", inga laddningar
av moduler från någon extern site. Jag kan för lite om just Google
Charts, det är inga kopplingar till Google som sådant? Den där
"loader.js" verkar i sig hämta mer externt innehåll...

EDIT: Nej, det går inte att köra offline från Google...
https://developers.google.com/chart/interactive/faq

[maDa]

Ah, nej de helt riktigt.

För offline-saker jag har använt Pygal, men det är ju bara användbart om man kör Python i backend.

[sodjan]

Ah, OK. Ja vi kör i och för sig också Python som "back-end",
men i detta är väl ett verktyg där grafiken "ritas" på server
sidan, så att säga. Det moderna sättet verkar vara att rita
grafiken direkt i klienten och servern hanterar enbart rådata.
Känns som att det blir mer skalbart också...

[Filip-w]

Humm, kan Flot vara något?
Enkelt att skapa grafer. följ länk för att se mitt exempel där jag loggade data från min krukväxt.

[f.petrini]

En av de absolut bästa diagramkomponenterna jag hittat är plotly.js. Vettigt API och dokumentation, hög prestanda, och enkel, ren presentation utan massa onödigt skräp som animeringar och bloatad grafik.

Den var tidigare en online tjänst men krävde att man laddade upp data till dem och designade diagrammet på deras site för att få en länk till diagrammet. I november 2015 öppnade de dock upp Javascript-biblioteket: https://github.com/plotly/plotly.js

Exempel finns här: https://plot.ly/javascript/#basic-charts

[daer]

Har använt mig av D3.
Problemet är att det består bara av simpla komponenter som man själv måste koppla ihop.
Fördelen är att det är mycket mera flexibelt vad som går att göra.
Rita egna symboler, egen typ av graf, hur zoomning skall fungera, var och hur många axlar etc.
Allt går att att fixa.

Nackdelen är som sagt att det är inte bara att stoppa in sin data till libbet och få ett diagram.
Måste till en del javascript kod för att få till något. Tröskeln är relativt stor.
Men när man väl är över den så är flexibiliteten överlägsen.

[sodjan]

Flot: Jo, absolut ett alternativ! Den där "Powered by Flot" texten,
är det något som Flot lägger till själv?

Plotly.js: Mja, lite annan modell med allt i JSON datat. Hm...

D3: Ja, som du säger, ganska mycket jobb för enkla diagram.

[Synesthesia]

Flot lägger inte till någon "Powered by Flot" text, den texten får man lägga till själv om man vill ha den

[Filip-w]

I mitt exempel läser man data från filen moisture.log och lägger den i en tvådimensionell array.
Man skapar sedan grafen med hjälp av Flot-biblioteket, med arrayen som indata.

Ja det stämmer Synesthesia, texten "Powered by flot" är något jag lade till själv.

Kod: Markera allt

<th colspan="2" align="right"><p>Powered by Flot</p></th>

[sodjan]

Ah, OK.
Det var några andra paket som la till "watermarks" tills man
köpte den kommersiella licensen...

[maDa]

Ah, OK. Ja vi kör i och för sig också Python som "back-end",
men i detta är väl ett verktyg där grafiken "ritas" på server
sidan, så att säga. Det moderna sättet verkar vara att rita
grafiken direkt i klienten och servern hanterar enbart rådata.
Känns som att det blir mer skalbart också...

Nja, PyGal outputar SVG normalt sätt, vilket renderas på klient. Sen kan den rendera som PNG också om man behöver.

[sodjan]

Jo, men det är fortfarande en stor skillnad mot att bara skicka rådata
så som det är som t.ex. JSON. För mig är SVG fortfarande "grafik"...