Testing the functionality of this HTML page by creating a dummy JSON file, but encountering an issue with loading the data via AJAX request. The specific error message received is:
Uncaught ReferenceError: data is not defined.
Struggling to call and integrate the JSON file within the HTML page despite various attempts. Referenced this source for guidance: view-source
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Matter Timeline</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<!-- load handlebars for templating, and create a template -->
<script src="dist/handlebars-v4.0.11.js"></script>
<script id="item-template" type="text/x-handlebars-template">
{{target}}
<font color="#229954"><b>{{status_green}}</b></font>
<font color="#A93226"><b>{{status_red}}</b></font>
<br/>
<font size="2" color="#2874A6">{{action}}</font>
<font size="2" color="#2874A6"><i>{{user}}</i></font> <br/>
<span class="tooltip-date">{{datetime}}</span>
</script>
<script src="dist/vis.js"></script>
<link href="dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<script>
function resettimeline() {
document.location.reload();
};
</script>
</head>
<body>
<p>
<center><h2>Matter Timeline</h2></center>
</p>
<div id="visualization"></div>
<script type="text/javascript">
var groups = new vis.DataSet([
{id: 0, content: 'Process/Task', value: 1},
{id: 1, content: 'Req/Matter/Doc', value: 2}
]);
var source = document.getElementById('item-template').innerHTML;
var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
$.ajax({
url: 'http://127.0.0.1:8887/data.json',
dataType: "json",
success: function(data) {
//handle you data here
}
});
// create visualization
var container = document.getElementById('visualization');
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
orientation: {
axis: 'top',
item: 'top'
},
height: "85vh",
template: template
//timeAxis: {scale: 'day', step:3}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(data);
timeline.on('doubleClick', function (properties) {
window.open('the_doc_url',
'newwindow',
'width=1000,height=600');
return false;
});
</script>
<br/>
<a href="javascript:resettimeline()">Fit to Width</a>
</body>
</html>
data.json
{
"data": [
{
id: 1, group: 0,
target: 'Request',
action: 'from',
user: 'SAS',
datetime: '7/10',
title: '<span class="tooltip-date">Date: 7/10/2017 09:00</span><br/>Req ID: R123',
start: new Date(2017,9,7, 9,0,0,0)
},
{
id: 2, group: 0,
target: 'Request',
action: 'by',
user: 'Alice',
datetime: '8/10',
title: '<span class="tooltip-date">Date: 8/10/2017 13:34</span><br/>Req ID: R123',
start: new Date(2017,9,8, 12,30,0,0)
}
]
}