Uncaught TypeError: Невозможно прочитать свойство 'length' undefined в chronoline.js

Question

js. Я заполняю Datas Using Loop, анализирую json и даю действительный ввод этого плагина. Но я получаю ошибку в этом. Я просто добавление событий из функции sbuilder() -> После того, как населения, я просто Давать ДАННЫЕ для конкретного плагина переменных событий

Мой код:

$(document).ready(function() { 
     thirdtimeliner(); 
    });  

    function sbuilder() { 
     var str = ""; 
     var i = 0; 
     var today = new Date(); 
     var date = today.getDate(); 
     for (i; i <= date; i++) { 
      str = str.concat("{dates:[new Date(2014,1," + i + ")] , title:'5GB', section:0 , attrs:{fill:'#468847',stroke:'#468847'}},"); 
     } 
     var json = str.substring(0, str.length - 1); 
     var events = "[" + json + "]"; 
     return events; 
    } 


    function thirdtimeliner() { 
     var strin = sbuilder(); 
       alert(strin); 
       var eventsr = JSON.stringify(eval("(" + strin + ")"));   
       alert(eventsr); 

       var events = eventsr; 
     var sections = [ 
       { dates: [new Date(2014, 1, 1), new Date(2014, 1, 12)], 
        title: "2014 Status", 
        section: 0, 
        attrs: { fill: "#dff0d8" }, 
        draggable: true 
       }, 
       { dates: [new Date(2014, 1, 10), new Date(2014, 1, 11)], 
        title: "2GB", 
        section: 0, 
        attrs: { fill: "#dff0d8" }, 
        draggable: true 
       }, 
       { dates: [new Date(2014, 1, 11), new Date(2014, 1, 12)], 
        title: "2GB", 
        section: 0, 
        attrs: { fill: "#dff0d8" }, 
        draggable: true 
       }, 
       { dates: [new Date(2014, 1, 12), new Date(2014, 1, 13)], 
        title: "processing..", 
        section: 0, 
        attrs: { fill: "#FFDE00" }, 
        draggable: true 
       }, 
       { dates: [new Date(2014, 0, 1), new Date(2014, 1, 8)], 
        title: "2014 Status", 
        section: 0, 
        attrs: { fill: "#ccc" }, 
        draggable: true 
       } 
      ]; 


     var timeline1 = new Chronoline(document.getElementById("target1"), events, 
    { animated: true, 
     tooltips: true, 
     defaultStartDate: new Date(), 
     sections: sections, 
     sectionLabelAttrs: { 'fill': '#997e3d', 'font-weight': 'bold' } 
    }); 

    } 

Ожидаемый результат:

Answer 1

Проблема с переменной событий. Вы отправляете события как строку (но chronoline нужен объект массива).

var timeline1 = new Chronoline(document.getElementById("target1"), events, 
{ animated: true, 
    tooltips: true, 
    defaultStartDate: new Date(), 
    sections: sections, 
    sectionLabelAttrs: { 'fill': '#997e3d', 'font-weight': 'bold' } 
}); 

Однако в chronoline.js события рассматривается как массив

for(var i = 0; i < events.length; i++){ 
    for(var j = 0; j < events[i].dates.length; j++){ 
     events[i].dates[j] = new Date(events[i].dates[j].getTime()); 
     events[i].dates[j].stripTime(); 
    } 
} 

и струной события вы посылаете будет выглядеть

"[{"dates":["2014-01-30T18:30:00.000Z"],"title":"5GB","section":0,"attrs": {"fill":"#468847","stroke":"#468847"}},...]" 

Так события [0] является ' [', события [1] - это' {', события [2] -' '', события [3] - 'd' и т. д. ...

В вашем случае события [i] .date undefi Нед, так что вы получаете ошибку

Cannot read property 'length' of undefined 

Пожалуйста, проверьте код и отправить правильный массив объектов

Answer 2

Заменить код с этим.

$(document).ready(function() { 
    thirdtimeliner(); 
});  

function sbuilder() { 
    var array = new Array(); 
    var i = 0; 
    var date = new Date().getDate(); 
    for (i; i <= date; i++) { 
     array.push({dates:[new Date(2014,1,i)] , title:'5GB', section:0 , attrs:{fill:'#468847',stroke:'#468847'}}); 
    } 
    return array; 
} 

function thirdtimeliner() { 
    var events = sbuilder(); 

    var sections = [ 
      { dates: [new Date(2014, 1, 1), new Date(2014, 1, 12)], 
       title: "2014 Status", 
       section: 0, 
       attrs: { fill: "#dff0d8" }, 
       draggable: true 
      }, 
      { dates: [new Date(2014, 1, 10), new Date(2014, 1, 11)], 
       title: "2GB", 
       section: 0, 
       attrs: { fill: "#dff0d8" }, 
       draggable: true 
      }, 
      { dates: [new Date(2014, 1, 11), new Date(2014, 1, 12)], 
       title: "2GB", 
       section: 0, 
       attrs: { fill: "#dff0d8" }, 
       draggable: true 
      }, 
      { dates: [new Date(2014, 1, 12), new Date(2014, 1, 13)], 
       title: "processing..", 
       section: 0, 
       attrs: { fill: "#FFDE00" }, 
       draggable: true 
      }, 
      { dates: [new Date(2014, 0, 1), new Date(2014, 1, 8)], 
       title: "2014 Status", 
       section: 0, 
       attrs: { fill: "#ccc" }, 
       draggable: true 
      } 
     ]; 


    var timeline1 = new Chronoline(document.getElementById("target1"), events, 
{ animated: true, 
    tooltips: true, 
    defaultStartDate: new Date(), 
    sections: sections, 
    sectionLabelAttrs: { 'fill': '#997e3d', 'font-weight': 'bold' } 
}); 

} 

Надеюсь, что это сработает. :)