<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FlaskBlog</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['timeline']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
              var container = document.getElementById('chart_div');
              var chart = new google.visualization.Timeline(container);
              var data = new google.visualization.DataTable();
              data.addColumn({ type: 'string', id: 'President' });
              data.addColumn({ type: 'string', id: 'President2' });
              data.addColumn({ type: 'date', id: 'Start' });
              data.addColumn({ type: 'date', id: 'End' });
    
  
        data.addRows([
        ['Normal flow','Normal flow',new Date("{{ startSlut[0][0].getMedianDag(0,30,2)[0] }}"),new Date("{{ startSlut[1][0].getMedianDag(0,30,2)[0] }}")],
        {% for job in test  %}
          ['{{ job.name }}','{{ job.name }}',new Date("{{ job.getMedianDag(0,30,2)[0] }}"),new Date("{{ job.getMedianDag(0,30,2)[1] }}")],
        {% endfor %}
        ]);
        var calHeight = data.getNumberOfRows() * 45
        var options = {
            height: calHeight, 
            timeline: { groupByRowLabel: true }
          };
  
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
  </html>