Indsæt diagrammer på din Dynamicweb hjemmeside

Vi mennesker har generelt nemmere ved at forstå komplekse data, hvis disse data bliver visualiseret i form af eksempelvis diagrammer. De fleste mennesker kan hurtigere konkludere på baggrund af visualiseringer, end de kan på baggrund af komplicerede tabeller med data.

Men med de nuværende teknologier er det ofte svært at præsentere flotte diagrammer på en hjemmeside. Derfor ser man, at disse grafer  og diagrammer bliver gemt væk i et PDF-dokument, der først skal downloades til brugerens computer. Eller også er de indsat som gif-billeder på siden. Alternativt – og meget sjældent – bliver diagrammerne genereret ved hjælp af Flash, Silverlight eller andre proprietære teknologier. Og oftest ender man med at give op, og i stedet præsentere data i form af en tabel.

Generelt gør de nuværende teknologier det rigtig svært at lave grafer, som er tilgængelige for alle brugere. Uanset om man præsenterer grafer i form af et eksternt PDF-dokument, eller i form af eksempelvis Flash, så står man med et tilgængelighedsproblem. Mange mennesker vil undlade at downloade PDF-dokumentet og synshandicappede brugere, som anvender skærmlæsere, vil ikke kunne afkode Flash-scriptet. Derfor er disse teknikker i praksis ikke anvendelige på offentlige hjemmesider – som paradoksalt er de hjemmesider, der oftest har behov for at præsentere store mængder af data.

HTML5

Dette er noget, som kan løses ved hjælp af HTML5 og jQuery. (Læs mere om HTML5 her: http://da.wikipedia.org/wiki/HTML5). HTML5 indeholder et såkaldt canvas-element, som giver mulighed for dynamisk at generere bitmap grafik. Kombineret med JavaScript-biblioteket jQuery giver det mulighed for at generere diagrammer on-the-fly. Filament Group har udviklet et jQuery-plugin, som er i stand til at tage data fra en almindelig HTML-tabel, og skabe en graf ud fra disse data. (Læs mere om dette plugin her: http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/)

Dette er en rigtig smart teknik, fordi det giver mulighed for både at præsentere data i tabelform, og automatisk præsentere data ved hjælp af grafer. Teknikken giver flere fordele:

  1. Tilgængelighed
    Man sikrer tilgængeligheden – i forhold til overholdelse af W3C og WCAG AA – ved at data både eksisterer i form af en tabel og i form af grafik.
  2. Automatisering
    Redaktøren skal kun fokusere på at indsætte en simpel tabel indeholdende data. Teknikken vil derefter sørge for at konvertere data automatisk.
  3. Brugervenlighed
    Man gør hjemmesiden mere brugervenlig og tilgængelig overfor de brugere, som kan se og anvende grafen. Det bliver nemmere og hurtigere at overskue data.

Dynamicweb og grafer

Dynamicweb indeholder muligheden for at indsætte tabeller. Og efterhånden overholder disse tabeller også tilgængelighedskriterierne. Det gør det derfor muligt at indsætte tabeller, som rent faktisk validerer, og som derfor også er anvendelige på offentlige hjemmesider.

Vi har i Bleau udviklet et lille modul, som kan indsættes på et afsnit, og som kan konvertere data fra en tabel til en graf – naturligvis ved hjælp af ovenstående plugin.

Et eksempel på hvordan data fra tabeller kan konverteres til graferI ovenstående billede ses et screenshot af en simpel demo indeholdende en tabel med salgstal på forskellige varegrupper. Tabellen er lavet som et helt almindeligt Dynamicweb-afsnit, og ved hjælp af en simpel tabel.

Systemet sørger derefter for automatisk at generere en graf ud fra de data, der er tilgængelige i tabellen. Kolonne- og rækkeoverskrifter identificeres automatisk – hvilket dog naturligvis kræver, at disse er korrekt indsat i tabellen. Kolonne- og rækkeoverskrifter anvendes herefter til at generere de labels, der anvendes i grafen.

Hvis der er en overskrift på tabellen, så indsættes denne overskrift ligeledes som overskrift i grafen. Tabellen bibeholdes naturligvis på siden, så synshandicappede brugere stadig kan anvende siden.

Det skal understreges, at den tabel, som indsættes i afsnittet, skal være valid. Det betyder, at det er en rigtig dårlig ide at indsætte en tabel fra eksempelvis Word, da en sådan tabel indeholder en masse HTML-kode, som ikke er valid. Grafen vil ikke blive genereret eller vil komme til at se underlig ud.

Administration

Som sagt er modulet særdeles simpelt, og det eneste, vi gør er, at formidle data fra Dynamicweb til et jQuery-plugin. I modulet er der en lang række indstillinger, som man kan vælge at sætte – eller også kan man vælge at læne sig op af standardværdierne.

Afsnitsindstillinger Bleau Charts

Indstillingerne giver mulighed for at konfigurere en lang række parametre – eksempelvis højde og bredde – og de fleste af disse parametre har karakter af at være orienterede imod at styre udseendet af grafen. Bemærk også, at man kan vælge mellem fire forskellige typer af grafer:

  • Søjlediagram
  • Lagkagediagram
  • Linjediagram
  • Kurvediagram

Alle indstillinger kan overstyres ved hjælp af den medfølgende template-fil, og de medfølgende CSS-filer. Her kan man desuden udbygge funktionaliteten, hvis man har lyst til det.

Browsere

HTML5 Canvas-elementet er understøttet i alle moderne browsere. Det vil sige, at hvis du anvender seneste generation af Mozilla, Chrome, Opera, Safari og Internet Explorer, så kan din browser vise grafik ved hjælp af HTML5-teknologien. Anvender du en ældre version af Internet Explorer, så vil canvas-elementet ikke fungere. Da en hel del brugere – desværre – stadig anvender ældre versioner af Internet Explorer, så vil vi dermed stå med den udfordring, at disse brugere ikke vil kunne se grafen.

Men det er i virkeligheden ikke et problem. Den teknik, der anvendes til at skabe graferne med, tager selv hensyn til hvilken browser, der anvendes. Og anvendes der en ældre browser, så vises kun tabellen – og ingen graf. De brugere, som stadig render rundt i oldtiden, straffes dermed ved, at de ikke kan se den fantastiske nye verden. 🙂

Advertisements

3 thoughts on “Indsæt diagrammer på din Dynamicweb hjemmeside

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s