<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          var data = new google.visualization.DataTable();
          data.addColumn('datetime', 'Date');
          data.addColumn('number', 'Request count');
          data.addColumn('number', 'Average response time');

          data.addRows([
              {% for row in axis.data %}

              [
                  new Date("{{ row.0.ctime }}"),
                  {{ row.1 }},
                  {{ row.2 }}
              ]
              
              {% if not forloop.last %},{% endif %}
              {% endfor %}

          ]);

          var formatter = new google.visualization.DateFormat({pattern: 'HH:mm'});
          formatter.format(data, 0);

          var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
          chart.draw(data, {
              width: document.width - 30,
              height: window.innerHeight - 60,
              title: '{{ title|escapejs }}',
              series: {1: {targetAxisIndex: 1}},
              vAxes:[
                  {title: 'Requests count'}, // Nothing specified for axis 0
                  {title: 'Response time, s'} // Axis 1
              ]
          });
      }
    </script>
    <style>
      body { background-color: white; }
      p { margin-left: 70px; font-size: 0.8em; }
    </style>
  </head>

  <body>
    <div id="chart_div"></div>
    <p id="scales">Scale: 
    {% for scale in scales %}
    {% if scale == current_scale %}
    <strong>
    {% else %}
    <a href="?scale={{ scale }}">
    {% endif %}
    {{ scale }}
    {% if scale == current_scale %}
  </strong>
    {% else %}
    </a>
    {% endif %}
    {% if not forloop.last %} | {% endif %}
    {% endfor %}
  </p>
  </body>
</html>
