{% extends "base.html" %}
{% load i18n %}
{% load display_functions %}
{% block extra_scripts %}
	<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	<script type="text/javascript">

	// Load the Visualization API and the piechart package.
	google.load('visualization', '1.0', {'packages':['corechart']});

	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(drawChart);
	function drawChart() {

		var data = new google.visualization.DataTable();
		data.addColumn('string', "{% trans 'Date' %}");
		data.addColumn('number', "{% trans 'Total' %}");
		data.addColumn('number', "{% trans 'Page completed' %}");
		data.addColumn('number', "{% trans 'Quiz completed' %}");
		data.addColumn('number', "{% trans 'Media viewed' %}");
		data.addColumn('number', "{% trans 'Resources viewed' %}");
		data.addRows( {{ data|length }} );
		
		{% for date,activity in data %}
			data.setValue({{ forloop.counter0 }},0,'{{ date }}');
			data.setValue({{ forloop.counter0 }},1,{{ activity.total }});
			data.setValue({{ forloop.counter0 }},2,{{ activity.page }});
			data.setValue({{ forloop.counter0 }},3,{{ activity.quiz }});
			data.setValue({{ forloop.counter0 }},4,{{ activity.media }});
			data.setValue({{ forloop.counter0 }},5,{{ activity.resource }});
		{% endfor %}

        var chart = new google.visualization.LineChart(document.getElementById('attempts_chart_div'));
        chart.draw(data, {	width: "100%", 
                			height: 400,
                			vAxis: {title: "{% trans 'No. attempts' %}"},
                			pointSize:5,
                			chartArea:{left:50,top:50,width:"70%",height:"70%"},
                			backgroundColor: 'transparent',
                			legend: {position:'right'}
							});
      }
</script>
{% endblock extra_scripts %}
{% block content %}

<h2>{{ course.title|title_lang:LANGUAGE_CODE }}</h2>
<p><i>{% trans 'Tags:' %} {{ course.get_tags}}</i></p>
	
<h3>{% trans 'courses_recent_activity' %}</h3>
<div id="attempts_chart_div" class="graph">{% trans 'graph_generating'%}</div>

{% if leaderboard %}
<h3>{% trans 'home_leaderboard' %}</h3>
{% include "oppia/includes/leaderboard.html" %}
{% endif %}
{% endblock %}