NemProgrammering.dk logo

Sådan laver du grafer og diagrammer på din hjemmeside med Google Charts

Ekspert indlæg
Grafer og diagrammer på hjemmeside
Thomas Iversen

  Skrevet af: Thomas Iversen     11-06-2018     Skrevet i: Design, HTML + HTML5, JavaScript

Grafer og diagrammer kan være en fantastisk måde at visualisere data på, så den bliver nemmere at forstå og drage konklusioner ud fra. Du kender det sikkert fra Excel, hvor der findes et hav af diagrammuligheder, og hvor du relativt nemt kan lave visuelle repræsentationer af store datamængder, så den hurtigt giver mere mening.

Når det kommer til at bruge sådanne diagrammer på en hjemmeside, går de fleste dog i stå og ender typisk med at lave lave det i Excel og derefter indsætte et billede af Excel-diagrammet på hjemmesiden. Men sådan behøver det ikke at være, og du kan sagtens, selvom du ikke er programmør, implementere interaktive diagrammer på din hjemmeside, helt uden brug af billeder.

Det vi skal kigge på i dette indlæg er Google Charts, som netop kan bruges til nemt at indsætte interaktive diagrammer på din hjemmeside. Jeg har selv brugt det på Forbrugerfinans.dk, hvor du f.eks. her på siden om forbrugslån kan se, hvordan Google Charts virkelig kan udnyttes på en hjemmeside. På Forbrugerfinans.dk har vi lavet en reel sammenligninside, som på en visuel måde viser helt konkret, hvilke forbrugslån der er billigst og ikke mindst dyrest på markedet. Da siden tager en meget visuel tilgang til sammenligningside-formatet, var det oplagt at bruge Google Charts.

Det skal siges, at der findes andre alternativer til Google Charts, men da Google Charts er gratis og dokumentationen er så godt, var det det vi valgte at bruge.

Masser af muligheder med Google Charts

Google Charts byder på en væld af muligheder for grafer, og du kan lave alle de gængse diagrammer, som du også finder i Excel. Nedenfor kan du se et udsnit af de graf-muligheder der findes med Google Charts. Det fede ved Google Charts er, at graferne er interaktive, så når du holder musen henover f.eks. en del af et cirkeldiagram, så kan man få mere information om netop det udsnit af cirkel diagrammet.

Eksempel diagrammer

Sådan kommer du i gang

Den nemmeste måde at komme i gang med Google Charts er at tage udgangs punkt i et af Google egne eksempler. Prøv derfor blot at søge på “Piechart Google shart”, for at finde Googles egen eksempelside med cirkeldiagrammer.

Det første du sandsynligvis vil se er et eksempel og noget kode ala det her:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Du behøver faktisk ikke forstå koden, det vigtigste du skal kigge på er der hvor der står “var data” og “var options”, som er herunder du udfylder data samt angiver, hvordan dit diagram skal se ud.

Følgende linje er også vigtig:

    <div id="piechart" style="width: 900px; height: 500px;"></div>

For det er den som bestemmer, hvor på din side diagrammet indsættes, forstået på den måde, at der hvor du indsætter dette stykke html, her vil dit diagram blive vist. Resten af koden skal indsætte i di head-element på siden.

Indsætter man ovenstående script på sin side får man følgende diagram. Lær mærke til, hvordan du kan føre musen hen over de forskellige stykker af cirkeldiagrammet og få mere information.


Tilpasning af diagram

Vi kan nu tilpasse vores diagram.

Først og fremmest vil jeg gerne ændre data i diagrammet, så det istedet viser, hvilke lande de besøgende kommer fra på en hjemmeside.

Derfor ændrer jeg “var data” til:

     var data = google.visualization.arrayToDataTable([
          ['Land', 'Antal besøgende'],
          ['Danmark', 200],
          ['Sverige', 30],
          ['Norge', 20],
          ['Finland',15],
          ['Andre', 4]
        ]);

Den første data-linje angiver, hvad det er for noget data, og de efterfølgende data-linjer er så din data.

Derudover så vil jeg gerne have at mit diagram skal være i 3D. Det kan vi ændre ved at ændre i “var options”, altså indstillingerne på vores diagram. Jeg vil desuden gerne have at baggrunden er grå (hex farve: #F5F5F5) lige som resten af denne side (den er som standard hvid). Jeg ændrer selvfølgelig også titlen på diagrammet til “Besøgende på website”

Den giver følgende rettelser til options:

 var options = {
          title: 'Besøgende på website'
          is3D: true,
          backgroundColor: '#F5F5F5',
        };

Der findes utallige andre tilpasninger du kan lave, og du kan endda sætte animation på, så diagrammet tegnes, når siden loades. Det er bare at søge efter de tilpasninger man vil lave, og så har Google sandsynligvis et kodeeksempel til det, som du bare kan kopiere og bruge i dine egne options.

Min fulde kode med ændringer ser nu således ud:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

     var data = google.visualization.arrayToDataTable([
          ['Land', 'Antal besøgende'],
          ['Danmark', 200],
          ['Sverige', 30],
          ['Norge', 20],
          ['Finland',15],
          ['Andre', 4]
        ]);

      var options = {
          title: 'Besøgende på website'
          is3D: true,
          backgroundColor: '#F5F5F5',
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Og det tilhørende diagram:

Jeg har nu med ganske få linjer kode og ændringer, som alle kan finde ud af at lave, implementeret et interaktivt diagram på min hjemmeside. Fremgangsmåden er den samme om du vælger et søjlediagram eller en graf. Prøv selv at eksperimentere med Google Charts – det er super sjovt når først man kommer i gang og oplever, hvor mange muligheder der findes, og hvor nemt det er at bruge!

Spørgsmål og kommentarer

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.