OLAS/app/views/local/managers/admins/overview2.blade.php

@extends('layouts.master')

@section('navigation')
@include('local.managers.admins._navigation')
@stop

@section('main')

<div>
  <div class="">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

    function make_chart(outcomes_info, semesters) {
      //////// Get values ready for chart
      var target_line = {{$target}};
      var x_label = 'Learning Outcomes';
      var y_label = 'Percent of students';
      var outcomes_labels = Array();
      var i = 0;
      outcomes_info.forEach(eachOutcome);
      function eachOutcome(outcome, index) {
        outcomes_labels.push({v: (index+1), f: outcome.name});
        i = i + 1;
      }

      //
      var outcomes_data = Array();

      var legend = Array();
      legend.push('');
      legend.push('Target');
      $.each(semesters, function(index, semester){
        var name = semester.name;
        name = name.split(' ');
        var semester_number = name[0];
        var semester_year = name[2];

        if (semester_number == 'First'){
          semester_number = '1';
        }
        else if (semester_number == 'Second'){
          semester_number = '2';
        }

        name = semester_year + " Sem " + semester_number;
        legend.push(name);
      });
      outcomes_data.push(legend);

      //
      var hidden_values = Array();
      hidden_values.push(0);
      hidden_values.push(target_line);
      var k = 0;
      while (k < semesters.length){
        hidden_values.push(null);
        k = k + 1;
      }

      //
      outcomes_data.push(hidden_values);

      $.each(outcomes_info, function(index, outcome){
        var temp_outcome_grouping_info = Array();
        temp_outcome_grouping_info.push({v:(index+1),f:"Students acheiving Learning Outcomes"});
        temp_outcome_grouping_info.push(target_line);

        var i = 0;
        $.each(outcome.semesters, function(index, semester){

          // if semester is not the same, insert null.
          //  else, insert info from expected semester.
          if(semester.name != semesters[i].name){
            while(semester.name != semesters[i].name && i < semesters.length){
              temp_outcome_grouping_info.push(null);
              i = i + 1;
            }
          }
          i = i + 1;

          var total = semester.total_evaluated;
          var achievers = semester.total_achieved;

          var percentage = achievers/total;
          var display_percentage = percentage*100;
          temp_outcome_grouping_info.push({v:percentage,f:'\nAchieved by ' + display_percentage.toFixed(2) + '%\n(' + achievers + ' achievers and ' + total + ' participants)'});
        });

        var i = temp_outcome_grouping_info.length;
        while(i < semesters.length+2){
          temp_outcome_grouping_info.push(null);
          i = i + 1;
        }

        outcomes_data.push(temp_outcome_grouping_info);
      });
      var last_hidden_values = [...hidden_values];
      last_hidden_values[0] = i+1;
      outcomes_data.push(last_hidden_values);

      ////////
      google.charts.load('current', {
        packages: ['corechart']
      }).then(function () {
        var data = google.visualization.arrayToDataTable(outcomes_data);
        // var data = google.visualization.arrayToDataTable([
        //   ['', 'Target', '2020-21 Sem 2', '2021-22 Sem 1', '2021-22 Sem 2'],
        //   [0, 0.80, null, null, null],
        //   [{v:1,f:"Students acheiving Learning Outcomes"}, 0.80, {v:0.8275,f:82.75}, {v:0.9075,f:'\nAchieved by '+(90.75).toString()+'%\n(60 achievers and 80 participants)'}, {v:0.8475,f:84.75}],
        //   [{v:2,f:"Students acheiving Learning Outcomes"}, 0.80, {v:0.7475,f:74.75}, {v:0.8775,f:87.75}, {v:0.9975,f:60.75}],
        //   [{v:3,f:"Students acheiving Learning Outcomes"}, 0.80, {v:0.6875,f:68.75}, {v:0.9175,f:91.75}, {v:0.8475,f:84.75}],
        //   [4, 0.80, null, null, null]
        // ]);

        var chartDiv = document.getElementById('chart_div');
        var chart = new google.visualization.ColumnChart(chartDiv);
        chart.draw(data, {
          // colors: ['lime', 'magenta'],
          hAxis: {
            title: x_label,
            ticks: outcomes_labels,
            viewWindow: {
              min: 0.5,
              max: outcomes_info.length + 0.5 // el total de outcomes + 0.5
            },
            textStyle : {
              fontSize: 10,
              bold: true,
            }
          },
          legend: 'right',
          series: {
            0: {
              type: 'line'
            }
          },
          title: ' ',
          chartArea: {
            width: '70%',
            // top: 10,
            // height: '50%'
          },
          vAxis: {
            title: y_label,
            format: 'percent',
            viewWindow: {
              min: 0,
              max: 1
            }
          }
        });
      });
    }


    // labels for each outcome grouping
    var outcomes_info = <?= json_encode($outcomes, JSON_HEX_TAG); ?>;
    var semesters = <?= json_encode($semesters, JSON_HEX_TAG); ?>;

    make_chart(outcomes_info,semesters);

    </script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div class="">
      <div class="filters">
        <div class="row" style="display: flex;">
          <div class="category" >
            <label for="school">School</label>
            <div class="select">
              <select multiple class="selectpicker" name="school" id="school">
                <option value="0" selected="selected">All</option>
                @foreach ($filters['school'] as $school)
                  <option value="{{$school->id}}">{{$school->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="category" >
            <label for="program" >Academic Program</label>
            <div class="select">
              <select multiple class="selectpicker" name="program" id="program">
                <option value="0" selected="selected">All</option>
                @foreach ($filters['program'] as $program)
                  <option value="{{$program->id}}">{{$program->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
        <div class="row" style="display: flex;">
          <div class="category" >
            <label for="semester">Semester</label>
            <div class="select">
              <select multiple class="selectpicker" name="semester" id="semester">
                <option value="0" selected="selected">All</option>
                @foreach ($filters['semester'] as $semester)
                  <option value="{{$semester->id}}">{{$semester->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="category" >
            <label for="year">Academic Year</label>
            <div class="select">
              <select multiple class="selectpicker" name="year" id="year">
                <option value="0" selected="selected">All</option>
                @foreach ($filters['year'] as $year)
                  <option value="{{$year->id}}">{{$year->start}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="category" >
            <label for="outcome">Learning Outcomes</label>
            <div class="select">
              <select multiple class="selectpicker" name="outcome" id="outcome">
                <option value="0" selected="selected">All</option>
                @foreach ($filters['outcome'] as $outcome)
                  <option value="{{$outcome->id}}">{{$outcome->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      </div>
      <h4 class="container">
        <b>Percent of Students Achieving Learning Outcomes By Academic Session</b>
      </h4>
      <div class="container" style="height:500px; width:1300px;" id="chart_div"></div>
      <div class="" style="padding-left: 25px;">
        <h5>
          <b>Annotation</b>
        </h5>
        The target line represents the expected percent of students achieving the learning outcome({{$target*100}}%).
      </div>
    </div>
  </div>
</div>

@stop

@section('included-js')

<!-- HighCharts -->
<script src="{{ asset('vendor/highcharts/highcharts.js') }}"></script>

@stop

@section('javascript')


$(document).ready(function()
{
  $("#year").parent().parent().parent().hide();



  // when a filter is focused
  var previous;
  $(".category").find("button").focus(function() {
    previous = Array();
    $(this).parent().find("select option:selected").each(function() {
      previous.push(this.value);
    });
  });

  // when a filter is changed
  $(".category").find("select").change(function() {
    var new_value = Array();
    $(this).parent().find("select option:selected").each(function() {
      new_value.push(this.value);
    });

    //if statements so that "All" only can be selected alone and dont allow selecting no options
    if(jQuery.inArray("0",new_value) !== -1 && jQuery.inArray("0",previous) === -1){
      $(this).parent().find("select option:selected").each(function() {
        $(this).removeAttr('selected');
        $(this).parent().val(0);
        //$('.selectpicker').selectpicker('refresh');
        new_value = ["0"];
      });
    }else if(jQuery.inArray("0",new_value) !== -1 && jQuery.inArray("0",previous) !== -1 && new_value.length > previous.length){
      $(this).parent().find("select option:selected").each(function() {
        if(this.value == "0"){
          $(this).removeAttr('selected');
          //$('.selectpicker').selectpicker('refresh');
          new_value = Array(new_value[1]);
        }
      });
    }else if(new_value.length == 0){
      $(this).parent().find("select").val(0);
      //$('.selectpicker').selectpicker('refresh');
      new_value = ["0"];
    }
    previous = new_value;


    // get values from all selects
    var schools = $("#school").val();
    var programs = $("#program").val();
    var semesters = $("#semester").val();
    var years = $("#year").val();
    var outcomes = $("#outcome").val();

    // query the values and get new data for chart
    $.post(
        "{{ URL::action('AdministratorsController@overview2_filter_results') }}",
      {
        schools: (schools),
        programs: (programs),
        semesters: (semesters),
        years: (years),
        outcomes: (outcomes),
      },
      function(data)
      {
        var filters = data.filters;
        var outcomes_info = data.outcomes_info;
        var semesters = data.semesters;

        //////// update chart
        make_chart(outcomes_info,semesters);


        ////////update filters
        var new_all = $('<option/>',{
          'value': "0",
          'html': "All",
        });;

        {{--
        //update school filter
        var school_filter = $("#school");
        var new_school_options = filters.school;
        school_filter.find("option").remove();
        school_filter.append(new_all.clone(true));
        $.each(new_school_options, function(index, school)
        {
          var value = school.id;
          var html = school.name;
          var new_option = $('<option/>',{
            'value': value,
            'html': html,
          });;
          school_filter.append(new_option);
        });
        --}}

        //update school filter
        var school_filter = $("#school");
        var school_selected_options = Array();
        school_filter.find("option:selected").each(function() {
          school_selected_options.push(this.value);
        });
        var new_school_options = filters.school;
        school_filter.find("option").remove();
        if(Array("0")[0] == school_selected_options[0]){
          school_filter.append(new_all.clone(true).attr("selected","selected"));
        } else{
          school_filter.append(new_all.clone(true));
        }
        $.each(new_school_options, function(index, school)
        {
          var value = school.id.toString();
          var html = school.name;
          var new_option;
          if(jQuery.inArray(value,school_selected_options) === -1){
            new_option = $('<option/>',{
              'value': value,
              'html': html,
            });;
          }else{
            new_option = $('<option/>',{
              'value': value,
              'html': html,
              'selected': 'selected',
            });;
          }
          school_filter.append(new_option);
        });

        //update semester filter
        var semester_filter = $("#semester");
        var semester_selected_options = Array();
        semester_filter.find("option:selected").each(function() {
          semester_selected_options.push(this.value);
        });
        var new_semester_options = filters.semester;
        semester_filter.find("option").remove();
        if(Array("0")[0] == semester_selected_options[0]){
          semester_filter.append(new_all.clone(true).attr("selected","selected"));
        } else{
          semester_filter.append(new_all.clone(true));
        }
        $.each(new_semester_options, function(index, semester)
        {
          var value = semester.id.toString();
          var html = semester.name;
          var new_option;
          if(jQuery.inArray(value,semester_selected_options) === -1){
            new_option = $('<option/>',{
              'value': value,
              'html': html,
            });;
          }else{
            new_option = $('<option/>',{
              'value': value,
              'html': html,
              'selected': 'selected',
            });;
          }
          semester_filter.append(new_option);
        });

        //update program filter
        var program_filter = $("#program");
        var program_selected_options = Array();
        program_filter.find("option:selected").each(function() {
          program_selected_options.push(this.value);
        });
        var new_program_options = filters.program;
        program_filter.find("option").remove();
        if(Array("0")[0] == program_selected_options[0]){
          program_filter.append(new_all.clone(true).attr("selected","selected"));
        } else{
          program_filter.append(new_all.clone(true));
        }
        $.each(new_program_options, function(index, program)
        {
          var value = program.id.toString();
          var html = program.name;
          var new_option;
          if(jQuery.inArray(value,program_selected_options) === -1){
            new_option = $('<option/>',{
              'value': value,
              'html': html,
            });;
          }else{
            new_option = $('<option/>',{
              'value': value,
              'html': html,
              'selected': 'selected',
            });;
          }
          program_filter.append(new_option);
        });


        //update outcome filter
        var outcome_filter = $("#outcome");
        var outcome_selected_options = Array();
        outcome_filter.find("option:selected").each(function() {
          outcome_selected_options.push(this.value);
        });
        var new_outcome_options = filters.outcome;
        outcome_filter.find("option").remove();
        if(Array("0")[0] == outcome_selected_options[0]){
          outcome_filter.append(new_all.clone(true).attr("selected","selected"));
        } else{
          outcome_filter.append(new_all.clone(true));
        }
        $.each(new_outcome_options, function(index, outcome)
        {
          var value = outcome.id.toString();
          var html = outcome.name;
          var new_option;
          if(jQuery.inArray(value,outcome_selected_options) === -1){
            new_option = $('<option/>',{
              'value': value,
              'html': html,
            });;
          }else{
            new_option = $('<option/>',{
              'value': value,
              'html': html,
              'selected': 'selected',
            });;
          }
          outcome_filter.append(new_option);
        });


        {{--
        //update semester filter
        var semester_filter = $("#semester");
        var new_semester_options = filters.semester;
        semester_filter.find("option").remove();
        semester_filter.append(new_all.clone(true));
        $.each(new_semester_options, function(index, semester)
        {
          var value = semester.id;
          var html = semester.name;
          var new_option = $('<option/>',{
            'value': value,
            'html': html,
          });;
          semester_filter.append(new_option);
        });
        --}}


        $('.selectpicker').selectpicker('refresh');
      }
    );

  });

});



{{-- @include('global.dummy-outcomes') --}}

@stop