Hi Team
I have a working code, but i want to try if it can be possible i use bootstrap modal popup inside my timeline graph. The code works there are no bugs at all. Want to find a way to put my bootsrap modal popup form be place inside timeline graph(javascript library .ie visjs)
What I have tried:
<!--Bootstrap modal popup-->
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">POC</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">POC Document</h4>
</div>
<div class="modal-body">
<embed src="~/Content/Time-Line Application_POC.pdf"
frameborder="0" width="100%" height="400px">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
// visjs timeline javascript for graph
<h2>TimeLine</h2>
<title>Timeline
<body>
@section scripts{
<script type="text/javascript">
$(document).ready(function () {
const businessTime = {
start: '8:00',
end: '16:00'
}
$.ajax({
type: "GET",
url: "/checklist.json",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: ChartVis,
error: OnError
});
function ChartVis(response) {
function getTime(timeStr) {
const parsed = timeStr.match(/\/Date\((\d+)\)\
return Number(parsed[1]);
}
function getMinutes(timeStamp) {
dat = new Date(timeStamp);
return dat.getHours() * 60 + dat.getMinutes();
}
const _MS_PER_DAY = 1000 * 60 * 60 * 24;
function dateDiffInDays(a, b) {
const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / _MS_PER_DAY);
}
for (key in businessTime) {
const splitted = businessTime[key].split(':');
businessTime[key + 'Minutes'] = parseInt(splitted[0]) * 60 + parseInt(splitted[1]);
}
businessTime.minutesOneDay = businessTime.endMinutes - businessTime.startMinutes;
console.log(businessTime);
const data = response.map((item) => {
const
startTimestamp = getTime(item.Start_Date),
endTimestamp = getTime(item.Timestamp);
let
startMinutes = getMinutes(startTimestamp),
endMinutes = getMinutes(endTimestamp);
if (startMinutes < businessTime.startMinutes) {
startMinutes = businessTime.startMinutes;
}
if (endMinutes > businessTime.endMinutes) {
endMinutes = businessTime.endMinutes;
}
const
amountFirstDay = businessTime.endMinutes - startMinutes,
amountLastDay = endMinutes - businessTime.startMinutes;
diffDays = dateDiffInDays(new Date(startTimestamp), new Date(endTimestamp));
let totalMinutes;
if (diffDays > 0) {
totalMinutes = amountFirstDay + diffDays * businessTime.minutesOneDay + amountLastDay;
} else {
totalMinutes = endMinutes - startMinutes;
}
console.log(totalMinutes);
let min = totalMinutes % 60;
if (min < 10) min = '0' + min;
const hours = Math.floor(totalMinutes / 60),
totalHours = '' + hours + ':' + min;
console.log(totalHours);
return {
id: item.Incident,
start: startTimestamp,
end: endTimestamp,
content: item.Description + '<br>Took ' + totalHours + ' hours'
};
});
console.log(data);
var container = document.getElementById('visualization');
var items = new vis.DataSet(data);
var options = {};
var timeline = new vis.Timeline(container, items, options);
}
function OnError(response) {
alert("Error !");
}
})
</script>
}
<div id="visualization"></div>
</body>