Chart.js

Hvis man gerne vil have tegnet en graf over noget data der er opsamlet, f.eks. fra en sensor, kan det være nyttigt at benytte et bibliotek af funktioner, som kan klare tegnearbejdet, så man ikke selv skal programmere det hele fra bunden.

Chart.js er et eksempel på sådan et bibliotek, der kan bruges til at få en graf frem på en hjemmeside.

Eksempel

I dette eksempel vises hvordan man kan indsætte en graf med to datasæt.

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="chart-demo.js"></script>

Først skal der laves et canvas element, som kan indeholde grafen. Dernæst skal chart.js bibilioteket loades, hvilket kan gøres på flere måder som beskrevet i denne guide.

Derefter skal grafen laves hvilket gøres ved hjælp af javascript.

I dette eksempel er opsætning af grafen lavet i filen chart-demo.js, som så er hentet ind i html siden som vist ovenfor.

Herunder ses indholdet af filen chart-demo.js

var ctx = document.getElementById("myChart").getContext("2d");

const xValues = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July"
];

// generate some random values to plot
const yValues = [];
for (let i = 0; i < xValues.length; i++) {
  yValues.push(Math.random() * 50);
}

var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: "line",

  // The data for our dataset
  data: {
    labels: xValues,
    datasets: [
      {
        label: "Random dataset",
        borderColor: "rgb(255, 99, 132)",
        data: yValues,
        fill: false
      },
      {
        label: "Fixed dataset",
        borderColor: "rgb(132, 99, 255)",
        data: [20, 5, 5, 2, 24, 13, 25],
        fill: false
      }
    ]
  },
});

Bemærk at den ene serie består af faste værdier, og den anden er en række tilfældigt generede tal.

Demo

Her ses resultatet af anstrengelserne. Hvis du geninlæser siden gennereres der ny tilfældige værdier for den ene serie.

Materiale