<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script>

google.load('visualization', '1', { callback: drawChart, packages: ['corechart'] });
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Time');
    data.addColumn('number', 'Players');
 
    data.addRows(players);

    var options = {
    //curveType: 'function', still haven't decided on this
    height: 300,
    legend: {position: 'none'},
    enableInteractivity: true,
    chartArea: {
      width: '93%'
    },
    vAxis: {
        title: 'Players',
        gridlines: { count: 7 },
        viewWindowMode: 'explicit',
        viewWindow: {
            min: 0,
            max: 18 // for iw4
        },
    },
    hAxis: {
      viewWindow: {
        //min: players[0][0], no longer needed as timeline adjusts automatically
        //max: players[players.length-1][0] // ditto
      },
      gridlines: {
        count: 12,
        units: {
          days: {format: ["MMM dd"]},
          hours: {format: ["HH:mm", "ha"]},
        }
      },
      minorGridlines: {
          count: 5,
        units: {
          hours: {format: ["hh:mm:ss a", "ha"]},
          minutes: {format: ["HH:mm a Z", ":mm"]}
        }
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
 </script>