nus-mtp/cs-modify

$def with (year_of_study_count, focus_area_count)

$var title:View Student Enrollment
$ home = ['/', 'Home']
$ enrolInfo = ['#', 'Student Enrollment Information']

$var hierarchy = [home, enrolInfo]

<script type="text/javascript">
    var year_of_study_bar_values = [];
$for i in range(len(year_of_study_count)):
    year_of_study_bar_values.push({y: $year_of_study_count[i][1], label: "Year "+"$year_of_study_count[i][0]"});

    var year_of_study_pie_values = [];
$for i in range(len(year_of_study_count)):
    year_of_study_pie_values.push({y: $year_of_study_count[i][1], name: "Year "+"$year_of_study_count[i][0]"});

    var focus_area_bar_values  = [];
$for i in range(len(focus_area_count)):
    focus_area_bar_values.push({y: $focus_area_count[i][1], label: "$focus_area_count[i][0].replace('&', 'and')"});

      var focus_area_pie_values  = [];
$for i in range(len(focus_area_count)):
    focus_area_pie_values.push({y: $focus_area_count[i][1], name: "$focus_area_count[i][0].replace('&', 'and')"});  
</script>
<script type="text/javascript" src="static/javascripts/studentEnrollment.js"></script>

<div class="container-fluid">
    <h1 class="text-center"><b>Student Enrollment Information</b></h1>
    <hr>
    <div class="row" id="enrollment-student-year-header">
        <h2 class="text-center">Student Enrollment by Year of Study</h2>
    </div>
    <div class="row enrollment-chart-button-container">
        <button class="btn btn-primary enrollment-chart-button" id="enrollment-student-year-pie-chart-button" onclick="showStudentYearPieChart();">
            Pie Chart</button>
        <button class="btn btn-primary enrollment-chart-button active" id="enrollment-student-year-bar-chart-button" onclick="showStudentYearBarChart();">Bar Chart</button>
    </div>
    <div class="row">
        <div id="enrollment-student-year-bar-chart" class="col-md-12"></div>
        <div id="enrollment-student-year-pie-chart" class="col-md-12"></div>
    </div>
    <br>
    <hr>
    <div class="row" id="enrollment-focus-area-header">
        <h2 class="text-center">Student Enrollment by Focus Area</h2>
    </div>
    <div class="row enrollment-chart-button-container">
        <button class="btn btn-primary enrollment-chart-button" id="enrollment-focus-area-pie-chart-button" onclick="showFocusAreaPieChart();">
            Pie Chart</button>
        <button class="btn btn-primary enrollment-chart-button active" id="enrollment-focus-area-bar-chart-button" onclick="showFocusAreaBarChart();">Bar Chart</button>
    </div>
    <div class="row">
        <div id="enrollment-focus-area-bar-chart" class="col-md-12" style="height: 400px; margin-top: 30px;"></div>
        <div id="enrollment-focus-area-pie-chart" class="col-md-12" style="height: 400px; margin-top: 30px;"></div>
    </div>
</div>