# Grafieken aanmaken met Apps Script

[[TOC]]

## Grafieken in Apps Script

Apps Script biedt een volledige API voor het aanmaken en beheren van grafieken in Google Sheets. Via de `EmbeddedChartBuilder` configureer je het grafiektype, de databereiken, titels, kleuren en positie. Je start altijd met `blad.newChart()`, kettingt de instellingen aaneen en sluit af met `build()`.

```javascript
function maakLijngrafiek() {
  const blad = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  const grafiek = blad.newChart()
    .setChartType(Charts.ChartType.LINE)
    .addRange(blad.getRange('A1:B20'))
    .setPosition(5, 5, 0, 0)
    .setOption('title', 'Omzet per maand')
    .setOption('hAxis.title', 'Maand')
    .setOption('vAxis.title', 'Omzet (EUR)')
    .setOption('width', 600)
    .setOption('height', 400)
    .build();

  blad.insertChart(grafiek);
}
```

De eerste rij van je bereik wordt standaard als kopregel gebruikt: kolom A levert de labels, de overige kolommen de meetwaarden.

## Staaf- en taartgrafieken

```javascript
function maakStaafgrafiek() {
  const blad = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  const grafiek = blad.newChart()
    .setChartType(Charts.ChartType.BAR)
    .addRange(blad.getRange('A1:C10'))
    .setPosition(20, 1, 0, 0)
    .setOption('title', 'Scores per afdeling')
    .setOption('isStacked', true)
    .setOption('colors', ['#1A73E8', '#34A853', '#FBBC04'])
    .setOption('legend.position', 'bottom')
    .build();

  blad.insertChart(grafiek);
}

function maakTaartgrafiek() {
  const blad = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  const grafiek = blad.newChart()
    .setChartType(Charts.ChartType.PIE)
    .addRange(blad.getRange('A1:B5'))
    .setPosition(2, 8, 0, 0)
    .setOption('title', 'Marktverdeling')
    .setOption('pieHole', 0.4)
    .setOption('width', 500)
    .setOption('height', 400)
    .build();

  blad.insertChart(grafiek);
}
```

De optie `pieHole` met een waarde tussen 0 en 1 maakt van een taartgrafiek een donutgrafiek.

:::info title="Beschikbare grafiektypen"
Via `Charts.ChartType` kies je onder andere uit `LINE`, `BAR`, `COLUMN`, `PIE`, `SCATTER`, `AREA`, `COMBO`, `HISTOGRAM`, `TABLE` en `GEO`. Raadpleeg de Apps Script-referentie voor het volledige overzicht en de bijbehorende opties.
:::

## Bestaande grafieken bijwerken

Een bestaande grafiek pas je aan met `modify()`, dat een nieuwe builder teruggeeft. De wijziging is pas definitief na `updateChart()`.

```javascript
function wijzigGrafiek() {
  const blad = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const grafieken = blad.getCharts();

  if (grafieken.length === 0) {
    Logger.log('Geen grafieken gevonden');
    return;
  }

  const builder = grafieken[0].modify()
    .setOption('title', 'Bijgewerkte titel')
    .clearRanges()
    .addRange(blad.getRange('A1:B30'));

  blad.updateChart(builder.build());
}
```

:::warn title="clearRanges() reset opties niet altijd zoals verwacht"
Na `clearRanges()` kan de grafiek zijn vormgeving deels verliezen. Stel alle relevante opties (titel, kleuren, assen) opnieuw in op de builder voordat je `build()` aanroept, zodat het resultaat voorspelbaar blijft.
:::

## Grafieken verwijderen

```javascript
function verwijderAlleGrafieken() {
  const blad = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const grafieken = blad.getCharts();
  grafieken.forEach(g => blad.removeChart(g));
  Logger.log(`${grafieken.length} grafieken verwijderd`);
}
```

## Grafiek als afbeelding exporteren

Met `getAs('image/png')` zet je een grafiek om in een blob. Die kun je opslaan in Drive of als bijlage versturen.

