{"id":2089,"date":"2014-07-07T08:52:52","date_gmt":"2014-07-07T13:22:52","guid":{"rendered":"http:\/\/www.danielpradilla.info\/blog\/?p=2089"},"modified":"2015-04-07T16:51:08","modified_gmt":"2015-04-07T21:21:08","slug":"how-to-create-an-embeddable-timeline-chart","status":"publish","type":"post","link":"https:\/\/www.danielpradilla.info\/blog\/how-to-create-an-embeddable-timeline-chart\/","title":{"rendered":"How to create an embeddable timeline chart"},"content":{"rendered":"\n<div id=\"timeline-embed\"><\/div>\n<p>    <script type=\"text\/javascript\">\n      var timeline_config = {\n       width: \"100%\",\n       height: \"600\",\n       source: '\/resources\/TimelineJS\/data.json',\n       font:\t'SansitaOne-Kameron',\n       embed_id:   'timeline-embed'\n      }\n    <\/script><br \/>\n    <script type=\"text\/javascript\" src=\"\/resources\/TimelineJS\/js\/storyjs-embed.js\"><\/script><\/p>\n<p>The other day, web developer friend asked me how to create and insert a timeline into WordPress. He actually wanted to put an interactive timeline with links, images and video on the homepage of a news site.<\/p>\n<p>I checked out several options out there and settled on <a href=\"http:\/\/timeline.knightlab.com\/\" target=\"_blank\">TimelineJS<\/a>. You can create timeline charts directly on their web site. Each story in the timeline has to be loaded as rows in a google spreadsheet.\u00a0You can enrich each of the &#8220;steps&#8221; or events with links, videos and pictures and everything&#8217;s\u00a0stupid-easy to use.<\/p>\n<p>At the end you get an iframe embedding code that you can copy and paste to your site. But they even have a <a href=\"https:\/\/github.com\/NUKnightLab\/TimelineJS-Wordpress-Plugin\" target=\"_blank\">WordPress plugin<\/a>\u00a0for that. There&#8217;s even other developers who have created <a href=\"http:\/\/embed.verite.co\/timeline\/generator.html\" target=\"_blank\">alternative tools based on TimelineJS<\/a> that allow you to play with more settings.<\/p>\n<p>So if you ever need a quick and dirty solution to build a timeline and tell a story, <a href=\"http:\/\/timeline.knightlab.com\/\" target=\"_blank\">look no further<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p>Now, if you&#8217;re a developer and you want a proper, scalable and maintainable solution, that&#8217;s another story.<\/p>\n<p>In the case of my friend, depending on an external site for such a crucial part of a website\u00a0is not a good idea. What if these guys decide to abandon the product (hope not!)? What if their site goes off-line? My friend\u00a0may lose his content temporarily or permanently. It&#8217;s not maintained by him, it&#8217;s not hosted by him, it&#8217;s not backed up by him.\u00a0His\u00a0content it&#8217;s not his.<\/p>\n<p>So, the correct solution is to find a way to self-host a similar solution.<\/p>\n<p>Fortunately and amazingly, <a href=\"https:\/\/github.com\/NUKnightLab\/TimelineJS\" target=\"_blank\">TimelineJS is an open source tool and it&#8217;s on GitHub<\/a>. If you&#8217;re a developer like my friend, you can download the source code, copy it to your server and that&#8217;s it. You&#8217;ll have a fledged timeline builder in minutes.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The other day, web developer friend asked me how to create and insert a timeline into WordPress. He actually wanted to put an interactive timeline with links, images and video on the homepage of a news site. I checked out several options out there and settled on TimelineJS. You can create timeline charts directly on&hellip; <a class=\"more-link\" href=\"https:\/\/www.danielpradilla.info\/blog\/how-to-create-an-embeddable-timeline-chart\/\">Continue reading <span class=\"screen-reader-text\">How to create an embeddable timeline chart<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[172,171,331],"tags":[198,197],"class_list":["post-2089","post","type-post","status-publish","format-standard","hentry","category-projectmanagement-en","category-sales","category-software-development-en-en","tag-charts","tag-visualization","entry"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1tlzy-xH","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1638,"url":"https:\/\/www.danielpradilla.info\/blog\/stackexchange\/","url_meta":{"origin":2089,"position":0},"title":"Encuentra la respuesta y busca trabajo en Stack Exchange","author":"Daniel Pradilla","date":"25\/04\/2011","format":false,"excerpt":"Creemos que la Internet es lo suficientemente grande y Google lo suficientemente poderoso como para encontrar respuestas para todo. Pero si tu trabajo es bastante espec\u00c3\u00adfico, ya sabr\u00c3\u00a1s que esto nunca se cumple. En agosto de 2008, Joel Spolsky y Jeff Atwood lanzaron el mejor sitio de preguntas y respuestas\u2026","rel":"","context":"In &quot;Control de Proyectos&quot;","block_context":{"text":"Control de Proyectos","link":"https:\/\/www.danielpradilla.info\/blog\/category\/controldeproyectos\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/danielpradilla.info\/blog\/wp-content\/uploads\/2011\/04\/stack_exchange_logo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1853,"url":"https:\/\/www.danielpradilla.info\/blog\/how-to-create-effective-presentations\/","url_meta":{"origin":2089,"position":1},"title":"How to create effective presentations","author":"Daniel Pradilla","date":"02\/01\/2013","format":false,"excerpt":"Aaaand off to a bad start Most people that lead a professional life need to do presentations on a regular basis. Which is why it never seizes to amaze me that, consistently, almost all of the presentations that I see, suck. Leaving halfway through the presentation really doesn't solve anything.\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2010\/10\/worst_powerpoint_ever.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1893,"url":"https:\/\/www.danielpradilla.info\/blog\/nterface-design\/","url_meta":{"origin":2089,"position":2},"title":"Stop punishing your users and learn some design fundamentals","author":"Daniel Pradilla","date":"14\/01\/2013","format":false,"excerpt":"One thing that never ceases to amaze me is how bad in-house enterprise applications look and behave: clashing color combinations, buttons that don't respond to clicks, messy forms, elements that look like links but aren't, inconsistent non-standard controls, no user feedback whatsoever, ugly reports, you know the drill. It's even\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"usability_testing","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/01\/usability_testing.jpeg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1942,"url":"https:\/\/www.danielpradilla.info\/blog\/how-to-organize-your-workspace\/","url_meta":{"origin":2089,"position":3},"title":"How to organize your workspace","author":"Daniel Pradilla","date":"22\/04\/2013","format":false,"excerpt":"For me, clutter is the main cause of unproductiveness. It generates distractions, makes you feel uncomfortable and in my case, the idea that I eventually have to organize my workspace stresses me out. Jason Fitzpatrick, at Lifehacker, tells us how he did an extreme office makeover, with useful links for\u2026","rel":"","context":"In &quot;Lifestyle&quot;","block_context":{"text":"Lifestyle","link":"https:\/\/www.danielpradilla.info\/blog\/category\/lifestyle\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2011\/05\/2541710549_e7b9260aa5.jpeg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1557,"url":"https:\/\/www.danielpradilla.info\/blog\/como-steve-jobs-transforma-clientes-en-fanaticos\/","url_meta":{"origin":2089,"position":4},"title":"C\u00c3\u00b3mo Steve Jobs transforma clientes en fan\u00c3\u00a1ticos","author":"Daniel Pradilla","date":"04\/01\/2011","format":false,"excerpt":"Roger Dooley, en Neuromarketing, hace un recuento del experimento de identidad social del psic\u00c3\u00b3logo Henri Tajfel (Social categorization and intergroup behaviour), sobre c\u00c3\u00b3mo la gente puede desarrollar lealtades basadas en las diferencias m\u00c3\u00a1s triviales. Dooley se apoya en la narrativa de Steve Jobs y de los comerciales de Apple para\u2026","rel":"","context":"In &quot;Ventas&quot;","block_context":{"text":"Ventas","link":"https:\/\/www.danielpradilla.info\/blog\/category\/ventas\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2010\/10\/apple-us-vs-them.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2302,"url":"https:\/\/www.danielpradilla.info\/blog\/aws-lambda-python\/","url_meta":{"origin":2089,"position":5},"title":"10 things I learned while deploying my first python function to AWS Lambda","author":"Daniel Pradilla","date":"04\/01\/2019","format":false,"excerpt":"I spent a few days on and off trying to deploy a Flask REST service to AWS Lambda, just to experience what the cool kids were talking about. These are some of the things I learned along the way: \u00a0 Zappa is the easiest packager\/deployer for python (as of December\u2026","rel":"","context":"In &quot;Software Dev.&quot;","block_context":{"text":"Software Dev.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/software-development-en-en\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2019\/01\/AWS-Lambda-290x300.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/2089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/comments?post=2089"}],"version-history":[{"count":0,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/2089\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/media?parent=2089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/categories?post=2089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/tags?post=2089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}