Google Chart Tools, API, WordPress, Datavisualisation – Créer des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, élément de Storytelling pour un blog
Il est beaucoup question de datavisualisation sur le web notamment. C’est à dire comment rehausser le contenu, par un procédé simple de storytelling. Pour ceux d’entre vous qui lisent la presse sur le web, de très nombreux journaux américains utilisent désormais ce procédé dans leurs articles. Cela engendre parait-il un meilleur engagement des utilisateurs et un surcroit de confiance des lecteurs dans la prescription. Les webdocs ne suffisent donc plus ! En faisant quelques recherches, on se rend vite compte que l’API qui assure comme toujours c’est celle de Google, la Google Chart Tools.
On va donc explorer dans cet article, les potentialités offertes par Google Chart Tools et puis dans un second temps, si vous possédez un site sous WordPress comment tirer profit de la datavisualisation à l’aide d’un shortcode. Deux shortcodes/fonctions qui permettent la datavisualisation, l’un à partir de l’ensemble des mots-clés de votre blog, l’autre à partir d’attributs directement passés dans le shortcode.
Source : The New York Times’ R&D Lab has built a tool that explores the life stories take in the social space
http://www.niemanlab.org/2011/04/the-new-york-times-rd-lab-has-built-a-tool-that-explores-the-life-stories-take-in-the-social-space/
Cette datavisualisation, il en a été beaucoup question lors du i_doc workshop 2013 à Nyons. A lire éventuellement notre retour d’expérience sur le blog de 3WDOC.
- Visions du Réel, SUPSI, i_doc workshop 2013 – Un retour sur le i_doc workshop 2013 au festival Visions du Réel de Nyon
http://blog.3wdoc.com/fr/2013/04/27/visions-du-reel-supsi-i_doc-workshop-2013-un-retour-sur-le-i_doc-workshop-2013-au-festival-visions-du-reel-de-nyon/
Pour ceux qui douteraient encore de l’importance de la tendance de la datavisualisation, voilà les points à retenir données par Cliff Kuang de Fast Company (@cliffkuang).
- Storytelling: Uses narrative, point of view, or tone to tell a persuasive story.
- Clarity: Presents information that is accessible, accurate, and meaningful.
- Relevance: Communicates information that is timely, personal, or relatable.
- Utility: Provides insights that can inform action.
- Aesthetics: Embodies beauty, balance, and visual originality.
Source : http://www.fastcodesign.com/1663283/infographic-of-the-day-google-charts-what-your-taxes-pay-for
Principes de datavisualisation
Après un premier mai morose, quoi de mieux que de fêter cyniquement le nombre de chômeurs toujours croissant dans le monde entier. On va donc utiliser les données suivantes concernant le chômage mondial et de faire une datavisualisation à l’aide du package geo_map
Source : https://code.google.com/apis/ajax/playground/?type=visualization#geo_map
Les données du chômage dans quelques pays
On ne se prononce pas sur la fiabilité des données. En effet, vu la gueule du site statistiques-mondiales.com, les chiffres ne nous semblent pas forcément pertinents… mais bon c’est une des premières que Google a sorti alors on fait avec. Les statistiques de oecd.org nous semblent nettement plus fiables, c’est un vrai prescripteur en la matière.
C’est vrai qu’un taux de chômage de 95% au Zimbabwe a de quoi inquiéter mais enfin l’objet de cet article n’est pas de faire une analyse du chômage mondial !
- Source : http://www.statistiques-mondiales.com/chomage.htm
- Source : http://stats.oecd.org/
La datavisualisation générée par le package geo_map de Google Chart Tools
Pays | Taux de chômage |
| Allemagne | 6,9 % |
| Australie | 5,2 % |
| Autriche | 4,9 % |
| Belgique | 7,4 % |
| Canada | 7,1 % |
| Corée du Sud | 3,1 % |
| Danemark | 7,9 % |
| Espagne | 26,2 % |
| Etats-Unis | 7,7 % |
| Finlande | 7,7 % |
| France | 10,6 % |
| Grèce | 27,0 % |
| Hongrie | 10,9 % |
| Irlande | 14,6 % |
| Islande | 5,3 % |
| Russie | 6,2 % |
| Qatar | 0,2 % |
| Zambie | 14,0 % |
| Zimbabwe | 95,0 % |
| Swaziland | 40,0 % |
| Syrie | 18,0 % |
| Chine | 6,4 % |
| Centrafrique | 8,0 % |
| Burkina Faso | 3,3 % |
| Brésil | 6,2 % |
| Argentine | 7,2 % |
| Afghanistan | 35 % |
Le rendu du fichier html charts_google_visualization_unemployment.html
Le code du fichier html charts_google_visualization_unemployment.html
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Taux de chômage dans le monde - Google Visualization API</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geomap']});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Pays', 'Taux de chômage'],
['Germany', 6.9],
['Australia', 5.2],
['Austria', 4.9],
['Belgium', 7.4],
['Canada', 7.1],
['South Korea', 3.1],
['Denmark', 7.9],
['Spain', 26.2],
['United States', 7.7],
['Finland', 7.7],
['France', 10.6],
['Greece', 27.0],
['Hungary', 10.9],
['Ireland', 14.6],
['Russia', 6.2],
['Qatar', 0.2],
['Zambia', 14.0],
['Zimbabwe', 95.0],
['Swaziland', 40.0],
['Syria', 18.0],
['China', 6.4],
['CAR', 8.0],
['Burkina Faso', 3.3],
['Brazil', 6.2],
['Argentina', 7.2],
['Afghanistan', 35],
['Iceland', 5.3]
]);
var geomap = new google.visualization.GeoMap(
document.getElementById('visualization'));
geomap.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<!-- visualization -->
<div id="visualization" style="width: 800px; height: 400px;"></div>
</td>
<td valign="top">
<!-- datas -->
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center"><h3>Pays</h3></td>
<td align="center"><h3>Taux de chômage</h3></td>
</tr>
<tr>
<td align="center">Allemagne</td>
<td align="center" >6,9 %</td>
</tr>
<tr>
<td align="center">Australie</td>
<td align="center">5,2 %</td>
</tr>
<tr>
<td align="center" >Autriche</td>
<td align="center" >4,9 %</td>
</tr>
<tr>
<td align="center" >Belgique</td>
<td align="center" >7,4 %</td>
</tr>
<tr>
<td align="center">Canada</td>
<td align="center">7,1 %</td>
</tr>
<tr>
<td align="center" >Corée du Sud</td>
<td align="center" >3,1 %</td>
</tr>
<tr>
<td align="center">Danemark</td>
<td align="center">7,9 %</td>
</tr>
<tr>
<td align="center" >Espagne</td>
<td align="center" >26,2 %</td>
</tr>
<tr>
<td align="center">Etats-Unis</td>
<td align="center">7,7 %</td>
</tr>
<tr>
<td align="center" >Finlande</td>
<td align="center" >7,7 %</td>
</tr>
<tr>
<td align="center" >France</td>
<td align="center" >10,6 %</td>
</tr>
<tr>
<td align="center" >Grèce</td>
<td align="center" >27,0 %</td>
</tr>
<tr>
<td align="center" >Hongrie</td>
<td align="center" >10,9 %</td>
</tr>
<tr>
<td align="center" >Irlande</td>
<td align="center" >14,6 %</td>
</tr>
<tr>
<td align="center" >Islande</td>
<td align="center" >5,3 %</td>
</tr>
<tr>
<td align="center" >Russie</td>
<td align="center" >6,2 %</td>
</tr>
<tr>
<td align="center" >Qatar</td>
<td align="center" >0,2 %</td>
</tr>
<tr>
<td align="center">Zambie</td>
<td align="center">14,0 %</td>
</tr>
<tr>
<td align="center">Zimbabwe</td>
<td align="center">95,0 %</td>
</tr>
<tr>
<td align="center">Swaziland</td>
<td align="center">40,0 %</td>
</tr>
</tr>
<tr>
<td align="center">Syrie</td>
<td align="center">18,0 %</td>
</tr>
<tr>
<td align="center">Chine</td>
<td align="center">6,4 %</td>
</tr>
<tr>
<td align="center">Centrafrique</td>
<td align="center">8,0 %</td>
</tr>
<tr>
<td align="center">Burkina Faso</td>
<td align="center">3,3 %</td>
</tr>
<tr>
<td align="center">Brésil</td>
<td align="center">6,2 %</td>
</tr>
<tr>
<td align="center">Argentine</td>
<td align="center">7,2 %</td>
</tr>
<tr>
<td align="center">Afghanistan</td>
<td align="center">35 %</td>
</tr>
</tbody>
</table>
<!-- // datas -->
</td>
</tr>
</table>
<p>NDLR : vu la gueule du site <code>statistiques-mondiales.com</code>, les chiffres ne nous semblent pas fiables des masses... mais bon c'est une des premières que google a sorti alors on fait avec. Les statistiques de <code>oecd.org</code> ne nous semblent nettement plus fiables, c'est un vrai prescripteur en la matière.</p>
<p>
<ul>
<li><i>Source : <a href="http://www.statistiques-mondiales.com/chomage.htm" target="_blank">http://www.statistiques-mondiales.com/chomage.htm</a></i></li>
<li><i>Source : <a href="http://stats.oecd.org/" target="_blank">http://stats.oecd.org/</a></i></li>
</ul>
</p>
</body>
</html> |
Conclusion : Avec les outils de datavisualisation qui commencent à pulluler, il y a énormément à faire afin d’enrichir vos contenus sur le web (site, webdoc, navigation…). Utiliser la datavisualisation, c’est offrir à votre contenu les qualités suivantes : Storytelling, Clarté, Pertinence, Uitlité, Esthétique, UX-oriented…. bref les clés d’une narration digitale enrichie axée UX ou du digital storytelling et donc d’un maximum d’engagement de la part des utilisateurs.
Datavisualisation, Shortcode, WordPress & Camembert
Maintenant, voyons comment implémenter un peu de ces ressources au sein de WordPress. On s’est posé la question de dynamiser à la volée des éléments disponibles à l’intérieur de WP. Notre cas d’école va voir comment on peut faire un graphique à partir des tags de l’ensemble des articles d’un site sous WP. En quelque sorte c’est une datavisualisation de votre tag-cloud pour lui donner plus de signification encore. Cela pourrait tout à fait être un nouvel élément de navigation comme l’est d’ailleurs le nuage de mots-clés (tags-cloud) de WP. Ah, les liens sémantiques !
Notre shortcode de datavisualisation basé sur les tags
Pour se faire, on va faire une query à l’aide de la fonction $tags = get_tags(); puis on injecte le tout dans notre shortcode qui possède quelque attributs (couleur, taille, titre) et surtout le plus important le type de graphique que l’on veut utiliser, dans notre exemple on prend du camembert (en anglais c’est de la tarte type="pie") de toutes les façons : camembert ou tarte, notre shortcode c’est du gâteau !
Le rendu de notre shortcode au sein d’un article par exemple
Notre “camembert” de mots-clés avec des couleurs en random, pas toujours heureux.
L’usage de notre shortcode
[chart_kw bg="F7F9FA" title="Mon test shorcode" type="pie"]
La fonction à rajouter dans votre fichier functions.php
/* ADD A GOOGLE CHART SHORTCODE THAT GIVE AN OVERVIEW OF YOUR WORDPRESS TAGS */ function chart_shortcode_kw ( $atts ) { $tags = get_tags(); $tagsarray = array(); foreach ($tags as $tag) { $tagsarray_id[] = $tag->term_id; $tagsarray_name[] = $tag->name; $tagsarray_count[] = $tag->count; /* random colors */ $tagsarray_rand_colors[] = (dechex(rand(0,10000000))); } $tagslist_id = implode(',', $tagsarray_id); $tagslist_name = implode('|', $tagsarray_name); $tagslist_count = implode(',', $tagsarray_count); $tagslist_rand_colors = implode(',', $tagsarray_rand_colors); extract(shortcode_atts(array( 'size' => '400x200', 'bg' => 'ffffff', 'title' => '', '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) $string .= '&chl='.$labels.''; if ($colors) $string .= '&chco='.$colors.''; $string .= '&chs='.$size.''; // $string .= '&chd=t:'.$data.''; $string .= '&chf='.$bg.''; /* USAGE */ /* [chart_kw bg="F7F9FA" size="588x400" title="Mon test shorcode" type="pie"] */ /* FOR DEBUG ONLY */ // return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht=p3&chtt='.$title.'&chl='.$tagslist_name.'&chco='.$tagslist_rand_colors.'&chs='.$size.'&chd=t:'.$tagslist_count.'&chf='.$bg.'" alt="'.$title.'" >'; return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht=p3&chtt='.$title.'&chl='.$tagslist_name.'&chco='.$tagslist_rand_colors.'&chs='.$size.'&chd=t:'.$tagslist_count.'&chf='.$bg.'" alt="'.$title.'" >'; }// EOF add_shortcode('chart_kw', 'chart_shortcode_kw'); |
Le shortcode d’origine
Si vous voulez bénéficier de ces shortcodes. Les fonction sont à ajouter au fichier functions.php de votre thème si ce fichier existe. Sinon, créez-le !
Le rendu dans un article
Le code de la fonction php pour utiliser le shortcode de datavisualisation où vous passez directement les données dans les attributs et non depuis une source dynamique comme les tags des posts sous WP. A placer dans functions.php de votre thème.
function chart_shortcode( $atts ) { extract(shortcode_atts(array( 'data' => '', 'colors' => '', 'size' => '400x200', 'bg' => 'ffffff', 'title' => '', 'labels' => '', '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) $string .= '&chl='.$labels.''; 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'); |
L’utilisation du shortcode
[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"] |
Source : http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress/
Conclusion : si vous êtes sous WP, il serait dommage de se priver des nouvelles formes narratives UX que sont les graphiques de datavisualisation. C’est tellement facile à mettre en place et le bénéfice est immense !
En savoir plus
- Infographic of the Day: Google Charts What Your Taxes Pay For
http://www.fastcodesign.com/1663283/infographic-of-the-day-google-charts-what-your-taxes-pay-for - Visualize Your Taxes: Grand Award Winner | DataVizChallenge.org
http://www.datavizchallenge.org/ - Open Data Tools – Visualization
http://opendata-tools.org/en/visualization/ - Mastering WordPress Shortcodes
http://wp.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/ - Code Examples – Google Chart Tools — Google Developers
https://developers.google.com/chart/interactive/docs/examples - Easy Graphs with Google Chart Tools
http://net.tutsplus.com/tutorials/other/easy-graphs-with-google-chart-tools/ - Google Code Playground
https://code.google.com/apis/ajax/playground/?type=visualization#org_chart - Generating Google line charts with SQL, part I
http://code.openark.org/blog/mysql/generating-google-line-charts-with-sql-part-i - How to Use Google Chart Tools with Web Applications
http://blog.smartbear.com/software-quality/bid/283820/How-to-Use-Google-Chart-Tools-with-Web-Applications - Create beautiful data visualisations with the SVG Google Charts API
http://www.netmagazine.com/tutorials/create-beautiful-data-visualisations-svg-google-charts-api - ChartBoot for WordPress
http://wordpress.org/extend/plugins/chartboot-for-wordpress/screenshots/ - 10 incredibly cool WordPress shortcodes (excellent)
http://www.catswhocode.com/blog/10-incredibly-cool-wordpress-shortcodes - 8 fun & useful shortcode functions for wordpress (excellent)
http://blue-anvil.com/archives/8-fun-useful-shortcode-functions-for-wordpress/ - PHP class for Google Chart Tools
https://code.google.com/p/php-class-for-google-chart-tools/source/browse/trunk/Chart.php - Tag: Google Chart API
http://wordpress.org/extend/plugins/tags/google-chart-api - 30 Extremely Useful WordPress Code Snippets & Hacks
http://webdesignhabits.com/30-extremely-useful-wordpress-code-snippets-hacks/ - Massive List Of Useful WordPress Shortcodes Resources
http://smashingwall.com/wordpress/shortcodes-resources/ - Introduction to Using Chart Tools
https://developers.google.com/chart/interactive/docs/?hl=fr - 30 Time Saving WordPress Shortcodes
http://www.flashuser.net/useful-shortcodes - How to Use Google Chart Tools in Your WordPress Site
http://wpmu.org/how-to-use-google-chart-tools-in-your-wordpress-site/ - Google Chart WordPress Shortcode
http://www.internoetics.com/2011/11/10/google-chart-shortcode/ - Using Google Chart to Make Real Estate Charts
http://geekestateblog.com/using-google-chart-to-make-real-estate-charts/ - Resource Roundup! 20 Creative Shortcodes To Use In Your Projects
http://wp.tutsplus.com/articles/general/resource-roundup-20-creative-shortcodes-to-use-in-your-projects/ - Function Reference/get the tags
http://codex.wordpress.org/Function_Reference/get_the_tags - Customizing The WordPress Tag Count Tooltip
http://zourbuth.com/archives/855/customizing-the-wordpress-tag-count-tooltip/ - Multiple Shortcodes With a Single Function: 3 Killer Examples
http://wp.tutsplus.com/tutorials/plugins/multiple-shortcodes-with-a-single-function-3-killer-examples/ - WordPress shortcode to display related posts
http://www.wprecipes.com/wordpress-shortcode-to-display-related-posts
