Данные из файла json для использования с временной шкалой CHAPS

Я пытаюсь использовать временную шкалу библиотеки ссылок CHAP (http://almende.github.io/chap-links-library/timeline.html).

В примере 17 используется JSON, но он находится в самом html-файле. Вместо этого я хотел бы использовать внешний файл JSON, находящийся на веб-сервере.

Вот мой пример.json:

{"timeline":[
    {
        "start":"2013,7,26",
        "end":"2013,7,26",
        "content": "Bleah1"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah2"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah3"
    },
    {
        "start":"2013,7,26",
        "end":"2013,8,2",
        "content": "Bleah4"
    }
]}

Я добавил это:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

А вот модифицированная функция:

        // Called when the Visualization API is loaded.
    function drawVisualization() {
        // Create a JSON data table

          $.getJSON('example.json', function(jsondata) {
                data = jsondata.timeline;
            });


        // specify options
        var options = {
            'width':  '100%',
            'height': '300px',
            'editable': true,   // enable dragging and editing events
            'style': 'box'
        };

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));

        function onRangeChanged(properties) {
            document.getElementById('info').innerHTML += 'rangechanged ' +
                    properties.start + ' - ' + properties.end + '<br>';
        }

        // attach an event listener using the links events handler
        links.events.addListener(timeline, 'rangechanged', onRangeChanged);

        // Draw our timeline with the created data and options
        timeline.draw(data, options);
    }

Любой, кто может сказать мне, что я делаю неправильно, получит печенье! :-)

Обновление: я должен указать, что он правильно отображает div временной шкалы, я просто не получаю никаких данных.


javascript json chap-links-library
person Josh    schedule 25.07.2013    source источник
comment
переместить });** непосредственно перед последним }   -  person dandavis    schedule 26.07.2013
comment
Спасибо @dandavis, но это, похоже, полностью его ломает. Вы имели в виду перемещение 3-й строки кода в функции вниз, чтобы она была предпоследней строкой? Возможно, я неправильно понял.   -  person Josh    schedule 26.07.2013
comment
вы хотите }); это завершает обратный вызов $.getJSON для растягивания до конца drawVisualization(), так что 90% drawVisualization — это сам обратный вызов с данными, которые вам нужны для рисования визуализации.   -  person dandavis    schedule 26.07.2013

Ответы (2)


arrow_upward
1
arrow_downward

Ваши даты начала и окончания должны быть проанализированы как объекты даты для использования на временной шкале.

person dps27a    schedule 19.11.2013
comment
Итак, для использования в вашем коде: $.getJSON('example.json', function(jsondata) { data = jsondata.timeline; foreach(data){ data.date = new Date(data.date); } }); - person dps27a; 10.10.2014

arrow_upward
1
arrow_downward

Я наткнулся на этот пост, когда реализовывал аналогичную функциональность.

В версии 2.6.1 timeline.js вокруг строки 3439, где объявлена ​​функция links.Timeline.Item, вы заметите комментарий, относящийся к реализации parseJSONDate.

/* TODO: use parseJSONDate as soon as it is tested and working (in two directions)
         this.start = links.Timeline.parseJSONDate(data.start);
         this.end = links.Timeline.parseJSONDate(data.end);
         */

Я включил предложенный код, и все работает!* (перейдите к функции parseJSONDate, чтобы узнать, какие форматы принимаются)

*(работает до тех пор, пока даты появляются на временной шкале. Я не использую, поэтому не тестирую какие-либо функции выбора/удаления, изображения или что-то в этом роде..)

person Tabloo Quijico    schedule 14.03.2014