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

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

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

Вот мой example.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); 
    }

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

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

источник

2013-07-25 Josh

move "}); **" как раз перед последним "}" – dandavis

Спасибо @dandavis, но похоже, что он полностью разбит , Вы имели в виду перемещение 3-й строки кода в функции до второй до последней строки? Возможно, я неправильно понял. – Josh

вы хотите "});" который завершает обратный вызов $ .getJSON, чтобы растянуть весь путь до конца drawVisualization(), так что 90% drawVisualization - это сам обратный вызов с данными, необходимыми для рисования. – dandavis

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

источник

2013-11-19 13:58:43 dps27a

Таким образом, для использования в вашем коде: $ .getJSON ('example.json', функция (jsondata) { данных = jsondata.timeline; Еогеасп (данные) { data.date = новая дата (data.date) ; } }); – dps27a

я наткнулся на этот пост, как я был реализации аналогичной функциональности.

В версии 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, чтобы увидеть, какие форматы принимаются)

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

источник

2014-03-14 12:13:31

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

ответ

Смежные вопросы