personal-course/app/views/admin/courses/analysis.html.erb

<% # encoding: utf-8 %>
<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
  <%= stylesheet_link_tag "lib/main-list" %>
  <%= stylesheet_link_tag "lib/main-form-col2" %>
  <style>
  	.graph-type {
  		margin-right: 10px !important;
  	}
  	.analysis-show-area{
  		margin-top: 25px;
  	}
  	.role {
  		margin: 15px auto;
  		width: 90%;
  		height: 400px;
  	}
  	.role h3{
  		border-bottom: 1px solid #000;
  	}
  	.role .graph-area{
  		text-align: center;
  	}
  	.role .graph-area .loader {
  		margin-top: 170px;
  	}
  </style>
<% end %>
<% content_for :page_specific_javascript do %>
	<%= javascript_include_tag "//www.google.com/jsapi", "chartkick"%>
	<%= javascript_include_tag "justgage.1.0.1.min" %>
	<%= javascript_include_tag "raphael.2.1.0.min" %>
	<%= javascript_include_tag "validator" %>
<% end %>
<div id="analysis-area">
	<div class="analysis-form">
		<form id="analysis-form" action="" class="form-horizontal main-forms">
			<div class="input-area">
				<div class="control-group input-title">
          			<label class="control-label muted"><%= t("personal_course.year") %> : </label>
          			<div class="controls">
          				<%= select_year(DateTime.now.year - 5, {:start_year => DateTime.now.year, :end_year => 1950}, {:name => 'start_year', :class => "span1"} ) %>
							-
          				<%= select_year(DateTime.now.year, {:start_year => DateTime.now.year, :end_year => 1950}, {:name => 'end_year', :class => "span1"} ) %>
					</div>
				</div>
				<div class="control-group input-title">
          			<label class="control-label muted"><%= t("personal_course.graph_by") %> : </label>
          			<div class="controls">
          				<%= t("personal_course.course_semester") %> <input type="radio" name="graph_by" class="graph-type" value="semester"> 
          				<%= t("personal_course.course_category") %> <input data-fv-validation="required;" data-fv-messages="Please select atleast one.;" type="radio" name="graph_by" class="graph-type" value="category"> 
          			</div>
          		</div>
			</div>
			<div class="form-actions">
				<button id="generate_graph" class="btn btn-info">Graphs</button>
				<a href="" id="generate_excel" class="btn btn-primary">Export</a>
			</div>
		</form>
	</div>
	<div class="analysis-show-area hide in">
		<% Role.where(:disabled => false, :title.ne => "", :title.ne => nil).asc(:key).each do |role| %>
			<div class="role muted" data-role-id="<%= role.id.to_s %>">
				<h3><%= role.title %></h3>
				<div class="graph-area">
					<img class="loader" src="/assets/preloader.gif" alt="loading" width="70" height="70">
				</div>
			</div>
		<% end %>
	</div>
</div>
<script type="text/javascript">
	var form = new FormValidator($("#analysis-form")),
		roleArea = $("#analysis-area .analysis-show-area"),
		totalRoles = roleArea.find(".role").length;
	form.form.on("submit",function(){return false;})
	
	$("#generate_excel").on("click",function(){
		window.location.href = "/admin/courses/download_excel.xlsx?" + "year_start=" + form.form.find("select[name=start_year]").val() + "&year_end=" + form.form.find("select[name=end_year]").val();
		return false;
	})

	$("#generate_graph").on("click",function(){
		if(form.isFormValidated()){
			generateCharts(0);
			roleArea.removeClass("hide");
		}
		return false;
	})

	var generateCharts = function(index){
		var role = roleArea.find(".role").eq(index);
		$.ajax({
			url : "/admin/courses/analysis_report",
			data : {"role_id" : role.data("role-id"), "year_start" : form.form.find("select[name=start_year]").val(), "year_end" : form.form.find("select[name=end_year]").val(), "graph_by" : form.form.find("input[name=graph_by]:checked").val()},
			type : "get",
			dataType : "html"
		}).done(function(html){
			role.find(".graph-area").html(html);
			if(index < totalRoles){
				generateCharts(index + 1);
			}
		}).error(function(){
			role.find(".graph-area").html("There was an error loading this graph.");
			if(index < totalRoles){
				generateCharts(index + 1);
			}
		})
	}
</script>