<!DOCTYPE html>
<html>
<head>
<title>Gantt Chart Example 1</title>
<link type="text/css" href="http://mbostock.github.io/d3/style.css" rel="stylesheet" />
<link type="text/css" href="{{ url_for('static', filename= 'css/style.css') }}" rel="stylesheet" />
</head>
<body>
       <a id="forkme_banner" href="http://dk8996.github.io/Gantt-Chart/" target="_blank">View on GitHub</a>
       <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="http://static.mentful.com/gantt-chart-d3v2.js"></script>
	<script>var tasks = [];
        {% for b in test2 %}
            tasks.push({"startDate":new Date("{{ b[1].getStartTime() }}"),"endDate":new Date("{{ b[1].getEndTime() }}"),"taskName":"{{ b[0].name }}","status":"SUCCEEDED"})
        {% endfor %}
        
        
        var taskStatus = {
            "SUCCEEDED" : "bar",
            "FAILED" : "bar-failed",
            "RUNNING" : "bar-running",
            "KILLED" : "bar-killed"
        };
        
        var taskNames = [ "D Job", "P Job", "E Job", "A Job", "N Job" ];

        taskNames=[]
        {% for a in test2 %}
            taskNames.push("{{ a[0].name }}" )
        {% endfor %}
        

        tasks.sort(function(a, b) {
            return a.endDate - b.endDate;
        });
        var maxDate = tasks[tasks.length - 1].endDate;
        tasks.sort(function(a, b) {
            return a.startDate - b.startDate;
        });
        var minDate = tasks[0].startDate;
        
        var format = "%H:%M";
        
        var gantt = d3.gantt().taskTypes(taskNames).taskStatus(taskStatus).tickFormat(format);
        gantt(tasks);
         </script>
</body>
</html>