testmycode/tmc-server

<h1>Submissions for <%= @course.title %></h1>

<% if [@start_time.hour, @start_time.min, @end_time.hour, @end_time.min].all? {|x| x == 0 } %>
  <h2><%= @start_time.strftime("%d.%m.%Y") %> &mdash; <%= @end_time.strftime("%d.%m.%Y") %></h2>
<% else %>
  <h2><%= @start_time.strftime("%d.%m.%Y %H:%M") %> &mdash; <%= @end_time.strftime("%d.%m.%Y %H:%M") %></h2>
<% end %>

<div id="chart-container"></div>

<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 startTime = new Date(<%= @start_time.to_i * 1000 %>);
    var endTime = new Date(<%= @end_time.to_i * 1000 %>);
    var timeUnit = '<%= j(@time_unit) %>';

    <%
      json_args = {
        :start_time => @start_time,
        :end_time => @end_time,
        :time_unit => @time_unit
      }
      json_path = organization_course_stat_path(@organization, @course, 'submissions', json_args)
    %>

    $.getJSON('<%= raw json_path %>', function(data) {

      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn('datetime', 'Time');
      dataTable.addColumn('number', 'Count');
      dataTable.addColumn({type: 'string', role: 'tooltip'});

      var dateFormatter = new google.visualization.DateFormat({
        pattern: 'EEE dd.MM.yyyy HH:mm'
      });
      dateFormatter.format(dataTable, 0);

      var options = {
        width: 1200,
        height: 600,
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Submissions per ' + timeUnit,
          minValue: 0
        },
        legend: 'none'
      };

      var chart = new google.visualization.AreaChart(document.getElementById('chart-container'));

      var timeUnitGetter = ({
        'minute': 'getMinutes',
        'hour': 'getHours',
        'day': 'getDate'
      })[timeUnit];
      var timeUnitSetter = ({
        'minute': 'setMinutes',
        'hour': 'setHours',
        'day': 'setDate'
      })[timeUnit];

      $.each(data, function (i, count) {
        var offset = startTime[timeUnitGetter]() + i;
        var start = new Date(startTime);
        start[timeUnitSetter](offset);

        var end = new Date(startTime);
        end[timeUnitSetter](offset + 1);
        if (timeUnit != 'minute') {
          end.setSeconds(end.getSeconds() - 1);
        }

        var tooltip = count + " submissions between\n" +
                dateFormatter.formatValue(start) + " and " + dateFormatter.formatValue(end);

        dataTable.addRow([start, count, tooltip]);
      });
      chart.draw(dataTable, options);
    });
  }
</script>