Voulez-vous afficher des graphiques Google dans WordPress ? Notre snippet va créer un nouveau shortcode qui tire parti de l’API Google charts. Ce shortcode vous permettra d’afficher une gamme de graphiques, tels que des lignes, xyline, sparkline, meter, scatter, venn, pie et pie2d.
Instructions:
Il vous suffit d’ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique à votre site:
function google_chart_shortcode( $atts ) { extract(shortcode_atts(array( 'data' => '', 'size' => '400x180', 'colors' => '', 'title' => '', 'labels' => '', 'type' => 'pie', 'advanced' => '' ), $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) $string .= '&chl='.$labels.''; if ($colors) $string .= '&chco='.$colors.''; $string .= '&chs='.$size.''; $string .= '&chd=t:'.$data.''; return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />'; } add_shortcode('chart', 'google_chart_shortcode');
Voir l’exemple ci-dessous d’un diagramme circulaire en 3D. Modifiez l’attribut type dans votre shortcode pour spécifier le type de graphique que vous souhaitez afficher.
[chart data="41,37.89,10.67,2.03" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="ff0000,005599,fff000,000000" size="488x200" title="Traffic Sources" type="pie"]
Note : Si c’est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur la manière de copier/coller correctement des extraits de code dans WordPress, afin de ne pas endommager accidentellement votre site.
Si vous avez aimé cet extrait de code, n’hésitez pas à consulter nos autres articles sur le site comme : Les meilleurs constructeurs de pages WordPress (comparés).
Hello, thanks for this. How can I use stacked bar type? or gauge type? Also, how can I customize this further with for example opacity and so on…. Hope I get a reply from you thanks.
Hello ! How to add alt tag to this image? I specify that my knowledge in html is very low 🙂
Great codes. Thank you and it worked.
Also, how do I add tables from Google Charts? Also, does it impact my SEO if I use the tables? Thanks.