{"id":5283,"date":"2018-04-27T15:33:50","date_gmt":"2018-04-27T15:33:50","guid":{"rendered":"http:\/\/www.ticeman.fr\/lecoutelas\/?p=5283"},"modified":"2018-07-10T19:34:07","modified_gmt":"2018-07-10T19:34:07","slug":"storyline-js-vos-graphiques-racontent-des-histoires","status":"publish","type":"post","link":"https:\/\/www.ticeman.fr\/lecoutelas\/?p=5283","title":{"rendered":"Storyline JS: vos graphiques racontent des histoires"},"content":{"rendered":"<p>Et encore un excellent service en provenance de Khnighlab, d\u00e9j\u00e0 responsable de <a href=\"http:\/\/www.ticeman.fr\/lecoutelas\/?p=488\" target=\"_blank\" rel=\"noopener\">Timeline JS<\/a>, <a href=\"http:\/\/www.ticeman.fr\/lecoutelas\/?p=4587\" target=\"_blank\" rel=\"noopener\">Juxtapose JS<\/a> et <a href=\"http:\/\/www.ticeman.fr\/lecoutelas\/?p=1920\" target=\"_blank\" rel=\"noopener\">Storymap<\/a>.Le principe est toujours le m\u00eame. A partir d&#8217;une feuille de calcul, les donn\u00e9es g\u00e9n\u00e8rent automatiquement une production interactive. ici, il s&#8217;agit de g\u00e9n\u00e9rer un graphique comment\u00e9 comme dans l&#8217;exemple ci-dessous.<\/p>\n<p><iframe loading=\"lazy\" style=\"width: 100%; height: 500px;\" src=\"https:\/\/cdn.knightlab.com\/libs\/storyline\/latest\/embed\/index.html?dataURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F12WbdwSK3hfkbgEK0jIzHKV--bmDrhohcS5P7r8EL5K4%2Fedit%23gid%3D0&amp;dataYCol=nominal&amp;dataXCol=ann%C3%A9e&amp;dataDateFormat=%25Y&amp;chartDateFormat=%25Y&amp;chartYLabel=Prix%20du%20baril&amp;sliderCardTitleCol=titre&amp;sliderCardTextCol=text\" width=\"100%\" height=\"500\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>Pour l&#8217;exemple, j&#8217;ai utilis\u00e9 les prix du baril de p\u00e9trole depuis 1946. Il suffit de cr\u00e9er une feuille de calcul contenant des ann\u00e9es, des donn\u00e9es, et des commentaires. Attention, il faut veiller \u00e0 ce qu&#8217;il y ait uniquement des ann\u00e9es et des donn\u00e9es. Le service ne traite pour le moment que deux entr\u00e9es. Peu importe le nom que vous donnez \u00e0 vos colonnes.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storuline-feuille.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5284\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storuline-feuille-300x135.png\" alt=\"\" width=\"300\" height=\"135\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storuline-feuille-300x135.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storuline-feuille-768x346.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storuline-feuille-1024x462.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storuline-feuille.png 1809w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><!--more--><\/p>\n<p>Il vous suffit ensuite de publier votre feuille de calcul sur le web. Une fois la publication effectu\u00e9e, vous copiez l&#8217;adresse de votre feuille et la collez \u00e0 l&#8217;endroit indiqu\u00e9.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-saisie.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5288\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-saisie-300x152.png\" alt=\"\" width=\"300\" height=\"152\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-saisie-300x152.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-saisie-768x390.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-saisie-1024x520.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-saisie.png 1814w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Il reste une \u00e9tape de param\u00e9trage. Il suffit d&#8217;indiquer au service quelle colonne contient quelles donn\u00e9es. Votre feuille \u00e9tant d\u00e9j\u00e0 li\u00e9e au service, il reconna\u00eet vos colonnes et vous propose de les s\u00e9lectionner dans une liste d\u00e9roulante.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-parametrs.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5289\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-parametrs-300x152.png\" alt=\"\" width=\"300\" height=\"152\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-parametrs-300x152.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-parametrs-768x389.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-parametrs-1024x519.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-parametrs.png 1808w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Il n&#8217;y a plus qu&#8217;\u00e0 valider et vous disposez alors des liens de partage. les modifications dans votre feuille appara\u00eetront automatiquement sur le graphique sans aucune manipulation de votre part.<\/p>\n<p><a  href=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-partage.png\" data-rel=\"lightbox-gallery-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5290\" src=\"http:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-partage-300x152.png\" alt=\"\" width=\"300\" height=\"152\" srcset=\"https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-partage-300x152.png 300w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-partage-768x390.png 768w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-partage-1024x520.png 1024w, https:\/\/www.ticeman.fr\/lecoutelas\/wp-content\/uploads\/2018\/04\/storyline-partage.png 1809w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Et Voil\u00e0. Le service est totalement gratuit et sans publicit\u00e9. Tout se passe sur la page d&#8217;accueil et il suffit de savoir saisir des donn\u00e9es.<\/p>\n<p>Lien: <a href=\"http:\/\/storyline.knightlab.com\/\" target=\"_blank\" rel=\"noopener\">Storyline JS<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Et encore un excellent service en provenance de Khnighlab, d\u00e9j\u00e0 responsable de Timeline JS, Juxtapose JS et Storymap.Le principe est toujours le m\u00eame.&hellip;<a href=\"https:\/\/www.ticeman.fr\/lecoutelas\/?p=5283\" class=\"more-link\"><span class=\"more-button\">Continuez la lecture<span class=\"screen-reader-text\">Storyline JS: vos graphiques racontent des histoires<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":5284,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,85],"tags":[],"class_list":["post-5283","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-presentations","category-presentations-sans-diapositives"],"_links":{"self":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/5283"}],"collection":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5283"}],"version-history":[{"count":5,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/5283\/revisions"}],"predecessor-version":[{"id":10530,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/posts\/5283\/revisions\/10530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=\/wp\/v2\/media\/5284"}],"wp:attachment":[{"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ticeman.fr\/lecoutelas\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}