Sådan visualiser du data på din hjemmeside med interaktive diagrammer
Der findes ikke noget bedre end diagrammer og grafer, når det kommer til at skabe overblik over selv den mest komplekse data.
Når man tænker på diagrammer og grafer, tænker man ofte på Excel, men problemer er her, at hvis man vil bruge det på sin hjemmeside, så skal man tage et screenshot af diagrammet, gemme det, og indsætte det som billede.
Skulle der komme ændringer til dataen, skal man hen og taget et nyt screenshot og indsætte og uploade det igen. Denne måde at indsætte og bruge diagrammer og grafer på sin hjemmeside er meget besværligt, men heldigvis findes der gratis API´er, som du kvit og frit kan indsætte diagrammer på din hjemmeside med.
Her giver vi dig to af de mest kendte!
Google Charts
Google Charts har efterhånden eksisteret en del år, men det er først nu, at folk har fået øjnene op for, hvor smart det egentlig er.
Google Charts er et simpelt API, som du kan indsætte grafer og diagrammer på din hjemmeside med. Alt hvad du skal gøre er, at kopiere et mindre stykke JavaScript-kode ind på din side, og så danner API´et dit diagram. Du skal blot angive den data, der skal bruges, og så klarer Google resten!
Det smarte ved at gøre det på den her måde er, at du relativt nemt kan opdatere dataen bag diagrammet. Det betyder også, at du kan lave dynamiske diagrammer, hvor brugeren på din hjemmeside kan ændre i datagrundlaget og dermed ændre diagrammet live på din hjemmeside.
De fleste diagrammer i Google Charts kan desuden animeres, så de får en animeret visning, når de vises på din hjemmeside.
En anden lækker feature ved Google Charts er, at alle deres diagrammer er interaktive. Det betyder, at hvis du f.eks. laver et cirkeldiagram, så kan du klikke på de enkelte ”pies” og få mere information. Dine diagrammer er altså interaktive og ikke bare statiske billeder.
Det er super nemt at komme i gang med Google Charts, da folkene bag har gjort et kæmpe stykke dokumentationsarbejde, så det egentlig bare er et spørgsmål om at kopiere og indsætte kode.
På Forbrugerfinans.dk har de lavet en sammenligningsside, som er bygget op omkring visualiseringer med Google Charts. Du kan f.eks. se deres forbrugslån oversigtsside for at se, hvad der egentlig er muligt med Google Charts.
Og ja, Google Charts er selvfølgelig 100% gratis!
Charts.js
Charts.js er et glimrende alternativ til Google Charts, og det er også gratis.
Nogle ville faktisk mene at diagrammerne som du finder hos Chart.js er en del pænere end dem hos Google Charts, men det er nok bare en smagssag.
Charts.js har rigtig meget af den samme funktionalitet som Google Charts og alle deres diagrammer er også animerede. Dokumentationen hos Chart.js er ikke helt så omfattende som den du finder hos Google, men er du udvikler, så er det slet ikke så svært at finde ud af alligevel.
Nu om dage skal alt på hjemmesider også være responsive, og det er der selvfølgelig også taget højde for hos Chart.js, hvor alle diagrammer er responsive out of the box (det gælder selvfølgelig også Google Charts).
Tags |
Skrevet af IT-Artikler.dk
Webmasteren på IT-Artikler.dk har arbejdet inden for IT branchen i mange år. Siden blev oprettet som et fritidsprojekt, men blev meget hurtigt til mere end det, og tidskrævende. Jeg og teamet bag har altid interesseret os for IT, og kan godt lide at hjælpe andre.
