Créer un graphique sur WordPress
En voilà un bout de code que j'aime pour notre bon vieux WordPress: pouvoir créer un graphique très facilement.
Des graphiques pour WordPress
Créer un graphique sur WordPress
Le code
Le code a été créé par Steph, de WebDevOnLinux, que j'ai ensuite adapté pour ajouter plus d'options (légendes et désactivation des étiquettes).
Commencez par copier ce code dans le fichier function.php de votre WordPress:
function chart_shortcode( $atts ) {
extract(shortcode_atts(array(
'data' => '',
'colors' => '',
'size' => '400x200',
'bg' => 'ffffff',
'title' => '',
'labels' => '',
'legende' => '',
'etiquette' => '',
'advanced' => '',
'type' => 'pie'), $atts));
switch ($type) {
case 'line' :
$charttype = 'lc'; break;
case 'xyline' :
$charttype = 'lxy'; break;
case 'sparkline' :
$charttype = 'ls'; break;
case 'meter' :
$charttype = 'gom'; break;
case 'scatter' :
$charttype = 's'; break;
case 'venn' :
$charttype = 'v'; break;
case 'pie' :
$charttype = 'p3'; break;
case 'pie2d' :
$charttype = 'p'; break;
default :
$charttype = $type;
break;}
if ($title) $string .= '&chtt='.$title.'';
if ($labels) {if ($etiquette) {$string .= '&chl='.$labels.'';}}
if ($legende) {
$string .= '&chdl='.$labels.'';
$string .= '&chdlp=b';}
if ($colors) $string .= '&chco='.$colors.'';
$string .= '&chs='.$size.'';
$string .= '&chd=t:'.$data.'';
$string .= '&chf='.$bg.'';
return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';}
add_shortcode('chart', 'chart_shortcode');
Vous avez donc créé un shortcode pour générer des graphiques. Le code à utiliser dans vos articles est donc le suivant :
Le rendu du graphique sur WordPress est donc :
Explication du shortcode
Comme vous le voyez, il s'agit d'un des fameux shortcodes WordPress délimités par []. Vous pouvez l'utilisez partout (pages, articles, taxonomies). Le code étant un peu barbare, voici l'explication :
Les valeurs obligatoires :
- data : les valeurs de chaque pourcentage, séparées par une virgule (utilisez des points pour les pourcentages avec virgules)
- labels : les noms rattachés à chaque pourcentage, séparés par le caractère |
- type : la forme du graphique
- title : le nom du graphique
Les valeurs facultatives :
- bg : la couleur du background, sous la forme d'un code couleur css
- legende : mettre à 1 pour afficher la légende du graphique
- etiquette : mettre à 1 pour afficher une étiquette pour chaque donnée
- colors : les couleurs de chaque partie du graphique, sous la forme d'un code couleur CSS et séparé par une virgule
- size : la taille
- type : la forme du graphique
En ne prenant que les valeurs obligatoires, voici ce à quoi va ressembler le graphique sur votre WordPress (mais bon, sans légende, c'est bizarre...).
Et le code correspondant :
Les valeurs pour créer des graphiques WordPress
Maintenant que l'on sait comment créer un graphique, voici les valeurs que vous pouvez utiliser :
Les couleurs :
Vous ne pouvez pas utiliser de codes génériques, tels que "black", "red" ou "white", sinon le rendu par défaut des couleurs sera comme sur le graphique précédent :
Pour sélectionner des couleurs, il faut donc connaître les codes utilisés en CSS. Faites varier les plaisir avec ces codes couleurs basiques :
- Bleu : 0000FF
- Marron : 800000
- Rouge : FF0000
- Blanc : FFFFFF
- Jaune : FFFF00
- Noir : 000000
- Gris : 808080
- Vert : 008000
Les types de graphiques :
Là, on commence à s'amuser. Par défaut, j'ai utilisé pie. Mais vous pouvez utiliser d'autres valeurs : line, sparkline, meter, venn et pie2d, dont voici les rendus. Attention, certaines formes peuvent avoir des affichages un peu bizarres en fonction de la longueur de vos légendes, ou du type de données à afficher :
Les graphiques Line, puis Sparkline
Les graphiques Meter, Venn puis Pie2d
Les défauts du shortcode
Et oui, nous ne vivons pas dans le monde des bisounours. Cette méthode a plusieurs inconvénients:
- cela ralentit légèrement votre site (à chaque chargement de page, le code est généré par javascript)
- vous dépendez de Google
Sur un bon serveur rapide et sur un site optimisé, l'impact sera faible. Mais rien n'empêche de générer le graphique grâce à ce code, de faire une capture d'écran et de transformer le tout en image (ce sera 10fois plus rapide que de le faire sur Excel...).
Bien entendu, l'API de Google permet d'aller encore plus loin dans la création de graphiques, mais je n'ai pas voulu surcharger encore plus ce shortcode...
Sources :
- 5 shortcodes WordPress super pratiques (WebdevOnLinux)
- API Google Charts
Voici les thématiques abordées par Créer un graphique sur WordPress:
7 commentaires sur Créer un graphique sur WordPress
Jb - Le 22 août 2010 à 12 h 07 min
Excellent !
J’en ignorais totalement l’existence.
Tu as pu mesuré l’impact des performances avec le script en plus ?
IBuzzyou - Le 22 août 2010 à 19 h 14 min
Etonnant ce que l’on peut faire avec WordPress, mais je trouve cela encore assez compliqué à utiliser pour créer un graph ou un schéma comparé à Excel (si on l’utilise souvent), non ?
Daniel Roch - Le 23 août 2010 à 9 h 16 min
@Jb : l’impact reste faible vu que les serveurs de Google sont assez rapides. Je dirais 0,5 secondes de temps de chargement en plus.
@Ibuzzyou : faut-il encore avoir Excel installé sur son PC (je pense notamment à ceux qui utilisent WordPress sur leur mobile).
jb - Le 23 août 2010 à 14 h 04 min
Si ton site est bien optimisé, tu double le temps de chargement, la solution de l’image que tu proposes est la meilleure donc :)
Référenceur freelance - Le 24 août 2010 à 8 h 31 min
Pas mal ce type de graphique. Merci pour l’info.
Talian - Le 16 septembre 2010 à 14 h 07 min
La graphe n’affiche pas les data sur la ligne verticale.Est ce qu’il y a un moyen de faire celà pour cette fonction? SVP AIdez moi
Est-il autre plugin en wordpress qui permet d’afficher la graphe du cours de devise mensuel?
Daniel Roch - Le 16 septembre 2010 à 18 h 52 min
Je crois qu’il faut utiliser le paramètre « etiquette » (si je ne dis pas de bêtises)