Créer un graphique en anneau – donught chart

Comment créer un graphique en anneau ?

Dans ce court mémo, on va voir comment rapidement créer un camembert de statistique. On va ici utiliser le plugin chart.js, mais il en existe toute une panoplie : amcharts, highchart, google, canvas.

La doc officielle est assez fournie et permet déjà de créer un graphique. Dans notre premier exemple, on va partir sur un cas standard, sans fioritures. Le but ici est de montrer un CA d’un société par année.

Voici donc le codePen :

See the Pen
Simple Chart Donught with Update Function by blindDev (@yuyazz)
on CodePen.

Passez en 0.25x pour voir le résultat, ici le code n’a pas été travaillé pour le responsive !

Le javascript pour faire fonctionner le graphique

je définis d’abord tout un set de couleurs.

Ensuite je suis la doc officielle, j’instancie mon graphique et je l’insère dans une variable.

var ctx = document.getElementById('keyNumbers').getContext('2d');
var myDoughnutChart = new Chart(ctx, {...

KeyNumber est ici l’Id de mon camembert. Je précise aussi le type de graphique que je veux, en indiquant :

type: 'doughnut',

J’insère ensuite toutes mes data sets comprenant mes moyennes en % et les couleurs correspondantes. Les Labels vont me permettre de créer les légendes ainsi que le texte de chaque part du camembert lors du survol à la souris. Ces données de base vont servir pour l’affichage au chargement de la page. On aurait pu tout aussi bien y coller des données réelles, correspondant à une année en particulier.

Les options dans Chartjs

Ensuite je crée mes options, pour personnaliser le graphique.

CutoutPercentage

cutoutPercentage: 85

Le cutoutPercentage, c’est ce qui va me permettre d’affiner ou de grossir mon camembert. Plus le chiffre est grand, (jusqu’à 100) plus son contour sera fin. En gros si vous ne précisez pas cette option, votre camembert sera rempli.

Legend

legend: {
	onClick: function (e) {
		e.stopPropagation();
		},
	  position: 'bottom',
	},

Ici je crée une action au clic, ou plutôt j’annule l’effet par défaut du plugin, qui consiste à supprimer la part cliquée correspondante dans le graphique. Je fais en sorte d’annuler le clic pour qu’il ne se passe rien. La légende sert uniquement d’information.

Animation

Au chargement de la page, je veux aussi une animation, je précise donc ces options.

animation: {
      animateScale: true,
      animateRotate: true
    },

Pourcentage

Enfin, pour faire en sorte que les chiffres des data set soient automatiquement calculés en pourcentage sur mon graphique, j’ai trouvé une fonction sur stackoverflow : celle-ci permet d’afficher dans le tooltip, ( la petite fenêtre qui s’ouvre au survol du graphique), la correspondance en pourcentage de tous les chiffres insérés dans mes datasets.

tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var dataset = data.datasets[tooltipItem.datasetIndex];
        var meta = dataset._meta[Object.keys(dataset._meta)[0]];
        var total = meta.total;
        var currentValue = dataset.data[tooltipItem.index];
        var percentage = parseFloat((currentValue/total*100).toFixed(1));
        return  percentage + '%';
      },
      title: function(tooltipItem, data) {
        return data.labels[tooltipItem[0].index];
      }
    }
  },
  

La partie html du graphique

Pour l’html, il n’y rien de bien compliqué. Concernant chartjs, il suffit juste de créer une balise canvas. Collez-lui un ID qui corresponde à celui indiqué dans le fichier js.

 <canvas id="keyNumbers" width="400" height="100" aria-label="Chiffres clés de Sanofi"  role="img"></canvas>

Dans mon exemple, vous verrez que j’ai carrément inséré une image à l’intérieur. C’est la raison pour laquelle j’ai utilisé l’option cutoutPercentage, cela me permet de laisser la place à un élément intérieur. L’idéal, serait évidemment d’incorporer une vraie carte dynamique en lien avec le graphique.

Update() : créer une interaction avec des boutons ou modifier le graphique en live

A part ça, comme je veux indiquer des chiffres d’affaires par année, je vais créer des boutons par année

   <button id="#2014" onclick="myFunction2014()" value="update graph">2014</button>

Mes boutons ont tous une fonction javascript onclick que je défini dans mon fichier js.

function myFunction2014() {
    myDoughnutChart.data.datasets[0].data[0] = "11339", 
	myDoughnutChart.data.datasets[0].data[1] = "9062",
	myDoughnutChart.data.datasets[0].data[2] = "3363",
	myDoughnutChart.data.datasets[0].data[3] = "2529",
	myDoughnutChart.data.datasets[0].data[4] = "1344",
	myDoughnutChart.data.datasets[0].data[5] = "2449",
	myDoughnutChart.data.datasets[0].data[6] = "3612",
	myDoughnutChart.data.labels[0] = "Etats-Unis: 11339 M€",
	myDoughnutChart.data.labels[1] = "Europe: 9062 M€",
	myDoughnutChart.data.labels[2] = "Amérique Latine: 3363 M€",
	myDoughnutChart.data.labels[3] = "Asie :2 529 M€",
	myDoughnutChart.data.labels[4] = "Eurasie: 1344 M€",
	myDoughnutChart.data.labels[5] = "Afrique et Moyen Orient: 2 449 M€",
	myDoughnutChart.data.labels[6] = "RDM: 3 612 M€",

    myDoughnutChart.update();
}

En fait il suffit de redéfinir mes datasets et labels, et de terminer par la fonction du plugin update(). Je fais ça pour chaque fonction contenue dans mes boutons.

Les options définies dans l’instanciation de mon chart se répercutent pour chaque lot de dataset et label.

Voilà, avec cet exemple en principe vous pourrez créer facilement un graphique pour représenter des données par année !