Sida 1 av 1
diagram options till Bootstrap/jQuery.
Postat: 2 april 2016, 12:39:51
av 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...
Re: diagram options till Bootstrap/jQuery.
Postat: 2 april 2016, 15:35:50
av maDa
Re: diagram options till Bootstrap/jQuery.
Postat: 2 april 2016, 15:39:41
av 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
Re: diagram options till Bootstrap/jQuery.
Postat: 2 april 2016, 15:53:05
av 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.
Re: diagram options till Bootstrap/jQuery.
Postat: 2 april 2016, 16:08:13
av 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å...
Re: diagram options till Bootstrap/jQuery.
Postat: 2 april 2016, 17:01:59
av 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.
Re: diagram options till Bootstrap/jQuery.
Postat: 2 april 2016, 18:19:42
av 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
Re: diagram options till Bootstrap/jQuery.
Postat: 2 april 2016, 19:50:15
av 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.
Re: diagram options till Bootstrap/jQuery.
Postat: 3 april 2016, 00:17:53
av 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.

Re: diagram options till Bootstrap/jQuery.
Postat: 3 april 2016, 00:27:45
av 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

Re: diagram options till Bootstrap/jQuery.
Postat: 3 april 2016, 08:53:26
av 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>
Re: diagram options till Bootstrap/jQuery.
Postat: 3 april 2016, 12:25:00
av sodjan
Ah, OK.
Det var några andra paket som la till "watermarks" tills man
köpte den kommersiella licensen...

Re: diagram options till Bootstrap/jQuery.
Postat: 3 april 2016, 13:09:11
av maDa
sodjan skrev: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.
Re: diagram options till Bootstrap/jQuery.
Postat: 3 april 2016, 13:12:23
av 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"...
