Ajouter des graphiques dans vos PDF

Services externes

Pour des graphiques simples, le plus rapide est de passer par un service externe qui fera le travail à votre place.

Nous utiliserons ici QuickChart mais les principes sont les mêmes pour n’importe quel service.

<img
  src="https://quickchart.io/chart?width=500&height=300&c={
    type: 'bar',
    data: {
      labels: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai'],
      datasets: [
        { label: 'Chiens', data: [50, 60, 70, 180, 190] },
        { label: 'Chats', data: [100, 200, 300, 400, 500] }
      ]
    }
  }">

Données dynamiques

Vous pouvez utiliser vos données dynamiques pour générer l’URL de votre graphique.

Reprenons l’exemple vu précédemment et copions les séries dans les données du modèle.

{
  "labels": ["Janvier", "Février", "Mars", "Avril", "Mai"],
  "series": [
    { "label": "Chiens", "data": [50, 60, 70, 180, 190] },
    { "label": "Chats", "data": [100, 200, 300, 400, 500] }
  ]
}

Nous pouvons maintenant utiliser ces données dans notre HTML. Pour les mettre au format attendu nous allons utiliser le filtre personnalisé json :

<img
  src="https://quickchart.io/chart?width=500&height=300&c={
    type: 'bar',
    data: {
      labels: {{labels | json | url_encode}},
      datasets: {{series | json | url_encode}}
    }
  }">

Notez que nous utilisons également le filtre url_encode car les données seront directement insérées dans unr URL.

Graphiques personnalisés

Pour des scénarios plus complexes, vous pouvez utiliser une bibliothèque JS tant que celle-ci est accessible via une URL. La plupart des bibliothèques proposent une version par CDN.

L’exemple qui suit utilise ApexCharts, un outil gratuit. Les alternatives comme uvCharts, Chart.js ou D3.js fonctionnent également.

<div id="chart"></div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="text/javascript">
  let options = {
    chart: {
      type: 'bar',
      height: 380,
      width: '100%',
      animations: { enabled: false },
      toolbar: { show: false }
    },
    series: [
      { name: 'Chiens', data: [50, 60, 70, 180, 190] },
      { name: 'Chats', data: [100, 200, 300, 400, 500] }
    ],
    axis: {
      categories: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai']
    }
  };

  let chart = new ApexCharts(document.querySelector('#chart'), options);
  chart.render();
</script>

Données dynamiques

Les données dynamiques passées à votre document lors de sa génération seront accessible en JavaScript via la variable $docPayload, utilisez celle-ci pour créer un graphique dynamique.

<div id="chart"></div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type="text/javascript">
  let options = {
    chart: {
      type: 'bar',
      height: 380,
      width: '100%',
      animations: { enabled: false },
      toolbar: { show: false }
    },
    series: $docPayload.series,
    axis: { categories: $docPayload.labels }
  };

  let chart = new ApexCharts(document.querySelector('#chart'), options);
  chart.render();
</script>

Anciens graphiques

L’ancien moteur de rendu incorporait une surcouche de Chart.js v2.3 nommée monkeyCharts. Le nouveau moteur ne contient pas cette surcouche. Celle-ci était source de confusion et offrait peu comparé aux services comme QuickChart.