I'm building a Flask app that will display a timeline. I've decided to use vis.js since it's flexible. I render my template HTML page and call an API endpoint using AJAX GET to retrieve the JSON object of items for the timeline. I want to render this JSON object in the timeline but it just doesn't want to render the chart.
Any help will be appreciated.
My seq of events
json.dumps(_list)JSON Object returned in AJAX call:
[{"id": 1, "content": "My label 1", "start": "2022-05-26T14:18:27Z"},
{"id": 2, "content": "My label 2", "start": "2022-05-26T12:51:20Z"},
{"id": 3, "content": "My label 3", "start": "2022-05-26T12:51:05Z"}]
API Endpoint compiling function:
i = 0
_cursor = db.collection.find({}).sort([("timestamp", pymongo.DESCENDING)]) #timestamp is millisec epoch unix time
for item in _cursor:
_temp_dict['id'] = int(i)
_temp_dict['content'] = str(item['name'])
_temp_dict['start'] = str(datetime.fromtimestamp(int(item['timestamp'])/1000).strftime('%Y-%m-%dT%H:%M:%SZ'))
_temp_list.append(_temp_dict)
_temp_dict = {}
return json.dumps(_temp_list)
My AJAX call and Timeline build:
$(document).ready(function() {
$.fn.dataTable.ext.errMode = 'none';
$.ajax({
type: 'GET',
url : '/api/datamine/timeline',
dataType: "json",
success:function(data){
console.log("Data: " + data + "\nStatus: " + status);
var result = JSON.stringify(data);
var container = document.getElementById('visualization');
var items = new vis.DataSet(result);
var options = {};
var timeline = new vis.Timeline(container, items, options);
}
});
The timeline will not build. My console.log where I print the JSON object looks like this.
Data: [object Object],[object Object],[object Object],[object Object],[object Object]