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.

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 !

La datavisualisation générée par le package geo_map de Google Chart Tools
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

Pays

Taux de chômage

Allemagne6,9 %
Australie5,2 %
Autriche4,9 %
Belgique7,4 %
Canada7,1 %
Corée du Sud3,1 %
Danemark7,9 %
Espagne26,2 %
Etats-Unis7,7 %
Finlande7,7 %
France10,6 %
Grèce27,0 %
Hongrie10,9 %
Irlande14,6 %
Islande5,3 %
Russie6,2 %
Qatar0,2 %
Zambie14,0 %
Zimbabwe95,0 %
Swaziland40,0 %
Syrie18,0 %
Chine6,4 %
Centrafrique8,0 %
Burkina Faso3,3 %
Brésil6,2 %
Argentine7,2 %
Afghanistan35 %

Le rendu du fichier html charts_google_visualization_unemployment.html
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

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&ocirc;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&ocirc;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&ocirc;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&eacute;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&egrave;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&eacute;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&egrave;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&egrave;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
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

Notre “camembert” de mots-clés avec des couleurs en random, pas toujours heureux.
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

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
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

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