```javascript
function exporteerGrafiekAlsAfbeelding() {
  const blad = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const grafieken = blad.getCharts();

  if (grafieken.length === 0) return;

  const grafiek = grafieken[0];
  const blob = grafiek.getAs('image/png');
  blob.setName('grafiek.png');

  DriveApp.getFolderById('MAP_ID').createFile(blob);

  GmailApp.sendEmail('manager@bedrijf.nl', 'Grafiek bijgevoegd', 'Zie bijlage', {
    attachments: [blob],
  });
}
```

:::tip title="Insluiten in een Google Doc"
Een grafiek kun je niet rechtstreeks in een Doc plaatsen, maar de PNG-blob wel. Voeg die toe met `DocumentApp.getActiveDocument().getBody().appendImage(blob)`. Zo bouw je rapporten die de Sheets-data visueel overnemen.
:::

## Dynamische dashboard-grafieken

Bij een dashboard wil je de grafieken telkens opnieuw opbouwen op basis van de actuele data. Verwijder eerst de oude grafieken en bepaal het bereik op basis van `getLastRow()`.

```javascript
function vernieuwDashboard() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const dataBlad = ss.getSheetByName('Data');
  const dashBlad = ss.getSheetByName('Dashboard');

  dashBlad.getCharts().forEach(g => dashBlad.removeChart(g));

  const aantalRijen = dataBlad.getLastRow();

  const omzetGrafiek = dashBlad.newChart()
    .setChartType(Charts.ChartType.COLUMN)
    .addRange(dataBlad.getRange(1, 1, aantalRijen, 2))
    .setPosition(1, 1, 0, 0)
    .setOption('title', `Omzet (${aantalRijen - 1} maanden)`)
    .setOption('width', 800)
    .setOption('height', 300)
    .build();

  dashBlad.insertChart(omzetGrafiek);
}
```

## Wekelijks een rapportagegrafiek mailen

:::howto title="Wekelijks rapportage-grafiek mailen"
1. Maak een time-based wekelijkse trigger via **Triggers** in de Apps Script-editor.
2. Lees de actuele data uit het juiste blad met `getRange()` of `getDataRange()`.
3. Verwijder de bestaande grafieken op het dashboard-blad met `getCharts()` en `removeChart()`.
4. Maak een nieuwe grafiek aan met de bijgewerkte data en `insertChart()`.
5. Exporteer de grafiek als PNG met `grafiek.getAs('image/png')`.
6. Stuur de PNG als bijlage in een e-mail met `GmailApp.sendEmail()`.
:::

:::faq
### Hoe stel ik de grafiekpositie nauwkeurig in?
`setPosition(rij, kolom, offsetX, offsetY)` plaatst de grafiek relatief aan een cel. De eerste twee waarden zijn de anker-rij en anker-kolom (1-gebaseerd), de laatste twee zijn de horizontale en verticale verschuiving in pixels.

### Kan ik een grafiek rechtstreeks in een Google Doc insluiten?
Niet rechtstreeks. Exporteer de grafiek als PNG-blob met `getAs('image/png')` en voeg die toe via `DocumentApp.getActiveDocument().getBody().appendImage(blob)`.

### Hoe maak ik een spreidingsgrafiek met twee datakolommen?
Gebruik `Charts.ChartType.SCATTER` met een bereik waarin kolom A de X-waarden bevat en kolom B de Y-waarden. Apps Script koppelt de eerste kolom aan de horizontale as.

### Waarom ziet mijn grafiek er anders uit na een update?
Bij `clearRanges()` kan een deel van de vormgeving terugvallen op de standaard. Stel titel, kleuren en assen opnieuw in op de builder voordat je `build()` en `updateChart()` aanroept.

### Waarom verschijnt mijn grafiek niet in de spreadsheet?
Controleer of je `build()` aanroept en het resultaat doorgeeft aan `insertChart()`. Een builder zonder `build()` plaatst niets, en `updateChart()` werkt alleen op een grafiek die al bestaat.

### Hoe verander ik de kleuren van de reeksen?
Geef een lijst met hexkleuren mee via `setOption('colors', ['#1A73E8', '#34A853'])`. De volgorde komt overeen met de volgorde van de datareeksen in je bereik.
:::

Grafieken maken rapporten visueel aantrekkelijk en inzichtelijk. Door de generatie te automatiseren houd je je visualisaties altijd actueel zonder handmatig werk.