Publicerad 29 november 2022

Diagram från CSV-fil

Riktlinjer och lathundar för att skapa diagram från en uppladdad CSV-fil.

Diagram där data hämtas från en uppladdad CSV-fil används när Koladas nyckeltal inte räcker till eller när du vill beskriva en ögonblicksbild av något. Fördelen med dessa diagram är att du fritt kan välja vilken data som ska visualiseras, nackdelen är att du måste ladda upp en ny CSV-fil när data behöver uppdateras.

Riktlinjer

Funktionen skapar automatiskt ett diagram på en webbsida utifrån data som finns i en så kallad CSV-fil, en textfil med kommaseparerade värden i en tabell. Värdena i tabellen avgränsas med semikolon. Du kan skapa CSV-filer från till exempel Excel genom att skapa tabellen där och sedan exportera i filformatet .csv.

När CSV-filen är klar laddas den upp till en särskild modul på webbsidan.

Diagramtyper

Det finns fyra diagramtyper som kan visas:

  • Linje
  • Stapel
    • Liggande/stående
    • Enkel eller staplad
  • Cirkel
  • Tabell

I samtliga fall är diagrammen interaktiva, det vill säga datapunkterna visas när besökaren för muspekaren över dem.

Tänk på

  • Du måste alltid beskriva vad diagrammet visar i brödtext i anslutning till diagrammet. Du behöver dock inte redovisa datapunkterna i diagrammet eftersom de visas när besökaren för muspekaren över dem.
  • Komplettera gärna diagrammet med en tabell där all data i diagrammet redovisas.
  • Diagrammen uppfyller de grundläggande kraven vad gäller tillgänglighet. Det innebär bland annat att besökaren kan navigera i diagrammet via tangentbordet och få datapunkterna upplästa av skärmläsare.
  • Diagrammen kräver att CSV-filen är korrekt formaterad, annars visas ingen data.
  • Utseendet på diagrammen går inte att påverka särskilt mycket. Behöver du visualisera data på ett mer komplext eller grafiskt avancerat sätt behöver du göra stillbilder av diagrammen.

Gör så här (kräver minst behörighet Webbredaktör

  1. Placera modulen Diagram från CSV-fil där du vill presentera diagrammet.
  2. Öppna modulens inställningar.
  3. Ladda upp den CSV-fil du vill använda.
  4. Gör övriga inställningar.

Nedan beskrivs alla inställningar du kan göra i modulen.

CSV-fil

Peka ut den CSV-fil som ska användas för diagrammet. Ladda upp den direkt till sidan, inte till SiteVisions filarkiv.

Observera att diagrammets rubrik automatiskt blir samma som namnet på filen!

Innehåller rubriker

Kryssa i om första raden i filen ska användas som rubriker i diagrammet.

Typ av diagram

Här väljer du diagramtyp. Valet påverkar vilka justeringar som går att göra i diagrammet.

Linjediagram

  • Visa punkter i linjen: Varje datapunkt i linjen markeras.

Cirkeldiagram

Inga ytterligare justeringar kan göras.

Stapeldiagram

  • Orientering: Välj mellan liggande och stående staplar.
  • Aktivera staplat diagram: Staplarna staplas på varandra när varje kategori har flera värden.

Tabell

  • Första raden innehåller rubriker: Alla värden i tabellens första rad markeras som rubriker.
  • Första cellen innehåller rubriker: Alla värden i tabellens första kolumn markeras som rubriker.

Diagrammets höjd

Ange värdet i procent (relaterat till diagrammets bredd) eller i pixlar (anges enligt formatet 000px). Anges enbart en siffra eller fel måttenhet tolkas det som procent. Om inget anges får diagrammet ett höjd/bredd-förhållande som är ungefär 16:9 (liggande format).

Procent är allmänt bättre än pixlar eftersom diagrammet då anpassas bättre när skärmens bredd ändras.

Beskrivningstext för skärmläsare

Behöver anges för att beskriva vad diagrammet visar. Om diagramtypen är Tabell kommer denna text att synas på sidan som tabellbeskrivning.

Dölj diagramrubriken

Diagrammet hämtar normalt sin rubrik från filnamnet på CSV-filen. Om du vill dölja rubriken och istället sätta en egen rubrik (via en vanlig textmodul) kryssar du i den här rutan.

Visa diagrammet samtidigt som resten av sidan laddas in

I normalfallet visas diagrammet först när besökaren har skrollat ner till det. Detta görs för att sidor med många diagram ska upplevas som snabbare eftersom man inte behöver vänta på att allt innehåll läses in innan sidan visas för besökaren. Vill du av någon anledning inte ha det här beteendet kryssar du i den här rutan.

Observera att i värsta fall kan det göra att besökaren måste vänta en stund innan hen kan börja läsa det som står på sidan. Rekommendationen är därför att inte kryssa i rutan.

Förstora bilden

Titel på X-axel

Den rubrik som ska visas för X-axeln (horisontella).

Titel på Y-axel

Den rubrik som ska visas för Y-axeln (lodräta).

Visa etiketter för datapunkter

Visar värdet på datapunkten direkt i diagrammet.

Skapa en CSV-fil

Det enklaste sättet att skapa en CSV-fil är att göra en tabell i Excel och sedan exportera tabellen som en fil i rätt format.

  1. Skapa dina tabelldata i Excel.
  2. Välj Spara som...
  3. Välj Filformat: CSV UTF-8 (kommaavgränsad) (.csv).
  4. Döp filen så att den går lätt att identifiera.
    • Använd bara a-z och bindestreck för filnamnet. Inga mellanslag.

Formatering av data i CSV-fil

För att diagrammet ska kunna visas korrekt behöver data i CSV-filen vara formaterat på ett särskilt sätt.

  • Data ska vara separerade med semikolon [ ; ].
    • 24;65;78 och så vidare.
  • Decimaler i värden föregås av kommatecken [ , ].
    • 4,5;6,2;8,4 och så vidare.
  • Text ska anges utan citattecken.
    • Doktor;Assistent;Sekreterare och så vidare.
  • Text ska använda svenska tecken.
    • Läkare; Skötare;Åkare och så vidare.
  • Filen ska sparas som UTF-8.

Tänk på

  • Cellerna i Excel-bladet måste ha antingen Allmänt, Text eller Nummer som format
  • Siffror får inte ha några prefix, men kan ha procenttecken som suffix.
  • Tabellen bör - men måste inte - ha rubrikrader/-celler.
  • CSV-filens namn används som diagramrubrik på webbsidan.

Bilderna nedan visar hur data i ett Excel-ark ser ut i en exporterad CSV-fil, och hur det sedan kan se ut på webbsidan.

Excel

Tabell i Excel

CSV-fil

Tabelldata i CSV-fil

Diagram på webbsidan

Diagram på webbsida