{"id":3529,"date":"2013-05-02T08:46:24","date_gmt":"2013-05-02T07:46:24","guid":{"rendered":"http:\/\/flaven.fr\/?p=3529"},"modified":"2013-05-02T08:46:24","modified_gmt":"2013-05-02T07:46:24","slug":"google-chart-tools-api-wordpress-datavisualisation-creer-des-graphiques-avec-google-chart-tools-au-sein-de-wordpress-via-un-shortcode-element-de-storytelling-pour-un-blog","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2013\/05\/google-chart-tools-api-wordpress-datavisualisation-creer-des-graphiques-avec-google-chart-tools-au-sein-de-wordpress-via-un-shortcode-element-de-storytelling-pour-un-blog\/","title":{"rendered":"Google Chart Tools, API, WordPress, Datavisualisation &#8211; Cr\u00e9er des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, \u00e9l\u00e9ment de Storytelling pour un blog"},"content":{"rendered":"\n<p><!--  Google Chart Tools, API, WordPress, Datavisualisation - Cr\u00e9er des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, \u00e9l\u00e9ment de Storytelling pour un blog  --><br \/>\n\t<!--  Google, Charts, API, Javascript, WordPress, Plugin, Fonctions, PHP, Datavisualization, datavisualisation, Google Chart Tools, Shortcode, d\u00e9veloppement, Storytelling --><\/p>\n<p>Il est beaucoup question de datavisualisation sur le web notamment. C&#8217;est \u00e0 dire comment rehausser le contenu, par un proc\u00e9d\u00e9 simple de <code>storytelling<\/code>. Pour ceux d&#8217;entre vous qui lisent la presse sur le web, de tr\u00e8s nombreux journaux am\u00e9ricains utilisent d\u00e9sormais ce proc\u00e9d\u00e9 dans leurs articles. Cela engendre parait-il un meilleur engagement des utilisateurs et un surcroit de confiance des lecteurs dans la prescription. Les <code>webdocs<\/code> ne suffisent donc plus ! En faisant quelques recherches, on se rend vite compte que l&#8217;API qui assure comme toujours c&#8217;est celle de Google, la <code>Google Chart Tools<\/code>.<br \/>\nOn va donc explorer dans cet article, les potentialit\u00e9s offertes par <code>Google Chart Tools<\/code> et puis dans un second temps, si vous poss\u00e9dez un site sous <code>WordPress<\/code> comment tirer profit de la datavisualisation \u00e0 l&#8217;aide d&#8217;un shortcode. Deux shortcodes\/fonctions qui permettent la datavisualisation, l&#8217;un \u00e0 partir de l&#8217;ensemble des mots-cl\u00e9s de votre blog, l&#8217;autre \u00e0 partir d&#8217;attributs directement pass\u00e9s dans le shortcode.<\/p>\n<p><i>Source : The New York Times&#8217; R&#038;D Lab has built a tool that explores the life stories take in the social space<br \/><a href=\"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\/\" target=\"_blank\">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\/<\/a><\/i><\/p>\n<p><b>Cette datavisualisation, il en a \u00e9t\u00e9 beaucoup question lors du i_doc workshop 2013 \u00e0 Nyons. A lire \u00e9ventuellement notre retour d&#8217;exp\u00e9rience sur le blog de 3WDOC.<\/b><\/p>\n<ul>\n<li>Visions du R\u00e9el, SUPSI, i_doc workshop 2013 \u2013 Un retour sur le i_doc workshop 2013 au festival Visions du R\u00e9el de Nyon<br \/><a href=\"https:\/\/flaven.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\/\" target=\"_blank\">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\/<\/a><\/li>\n<\/ul>\n<p>Pour ceux qui douteraient encore de l&#8217;importance de la tendance de la datavisualisation, voil\u00e0 les points \u00e0 retenir donn\u00e9es par Cliff Kuang de Fast Company (<a href=\"https:\/\/twitter.com\/cliffkuang\" target=\"_blank\">@cliffkuang<\/a>).<\/p>\n<blockquote>\n<ul>\n<li><b>Storytelling:<\/b> Uses narrative, point of view, or tone to tell a persuasive story.<\/li>\n<li><b>Clarity:<\/b> Presents information that is accessible, accurate, and meaningful.<\/li>\n<li><b>Relevance:<\/b> Communicates information that is timely, personal, or relatable.<\/li>\n<li><b>Utility:<\/b> Provides insights that can inform action.<\/li>\n<li><b>Aesthetics:<\/b> Embodies beauty, balance, and visual originality.<\/li>\n<\/ul>\n<\/blockquote>\n<p><i>Source : <a href=\"http:\/\/www.fastcodesign.com\/1663283\/infographic-of-the-day-google-charts-what-your-taxes-pay-for\" target=\"_blank\">http:\/\/www.fastcodesign.com\/1663283\/infographic-of-the-day-google-charts-what-your-taxes-pay-for<\/a><\/i><\/p>\n<h4>Principes de datavisualisation<\/h4>\n<p>Apr\u00e8s un premier mai morose, quoi de mieux que de f\u00eater cyniquement le nombre de ch\u00f4meurs toujours croissant dans le monde entier. On va donc utiliser les donn\u00e9es suivantes concernant le ch\u00f4mage mondial et de faire une datavisualisation \u00e0 l&#8217;aide du package <code>geo_map<\/code><\/p>\n<p><i>Source : <a href=\"https:\/\/code.google.com\/apis\/ajax\/playground\/?type=visualization#geo_map\" target=\"_blank\">https:\/\/code.google.com\/apis\/ajax\/playground\/?type=visualization#geo_map<\/a><\/i><\/p>\n<p><b>Les donn\u00e9es du ch\u00f4mage dans quelques pays<\/b><br \/>\nOn ne se prononce pas sur la fiabilit\u00e9 des donn\u00e9es. En effet, vu la gueule du site <code>statistiques-mondiales.com<\/code>, les chiffres ne nous semblent pas forc\u00e9ment pertinents&#8230; mais bon c&#8217;est une des premi\u00e8res que Google a sorti alors on fait avec. Les statistiques de <code>oecd.org<\/code> nous semblent nettement plus fiables, c&#8217;est un vrai prescripteur en la mati\u00e8re.<br \/>\n<i>C&#8217;est vrai qu&#8217;un taux de ch\u00f4mage de 95% au Zimbabwe a de quoi inqui\u00e9ter mais enfin l&#8217;objet de cet article n&#8217;est pas de faire une analyse du ch\u00f4mage mondial !<\/i><\/p>\n<ul>\n<li><i>Source : <a href=\"http:\/\/www.statistiques-mondiales.com\/chomage.htm\" target=\"_blank\">http:\/\/www.statistiques-mondiales.com\/chomage.htm<\/a><\/i><\/li>\n<li><i>Source : <a href=\"http:\/\/stats.oecd.org\/\" target=\"_blank\">http:\/\/stats.oecd.org\/<\/a><\/i><\/li>\n<\/ul>\n<p>\t<b>La datavisualisation g\u00e9n\u00e9r\u00e9e par le package <code>geo_map<\/code> de <code>Google Chart Tools<\/code><\/b><br \/>\n\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/05\/google_visualization_api_unemployment_detail.jpg\" width=\"500\" height=\"313\" alt=\"Google Chart Tools, API, WordPress, Datavisualisation - Cr\u00e9er des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, \u00e9l\u00e9ment de Storytelling pour un blog\"><\/p>\n<p><!-- unemployment in the world --><\/p>\n<p><!-- datas --><\/p>\n<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" class=\"small\">\n<tbody>\n<tr>\n<td align=\"center\">\n<h3>Pays<\/h3>\n<\/td>\n<td align=\"center\">\n<h3>Taux de ch\u00f4mage<\/h3>\n<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Allemagne<\/td>\n<td align=\"center\" >6,9 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Australie<\/td>\n<td align=\"center\">5,2 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Autriche<\/td>\n<td align=\"center\" >4,9 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Belgique<\/td>\n<td align=\"center\" >7,4 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Canada<\/td>\n<td align=\"center\">7,1 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Cor\u00e9e du Sud<\/td>\n<td align=\"center\" >3,1 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Danemark<\/td>\n<td align=\"center\">7,9 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Espagne<\/td>\n<td align=\"center\" >26,2 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Etats-Unis<\/td>\n<td align=\"center\">7,7 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Finlande<\/td>\n<td align=\"center\" >7,7 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >France<\/td>\n<td align=\"center\" >10,6 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Gr\u00e8ce<\/td>\n<td align=\"center\" >27,0 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Hongrie<\/td>\n<td align=\"center\" >10,9 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Irlande<\/td>\n<td align=\"center\" >14,6 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Islande<\/td>\n<td align=\"center\" >5,3 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Russie<\/td>\n<td align=\"center\" >6,2 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\" >Qatar<\/td>\n<td align=\"center\" >0,2 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Zambie<\/td>\n<td align=\"center\">14,0 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Zimbabwe<\/td>\n<td align=\"center\">95,0 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Swaziland<\/td>\n<td align=\"center\">40,0 %<\/td>\n<\/tr>\n<\/tr>\n<tr>\n<td align=\"center\">Syrie<\/td>\n<td align=\"center\">18,0 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Chine<\/td>\n<td align=\"center\">6,4 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Centrafrique<\/td>\n<td align=\"center\">8,0 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Burkina Faso<\/td>\n<td align=\"center\">3,3 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Br\u00e9sil<\/td>\n<td align=\"center\">6,2 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Argentine<\/td>\n<td align=\"center\">7,2 %<\/td>\n<\/tr>\n<tr>\n<td align=\"center\">Afghanistan<\/td>\n<td align=\"center\">35 %<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><!-- \/\/ datas --><\/p>\n<p><b>Le rendu du fichier html <code>charts_google_visualization_unemployment.html<\/code><\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/05\/google_visualization_api_unemployment.jpg\" width=\"500\" height=\"313\" alt=\"Google Chart Tools, API, WordPress, Datavisualisation - Cr\u00e9er des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, \u00e9l\u00e9ment de Storytelling pour un blog\"><\/p>\n<p><b>Le code du fichier html <code>charts_google_visualization_unemployment.html<\/code><\/b><\/p>\n<pre lang=\"html\" escaped=\"true\">\n\t&lt;!--\n\tYou are free to copy and use this sample in accordance with the terms of the\n\tApache license (http:\/\/www.apache.org\/licenses\/LICENSE-2.0.html)\n\t--&gt;\n\n\t&lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\"&gt;\n\t&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"&gt;\n\t&lt;head&gt;\n\t  &lt;meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\" \/&gt;\n\t  &lt;title&gt;Taux de ch&ocirc;mage dans le monde - Google Visualization API&lt;\/title&gt;\n\t  &lt;script type=\"text\/javascript\" src=\"http:\/\/www.google.com\/jsapi\"&gt;&lt;\/script&gt;\n\t  &lt;script type=\"text\/javascript\"&gt;\n\t    google.load('visualization', '1', {packages: ['geomap']});\n\n\t    function drawVisualization() {\n\t      var data = google.visualization.arrayToDataTable([\n\t        ['Pays', 'Taux de ch&ocirc;mage'],\n\t\t\t['Germany', 6.9],\n\t\t\t['Australia', 5.2],\n\t\t\t['Austria', 4.9],\n\t\t\t['Belgium', 7.4],\n\t\t\t['Canada', 7.1],\n\t\t\t['South Korea', 3.1],\n\t\t\t['Denmark', 7.9],\n\t\t\t['Spain', 26.2],\n\t\t\t['United States', 7.7],\n\t\t\t['Finland', 7.7],\n\t\t\t['France', 10.6],\n\t\t\t['Greece', 27.0],\n\t\t\t['Hungary', 10.9],\n\t\t\t['Ireland', 14.6],\n\t\t\t['Russia', 6.2],\n\t\t\t['Qatar', 0.2],\n\t\t\t['Zambia', 14.0],\n\t\t\t['Zimbabwe', 95.0],\n\t\t\t['Swaziland', 40.0],\n\t\t\t['Syria', 18.0],\n\t\t\t['China', 6.4],\n\t\t\t['CAR', 8.0],\n\t\t\t['Burkina Faso', 3.3],\n\t\t\t['Brazil', 6.2],\n\t\t\t['Argentina', 7.2],\n\t\t\t['Afghanistan', 35],\n\t\t\t['Iceland', 5.3]\n\n\t      ]);\n\n\t      var geomap = new google.visualization.GeoMap(\n\t          document.getElementById('visualization'));\n\t      geomap.draw(data, null);\n\t    }\n\n\n\t    google.setOnLoadCallback(drawVisualization);\n\t  &lt;\/script&gt;\n\t&lt;\/head&gt;\n\t&lt;body style=\"font-family: Arial;border: 0 none;\"&gt;\n\n\t&lt;table border=\"0\" cellpadding=\"2\" cellspacing=\"2\"&gt;\n\t\t\t&lt;tr&gt;\n\t\t\t\t&lt;td valign=\"top\"&gt;\n\t\t\t\t\t&lt;!-- visualization --&gt;\n\t\t\t\t\t&lt;div id=\"visualization\" style=\"width: 800px; height: 400px;\"&gt;&lt;\/div&gt;\n\t\t\t\t&lt;\/td&gt;\n\t\t\t\t&lt;td valign=\"top\"&gt;\n\t\t\t\t\t&lt;!-- datas --&gt;\n\t\t\t\t\t&lt;table border=\"1\" cellpadding=\"0\" cellspacing=\"0\"&gt;\n\t\t\t\t\t&lt;tbody&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;&lt;h3&gt;Pays&lt;\/h3&gt;&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;&lt;h3&gt;Taux de ch&ocirc;mage&lt;\/h3&gt;&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Allemagne&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;6,9 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Australie&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;5,2 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Autriche&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;4,9 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Belgique&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;7,4 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Canada&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;7,1 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Cor&eacute;e du Sud&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;3,1 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Danemark&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;7,9 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Espagne&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;26,2 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Etats-Unis&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;7,7 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Finlande&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;7,7 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;France&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;10,6 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Gr&egrave;ce&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;27,0 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Hongrie&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;10,9 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Irlande&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;14,6 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Islande&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;5,3 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Russie&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;6,2 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;Qatar&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\" &gt;0,2 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Zambie&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;14,0 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Zimbabwe&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;95,0 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Swaziland&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;40,0 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Syrie&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;18,0 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Chine&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;6,4 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Centrafrique&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;8,0 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Burkina Faso&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;3,3 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Br&eacute;sil&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;6,2 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Argentine&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;7,2 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;tr&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;Afghanistan&lt;\/td&gt;\n\t\t\t\t\t&lt;td align=\"center\"&gt;35 %&lt;\/td&gt;\n\t\t\t\t\t&lt;\/tr&gt;\n\n\t\t\t\t\t&lt;\/tbody&gt;\n\t\t\t\t\t&lt;\/table&gt;\n\t\t\t\t\t&lt;!-- \/\/ datas --&gt;\n\n\t\t\t\t&lt;\/td&gt;\n\t\t\t&lt;\/tr&gt;\n\t&lt;\/table&gt;\n\t&lt;p&gt;NDLR : vu la gueule du site &lt;code&gt;statistiques-mondiales.com&lt;\/code&gt;, 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 &lt;code&gt;oecd.org&lt;\/code&gt; ne nous semblent nettement plus fiables, c'est un vrai prescripteur en la mati&egrave;re.&lt;\/p&gt;\n\t&lt;p&gt;\n\t\t&lt;ul&gt;\n\t\t\t&lt;li&gt;&lt;i&gt;Source : &lt;a href=\"http:\/\/www.statistiques-mondiales.com\/chomage.htm\" target=\"_blank\"&gt;http:\/\/www.statistiques-mondiales.com\/chomage.htm&lt;\/a&gt;&lt;\/i&gt;&lt;\/li&gt;\n\t\t\t&lt;li&gt;&lt;i&gt;Source : &lt;a href=\"http:\/\/stats.oecd.org\/\" target=\"_blank\"&gt;http:\/\/stats.oecd.org\/&lt;\/a&gt;&lt;\/i&gt;&lt;\/li&gt;\t\n\t\t&lt;\/ul&gt;\n\n\n\t&lt;\/p&gt;\n\n\n\n\t&lt;\/body&gt;\n\t&lt;\/html&gt;\n\t\n\t\n<\/pre>\n<p><b>Conclusion : Avec les outils de datavisualisation qui commencent \u00e0 pulluler, il y a \u00e9norm\u00e9ment \u00e0 faire afin d&#8217;enrichir vos contenus sur le web (site, webdoc, navigation&#8230;). Utiliser la datavisualisation, c&#8217;est offrir \u00e0 votre contenu les qualit\u00e9s suivantes : Storytelling, Clart\u00e9, Pertinence, Uitlit\u00e9, Esth\u00e9tique, UX-oriented&#8230;. bref les cl\u00e9s d&#8217;une narration digitale enrichie ax\u00e9e UX ou du digital storytelling et donc d&#8217;un maximum d&#8217;engagement de la part des utilisateurs.<\/b><\/p>\n<h4>Datavisualisation, Shortcode, WordPress &#038; Camembert<\/h4>\n<p>Maintenant, voyons comment impl\u00e9menter un peu de ces ressources au sein de WordPress. On s&#8217;est pos\u00e9 la question de dynamiser \u00e0 la vol\u00e9e des \u00e9l\u00e9ments disponibles \u00e0 l&#8217;int\u00e9rieur de WP. Notre cas d&#8217;\u00e9cole va voir comment on peut faire un graphique \u00e0 partir des tags de l&#8217;ensemble des articles d&#8217;un site sous WP. <b>En quelque sorte c&#8217;est une datavisualisation de votre tag-cloud pour lui donner plus de signification encore. Cela pourrait tout \u00e0 fait \u00eatre un nouvel \u00e9l\u00e9ment de navigation comme l&#8217;est d&#8217;ailleurs le nuage de mots-cl\u00e9s (tags-cloud) de WP. Ah, les liens s\u00e9mantiques !<\/b><\/p>\n<h4>Notre shortcode de datavisualisation bas\u00e9 sur les tags<\/h4>\n<p>Pour se faire, on va faire une <code>query<\/code> \u00e0 l&#8217;aide de la fonction <code>$tags = get_tags();<\/code> puis on injecte le tout dans notre shortcode qui poss\u00e8de quelque attributs (couleur, taille, titre) et surtout le plus important le type de graphique que l&#8217;on veut utiliser, dans notre exemple on prend du camembert (en anglais c&#8217;est de la tarte <code>type=\"pie\"<\/code>) de toutes les fa\u00e7ons : camembert ou tarte, notre shortcode c&#8217;est du g\u00e2teau !<\/p>\n<p><b>Le rendu de notre shortcode au sein d&#8217;un article par exemple<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/05\/chart_wp_shortcode_kw_random_colors.jpg\" width=\"500\" height=\"313\" alt=\"Google Chart Tools, API, WordPress, Datavisualisation - Cr\u00e9er des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, \u00e9l\u00e9ment de Storytelling pour un blog\"><\/p>\n<p><b>Notre &#8220;camembert&#8221; de mots-cl\u00e9s avec des couleurs en <code>random<\/code>, pas toujours heureux.<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/05\/chart_wp_shortcode_kw_random_colors_detail.jpg\" width=\"500\" height=\"313\" alt=\"Google Chart Tools, API, WordPress, Datavisualisation - Cr\u00e9er des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, \u00e9l\u00e9ment de Storytelling pour un blog\"><\/p>\n<p><b>L&#8217;usage de notre shortcode<\/b><br \/>\n<code>[chart_kw bg=\"F7F9FA\" title=\"Mon test shorcode\" type=\"pie\"]<\/code><\/p>\n<p><b>La fonction \u00e0 rajouter dans votre fichier <code>functions.php<\/code><\/b><\/p>\n<pre lang=\"php\" escaped=\"true\">\n\t\/* ADD A GOOGLE CHART SHORTCODE THAT GIVE AN OVERVIEW OF YOUR WORDPRESS TAGS *\/\n\tfunction chart_shortcode_kw ( $atts ) {\n\n\n\n\t\t\t$tags = get_tags();\n\t\t\t$tagsarray = array();\n\t\t\tforeach ($tags as $tag) {\n\t\t\t\t\t$tagsarray_id[] = $tag-&gt;term_id;\n\t\t\t\t\t$tagsarray_name[] = $tag-&gt;name;\n\t\t\t\t\t$tagsarray_count[] = $tag-&gt;count;\n\n\t\t\t\t\t\/* random colors *\/\n\t\t\t\t\t$tagsarray_rand_colors[] = (dechex(rand(0,10000000)));\n\t\t\t\t}\n\t\t\t$tagslist_id = implode(',', $tagsarray_id);  \n\t\t\t$tagslist_name = implode('|', $tagsarray_name);  \n\t\t\t$tagslist_count = implode(',', $tagsarray_count); \n\t\t\t$tagslist_rand_colors = implode(',', $tagsarray_rand_colors);\n\n\n\t\textract(shortcode_atts(array(\n\t\t    'size' =&gt; '400x200',\n\t\t    'bg' =&gt; 'ffffff',\n\t\t    'title' =&gt; '',\n\t\t    'type' =&gt; 'pie'\n\t\t), $atts));\n\n\t\tswitch ($type) {\n\t\t\tcase 'line' :\n\t\t\t\t$charttype = 'lc'; break;\n\t\t\tcase 'xyline' :\n\t\t\t\t$charttype = 'lxy'; break;\n\t\t\tcase 'sparkline' :\n\t\t\t\t$charttype = 'ls'; break;\n\t\t\tcase 'meter' :\n\t\t\t\t$charttype = 'gom'; break;\n\t\t\tcase 'scatter' :\n\t\t\t\t$charttype = 's'; break;\n\t\t\tcase 'venn' :\n\t\t\t\t$charttype = 'v'; break;\n\t\t\tcase 'pie' :\n\t\t\t\t$charttype = 'p3'; break;\n\t\t\tcase 'pie2d' :\n\t\t\t\t$charttype = 'p'; break;\n\t\t\tdefault :\n\t\t\t\t$charttype = $type;\n\t\t\tbreak;\n\t\t}\n\n\t\tif ($title) $string .= '&amp;chtt='.$title.'';\n\t\tif ($labels) $string .= '&amp;chl='.$labels.'';\n\t\tif ($colors) $string .= '&amp;chco='.$colors.'';\n\t\t$string .= '&amp;chs='.$size.'';\n\t\t\/\/ $string .= '&amp;chd=t:'.$data.'';\n\t\t$string .= '&amp;chf='.$bg.'';\n\n\n\t\t\/* USAGE *\/\n\t\t\/* [chart_kw bg=\"F7F9FA\" size=\"588x400\" title=\"Mon test shorcode\" type=\"pie\"] *\/\n\n\t\t\/* FOR DEBUG ONLY *\/\n\t\t\t\/\/ return '&lt;img title=\"'.$title.'\" src=\"http:\/\/chart.apis.google.com\/chart?cht=p3&amp;chtt='.$title.'&amp;chl='.$tagslist_name.'&amp;chco='.$tagslist_rand_colors.'&amp;chs='.$size.'&amp;chd=t:'.$tagslist_count.'&amp;chf='.$bg.'\" alt=\"'.$title.'\" &gt;';\n\n\t\t\treturn '&lt;img title=\"'.$title.'\" src=\"http:\/\/chart.apis.google.com\/chart?cht=p3&amp;chtt='.$title.'&amp;chl='.$tagslist_name.'&amp;chco='.$tagslist_rand_colors.'&amp;chs='.$size.'&amp;chd=t:'.$tagslist_count.'&amp;chf='.$bg.'\" alt=\"'.$title.'\" &gt;';\n\n\n\n\t\t}\/\/ EOF\n\tadd_shortcode('chart_kw', 'chart_shortcode_kw');\n\t\n<\/pre>\n<h4>Le shortcode d&#8217;origine<\/h4>\n<p><b>Si vous voulez b\u00e9n\u00e9ficier de ces <code>shortcodes<\/code>. Les fonction sont \u00e0 ajouter au fichier <code>functions.php<\/code> de votre th\u00e8me si ce fichier existe. Sinon, cr\u00e9ez-le !<\/b><\/p>\n<p><b>Le rendu dans un article<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/05\/other_chart_wp_shortcode.jpg\" width=\"500\" height=\"313\" alt=\"Google Chart Tools, API, WordPress, Datavisualisation - Cr\u00e9er des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, \u00e9l\u00e9ment de Storytelling pour un blog\"><\/p>\n<p><b>Le code de la fonction <code>php<\/code> pour utiliser le <code>shortcode<\/code> de <code>datavisualisation<\/code> o\u00f9 vous passez directement les donn\u00e9es dans les attributs et non depuis une source dynamique comme les tags des posts sous WP. A placer dans <code>functions.php<\/code> de votre th\u00e8me.<\/b><\/p>\n<pre lang=\"php\" escaped=\"true\">\nfunction chart_shortcode( $atts ) {\n\textract(shortcode_atts(array(\n\t    'data' =&gt; '',\n\t    'colors' =&gt; '',\n\t    'size' =&gt; '400x200',\n\t    'bg' =&gt; 'ffffff',\n\t    'title' =&gt; '',\n\t    'labels' =&gt; '',\n\t    'advanced' =&gt; '',\n\t    'type' =&gt; 'pie'\n\t), $atts));\n \n\tswitch ($type) {\n\t\tcase 'line' :\n\t\t\t$charttype = 'lc'; break;\n\t\tcase 'xyline' :\n\t\t\t$charttype = 'lxy'; break;\n\t\tcase 'sparkline' :\n\t\t\t$charttype = 'ls'; break;\n\t\tcase 'meter' :\n\t\t\t$charttype = 'gom'; break;\n\t\tcase 'scatter' :\n\t\t\t$charttype = 's'; break;\n\t\tcase 'venn' :\n\t\t\t$charttype = 'v'; break;\n\t\tcase 'pie' :\n\t\t\t$charttype = 'p3'; break;\n\t\tcase 'pie2d' :\n\t\t\t$charttype = 'p'; break;\n\t\tdefault :\n\t\t\t$charttype = $type;\n\t\tbreak;\n\t}\n \n\tif ($title) $string .= '&amp;chtt='.$title.'';\n\tif ($labels) $string .= '&amp;chl='.$labels.'';\n\tif ($colors) $string .= '&amp;chco='.$colors.'';\n\t$string .= '&amp;chs='.$size.'';\n\t$string .= '&amp;chd=t:'.$data.'';\n\t$string .= '&amp;chf='.$bg.'';\n \n\treturn '&lt;img title=\"'.$title.'\" src=\"http:\/\/chart.apis.google.com\/chart?cht='.$charttype.''.$string.$advanced.'\" alt=\"'.$title.'\" \/&gt;';\n}\nadd_shortcode('chart', 'chart_shortcode');\n<\/pre>\n<p><b>L&#8217;utilisation du shortcode<\/b><\/p>\n<pre lang=\"html\">\n\t[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\"]\n<\/pre>\n<p><i>Source : <a href=\"http:\/\/blue-anvil.com\/archives\/8-fun-useful-shortcode-functions-for-wordpress\/\" target=\"_blank\">http:\/\/blue-anvil.com\/archives\/8-fun-useful-shortcode-functions-for-wordpress\/<\/a><\/i><\/p>\n<p><b>Conclusion : si vous \u00eates sous WP, il serait dommage de se priver des nouvelles formes narratives UX que sont les graphiques de datavisualisation. C&#8217;est tellement facile \u00e0 mettre en place et le b\u00e9n\u00e9fice est immense !<\/b><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Infographic of the Day: Google Charts What Your Taxes Pay For<br \/><a href=\"http:\/\/www.fastcodesign.com\/1663283\/infographic-of-the-day-google-charts-what-your-taxes-pay-for\" target=\"_blank\">http:\/\/www.fastcodesign.com\/1663283\/infographic-of-the-day-google-charts-what-your-taxes-pay-for<\/a><\/li>\n<li>Visualize Your Taxes: Grand Award Winner | DataVizChallenge.org<br \/><a href=\"http:\/\/www.datavizchallenge.org\/\" target=\"_blank\">http:\/\/www.datavizchallenge.org\/<\/a><\/li>\n<li>Open Data Tools &#8211; Visualization<br \/><a href=\"http:\/\/opendata-tools.org\/en\/visualization\/\" target=\"_blank\">http:\/\/opendata-tools.org\/en\/visualization\/<\/a><\/li>\n<li>Mastering WordPress Shortcodes<br \/><a href=\"http:\/\/wp.smashingmagazine.com\/2009\/02\/02\/mastering-wordpress-shortcodes\/\" target=\"_blank\">http:\/\/wp.smashingmagazine.com\/2009\/02\/02\/mastering-wordpress-shortcodes\/<\/a><\/li>\n<li>Code Examples &#8211; Google Chart Tools &mdash; Google Developers<br \/><a href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/examples\" target=\"_blank\">https:\/\/developers.google.com\/chart\/interactive\/docs\/examples<\/a><\/li>\n<li>Easy Graphs with Google Chart Tools<br \/><a href=\"http:\/\/net.tutsplus.com\/tutorials\/other\/easy-graphs-with-google-chart-tools\/\" target=\"_blank\">http:\/\/net.tutsplus.com\/tutorials\/other\/easy-graphs-with-google-chart-tools\/<\/a><\/li>\n<li>Google Code Playground<br \/><a href=\"https:\/\/code.google.com\/apis\/ajax\/playground\/?type=visualization#org_chart\" target=\"_blank\">https:\/\/code.google.com\/apis\/ajax\/playground\/?type=visualization#org_chart<\/a><\/li>\n<li>Generating Google line charts with SQL, part I<br \/><a href=\"http:\/\/code.openark.org\/blog\/mysql\/generating-google-line-charts-with-sql-part-i\" target=\"_blank\">http:\/\/code.openark.org\/blog\/mysql\/generating-google-line-charts-with-sql-part-i<\/a><\/li>\n<li>How to Use Google Chart Tools with Web Applications<br \/><a href=\"http:\/\/blog.smartbear.com\/software-quality\/bid\/283820\/How-to-Use-Google-Chart-Tools-with-Web-Applications\" target=\"_blank\">http:\/\/blog.smartbear.com\/software-quality\/bid\/283820\/How-to-Use-Google-Chart-Tools-with-Web-Applications<\/a><\/li>\n<li>Create beautiful data visualisations with the SVG Google Charts API<br \/><a href=\"http:\/\/www.netmagazine.com\/tutorials\/create-beautiful-data-visualisations-svg-google-charts-api\" target=\"_blank\">http:\/\/www.netmagazine.com\/tutorials\/create-beautiful-data-visualisations-svg-google-charts-api<\/a><\/li>\n<li>ChartBoot for WordPress<br \/><a href=\"http:\/\/wordpress.org\/extend\/plugins\/chartboot-for-wordpress\/screenshots\/\" target=\"_blank\">http:\/\/wordpress.org\/extend\/plugins\/chartboot-for-wordpress\/screenshots\/<\/a><\/li>\n<li>10 incredibly cool WordPress shortcodes (excellent)<br \/><a href=\"http:\/\/www.catswhocode.com\/blog\/10-incredibly-cool-wordpress-shortcodes\" target=\"_blank\">http:\/\/www.catswhocode.com\/blog\/10-incredibly-cool-wordpress-shortcodes<\/a><\/li>\n<li>8 fun &#038; useful shortcode functions for wordpress (excellent)<br \/><a href=\"http:\/\/blue-anvil.com\/archives\/8-fun-useful-shortcode-functions-for-wordpress\/\" target=\"_blank\">http:\/\/blue-anvil.com\/archives\/8-fun-useful-shortcode-functions-for-wordpress\/<\/a><\/li>\n<li>PHP class for Google Chart Tools<br \/><a href=\"https:\/\/code.google.com\/p\/php-class-for-google-chart-tools\/source\/browse\/trunk\/Chart.php\" target=\"_blank\">https:\/\/code.google.com\/p\/php-class-for-google-chart-tools\/source\/browse\/trunk\/Chart.php<\/a><\/li>\n<li>Tag: Google Chart API<br \/><a href=\"http:\/\/wordpress.org\/extend\/plugins\/tags\/google-chart-api\" target=\"_blank\">http:\/\/wordpress.org\/extend\/plugins\/tags\/google-chart-api<\/a><\/li>\n<li>30 Extremely Useful WordPress Code Snippets &#038; Hacks<br \/><a href=\"http:\/\/webdesignhabits.com\/30-extremely-useful-wordpress-code-snippets-hacks\/\" target=\"_blank\">http:\/\/webdesignhabits.com\/30-extremely-useful-wordpress-code-snippets-hacks\/<\/a><\/li>\n<li>Massive List Of Useful WordPress Shortcodes Resources<br \/><a href=\"http:\/\/smashingwall.com\/wordpress\/shortcodes-resources\/\" target=\"_blank\">http:\/\/smashingwall.com\/wordpress\/shortcodes-resources\/<\/a><\/li>\n<li>Introduction to Using Chart Tools<br \/><a href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/?hl=fr\" target=\"_blank\">https:\/\/developers.google.com\/chart\/interactive\/docs\/?hl=fr<\/a><\/li>\n<li>30 Time Saving WordPress Shortcodes<br \/><a href=\"http:\/\/www.flashuser.net\/useful-shortcodes\" target=\"_blank\">http:\/\/www.flashuser.net\/useful-shortcodes<\/a><\/li>\n<li>How to Use Google Chart Tools in Your WordPress Site<br \/><a href=\"http:\/\/wpmu.org\/how-to-use-google-chart-tools-in-your-wordpress-site\/\" target=\"_blank\">http:\/\/wpmu.org\/how-to-use-google-chart-tools-in-your-wordpress-site\/<\/a><\/li>\n<li>Google Chart WordPress Shortcode<br \/><a href=\"http:\/\/www.internoetics.com\/2011\/11\/10\/google-chart-shortcode\/\" target=\"_blank\">http:\/\/www.internoetics.com\/2011\/11\/10\/google-chart-shortcode\/<\/a><\/li>\n<li>Using Google Chart to Make Real Estate Charts<br \/><a href=\"http:\/\/geekestateblog.com\/using-google-chart-to-make-real-estate-charts\/\" target=\"_blank\">http:\/\/geekestateblog.com\/using-google-chart-to-make-real-estate-charts\/<\/a><\/li>\n<li>Resource Roundup! 20 Creative Shortcodes To Use In Your Projects<br \/><a href=\"http:\/\/wp.tutsplus.com\/articles\/general\/resource-roundup-20-creative-shortcodes-to-use-in-your-projects\/\" target=\"_blank\">http:\/\/wp.tutsplus.com\/articles\/general\/resource-roundup-20-creative-shortcodes-to-use-in-your-projects\/<\/a><\/li>\n<li>Function Reference\/get the tags<br \/><a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/get_the_tags\" target=\"_blank\">http:\/\/codex.wordpress.org\/Function_Reference\/get_the_tags<\/a><\/li>\n<li>Customizing The WordPress Tag Count Tooltip<br \/><a href=\"http:\/\/zourbuth.com\/archives\/855\/customizing-the-wordpress-tag-count-tooltip\/\" target=\"_blank\">http:\/\/zourbuth.com\/archives\/855\/customizing-the-wordpress-tag-count-tooltip\/<\/a><\/li>\n<li>Multiple Shortcodes With a Single Function: 3 Killer Examples<br \/><a href=\"http:\/\/wp.tutsplus.com\/tutorials\/plugins\/multiple-shortcodes-with-a-single-function-3-killer-examples\/\" target=\"_blank\">http:\/\/wp.tutsplus.com\/tutorials\/plugins\/multiple-shortcodes-with-a-single-function-3-killer-examples\/<\/a><\/li>\n<li>WordPress shortcode to display related posts<br \/><a href=\"http:\/\/www.wprecipes.com\/wordpress-shortcode-to-display-related-posts\" target=\"_blank\">http:\/\/www.wprecipes.com\/wordpress-shortcode-to-display-related-posts<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Il est beaucoup question de datavisualisation sur le web notamment. C&#8217;est \u00e0 dire comment rehausser le contenu, par un proc\u00e9d\u00e9 simple de storytelling. Pour ceux&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2013\/05\/google-chart-tools-api-wordpress-datavisualisation-creer-des-graphiques-avec-google-chart-tools-au-sein-de-wordpress-via-un-shortcode-element-de-storytelling-pour-un-blog\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Google Chart Tools, API, WordPress, Datavisualisation &#8211; Cr\u00e9er des graphiques avec Google Chart Tools au sein de WordPress via un shortcode, \u00e9l\u00e9ment de Storytelling pour un blog<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Google Chart Tools enrichit WordPress avec des graphiques via shortcode. Am\u00e9liorez le storytelling de votre blog pour un engagement accru des lecteurs.","bf_ai_og_title":"Graphiques Google Chart Tools","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3442,3444,3447,3448,3449,3450,3451,3435,3452],"tags":[2183,600,601,602,138,603,2214,604,226,20,106,605,606,2192,2223],"class_list":["post-3529","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-devices","category-programming-databases","category-technology-trends","category-tools-productivity","category-tutorials-how-to","category-ux-product-design","category-web-design-front-end","category-web-development","category-wordpress-cms","tag-api","tag-charts","tag-datavisualisation","tag-datavisualization","tag-developpement","tag-fonctions","tag-google","tag-google-chart-tools","tag-javascript","tag-php","tag-plugin","tag-shortcode","tag-storytelling","tag-ux-experience-utilisateur","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-UV","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/05\/wp_8_fun_useful_shortcode_functions_b_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=3529"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/3529\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9366"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=3529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=3529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=3529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}