title: Loading dynamically created JSON into TimelineJS
body: <p>I'm trying to load a dynamically created JSON object into TimelineJS and cannot find out what's wrong with the following code. Whenever I output the object to the console I get the right JSON file. Copying it from the console, and then loading it into TimelineJS works, but whenever I try to load it straight into TimelineJS it does not work. See JSFiddle here:  <a href="http://jsfiddle.net/xited/Y5hBk/6/" rel="nofollow">http://jsfiddle.net/xited/Y5hBk/6/</a> </p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="my-timeline"&gt;&lt;/div&gt;
  &lt;button id='myBtn'&gt;start&lt;/button&gt;
  </code></pre>
  
  <p>JS Code:</p>
  
  <pre><code>$('#myBtn').click(function() {
       makeJson();
  });
  
  
  function loadData(json){
          createStoryJS({
          type:       'timeline',
          width:      '800',
          height:     '600',
          source:     json,
          embed_id:   'my-timeline'
      });
  }
  
  function makeJson(){
      //create timeline json object
      var jsonObj = function(timeline){
          this.timeline=timeline;
      }
  
      var timelineObj = function (headline, type, text, date, era)
      {
          this.headline=headline;
          this.type=type;
          this.text=text;
          this.date=date;
          this.era=era;
      }
  
      var dates= new Array();
  
      var dateObj =  function(startDate, endDate, headline, text, tag)
              {
                  this.startDate=startDate;
                  this.endDate=endDate;
                  this.headline=headline;
                  this.text=text;
                  this.tag=tag;
              }
  
      var eras = new Array();
  
      var eraObj= function(startDate, endDate, headline, text, tag)
      {
              this.startDate=startDate;
              this.endDate=endDate;
              this.headline=headline;
              this.text=text;
              this.tag=tag;
          }
  
      var data = [['Animal','Food','Qty','Begin Date','End Date'],
                  ['deer','grass','430','1/1/2014','1/5/2014'],
                  ['cat','fish','20','2/1/2014','7/5/2014'],
                  ['eagle','mice','100','3/1/2014','9/1/2014']];
  
      //get position of an element from the data array
      var pos = function (el){
          var colHeaders = data[0]; // reading header row
          return colHeaders.indexOf(el) //return position of el
      }
  
      for (var i=1; i&lt;data.length; i++){
          beginDate=data[i][pos('Begin Date')];
          endDate=data[i][pos('End Date')];
          headline=data[i][pos('Animal')];
          text=data[i][pos('Food')];
          tag=data[i][pos('Qty')];
          var projectDate = new dateObj(beginDate,endDate,headline,text,tag);
          dates.push(projectDate);
      }
  
      var swEra = new eraObj('2000','2020','era headline','era text','era tag');
      eras.push(swEra);
  
      //build json obj
      var swTimeline = new timelineObj(
          'A New Timeline',
          'default',
          '&lt;p&gt;This is a paragraph.&lt;/p&gt;',
          dates,
          eras);
  
  
      var jsonTimeline = new jsonObj(swTimeline);
  
      //stringifying the json object
      jsonTimeline = JSON.stringify(jsonTimeline);
      console.log(jsonTimeline);
  
      loadData(jsonTimeline);
  }
  </code></pre>