No Description

overview.blade.php 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  1. @extends('layouts.master')
  2. @section('navigation')
  3. @include('local.managers.admins._new_navigation')
  4. @stop
  5. @section('main')
  6. <div>
  7. <!-- Nav tabs -->
  8. <ul id="levelTabs" class="nav nav-tabs" role="tablist">
  9. <li role="presentation" class="active"><a href="#undergraduate" aria-controls="undergraduate" role="tab">Undergraduate</a></li>
  10. <li role="presentation"><a href="#graduate" aria-controls="graduate" role="tab">Graduate</a></li>
  11. </ul>
  12. <!-- Tab panes -->
  13. <div class="tab-content">
  14. <div role="tabpanel" class="tab-pane active" id="undergraduate">
  15. <div class="row">
  16. <div class="col-md-9 graph" id="graph_undergrad"></div>
  17. <div class="col-md-3">
  18. <br>
  19. <div class="panel panel-default panel-scrolling">
  20. <div class="panel-heading" role="tab">
  21. <h4 class="panel-title">
  22. Participating Programs
  23. </h4>
  24. </div>
  25. <div>
  26. <table class="table table-striped table-condensed">
  27. @foreach ($participating_undergrad_programs as $program)
  28. <tr>
  29. <td>{{ HTML::linkAction('ProgramsController@show', $program->name, array($program->id)) }}</td>
  30. </tr>
  31. @endforeach
  32. </table>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="row">
  38. <div class="col-md-12">
  39. <h4>Assessment Results by Learning Outcomes in the Undergraduate Academic Programs</h4>
  40. <table class="table table-striped table-condensed datatable">
  41. <thead>
  42. <th>Learning Outcome</th>
  43. <th>Undergraduate Programs doing Assessment</th>
  44. <th>Undergraduate Programs Achieved</th>
  45. <th>Undergraduate Success Rate</th>
  46. </thead>
  47. <tbody>
  48. @foreach($outcomes_subgrad as $outcome)
  49. <tr>
  50. <td>{{ link_to_action('OutcomesController@show', $outcome->name, array($outcome->id), $attributes = array()) }}</td>
  51. <td>{{{ $attemptedUndergradProgramsPerOutcome[$outcome->id] }}}</td>
  52. <td>{{{ $achievedUndergradProgramsPerOutcome[$outcome->id] }}}</td>
  53. <td>
  54. @if($attemptedUndergradProgramsPerOutcome[$outcome->id]!=0)
  55. {{{ round($achievedUndergradProgramsPerOutcome[$outcome->id] / $attemptedUndergradProgramsPerOutcome[$outcome->id]*100, 2) }}}%
  56. @else
  57. N/M
  58. @endif
  59. </td>
  60. </tr>
  61. @endforeach
  62. </tbody>
  63. <tfoot></tfoot>
  64. <caption>N/M: Not Measured</caption>
  65. </table>
  66. </div>
  67. </div>
  68. </div>
  69. <div role="tabpanel" class="tab-pane" id="graduate">
  70. <div class="row">
  71. <div class="col-md-9 graph" id="graph_grad">
  72. </div>
  73. <div class="col-md-3">
  74. <br>
  75. <div class="panel panel-default panel-scrolling">
  76. <div class="panel-heading" role="tab">
  77. <h4 class="panel-title">
  78. Participating Programs
  79. </h4>
  80. </div>
  81. <div>
  82. <table class="table table-striped table-condensed">
  83. @foreach ($participating_grad_programs as $program)
  84. <tr>
  85. <td>{{ HTML::linkAction('ProgramsController@show', $program->name, array($program->id)) }}</td>
  86. </tr>
  87. @endforeach
  88. </table>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="row">
  94. <div class="col-md-12">
  95. <h4>Assessment Results by Learning Outcomes in the Graduate Academic Programs</h4>
  96. <table class="table table-striped table-condensed datatable">
  97. <thead>
  98. <th>Learning Outcome</th>
  99. <th>Graduate Programs doing Assessment</th>
  100. <th>Graduate Programs Achieved</th>
  101. <th>Graduate Success Rate</th>
  102. </thead>
  103. <tbody>
  104. @foreach($outcomes_grad as $outcome)
  105. <tr>
  106. <td>{{ link_to_action('OutcomesController@show', $outcome->name, array($outcome->id), $attributes = array()) }}</td>
  107. <td>{{{ $attemptedGradProgramsPerOutcome[$outcome->id] }}}</td>
  108. <td>{{{ $achievedGradProgramsPerOutcome[$outcome->id] }}}</td>
  109. <td>
  110. @if($attemptedGradProgramsPerOutcome[$outcome->id]!=0)
  111. {{{ round($achievedGradProgramsPerOutcome[$outcome->id] / $attemptedGradProgramsPerOutcome[$outcome->id]*100, 2) }}}%
  112. @else
  113. N/M
  114. @endif
  115. </td>
  116. </tr>
  117. @endforeach
  118. </tbody>
  119. <tfoot></tfoot>
  120. <caption>N/M: Not Measured</caption>
  121. </table>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. <!-- <div class="row">
  128. <div class="col-md-12" id="objectives_count"></div>
  129. </div> -->
  130. @stop
  131. @section('included-js')
  132. <!-- HighCharts -->
  133. <script src="{{ asset('vendor/highcharts/highcharts.js') }}"></script>
  134. <!--script src="http://code.highcharts.com/modules/exporting.js"></script -->
  135. <!-- Datatables -->
  136. @include('global._datatables_js')
  137. @stop
  138. @section('javascript')
  139. $(function () {
  140. $('#levelTabs a').click(function (e) {
  141. e.preventDefault()
  142. $(this).tab('show');
  143. // Load grad charts after clicking tab, so they are sized correctly.
  144. $('#graph_undergrad').highcharts({
  145. chart: {
  146. type: 'bar'
  147. },
  148. title: {
  149. text: 'Undergraduate Performance by Learning Outcome Criteria (Campus)'
  150. },
  151. legend: {
  152. reversed: true,
  153. },
  154. xAxis: {
  155. categories: [
  156. @foreach($outcomes_subgrad as $outcome)
  157. "{{{ $outcome->name }}}",
  158. @endforeach
  159. ],
  160. labels: {
  161. style: {
  162. fontSize:'11px'
  163. },
  164. step:1,
  165. useHTML:true,
  166. formatter: function() {
  167. return '<div style="max-width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
  168. },
  169. }
  170. },
  171. yAxis: {
  172. min: 0,
  173. max: 100,
  174. title: {
  175. text: 'Percentage'
  176. }
  177. },
  178. tooltip: {
  179. headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  180. pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  181. '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
  182. footerFormat: '</table>',
  183. shared: true,
  184. useHTML: true
  185. },
  186. plotOptions: {
  187. bar: {
  188. //grouping: false,
  189. shadow: false,
  190. borderWidth: 0,
  191. },
  192. series: {
  193. pointPadding: 0,
  194. groupPadding: 0.075
  195. },
  196. },
  197. series: [{
  198. name: 'Expected Value',
  199. color: '#555555',
  200. dataLabels: {
  201. enabled: true,
  202. fontSize: 8,
  203. color: '#fff',
  204. align: 'right',
  205. format: '{y:.1f}%',
  206. style: {
  207. //fontWeight: 'bold'
  208. },
  209. y: -1
  210. },
  211. data: [
  212. @foreach($outcomes_subgrad as $index => $outcome)
  213. @if(
  214. is_array($undergrad_outcomes_attempted)
  215. && array_key_exists($outcome->id, $undergrad_outcomes_attempted)
  216. && $undergrad_outcomes_attempted[$outcome->id]!=0)
  217. {{{ $outcome->expected_outcome }}},
  218. @else
  219. null,
  220. @endif
  221. @endforeach
  222. ],
  223. pointPadding: 0,
  224. }, {
  225. name: 'Obtained Value',
  226. color: 'rgba(231, 0, 51, 1)',
  227. dataLabels: {
  228. enabled: true,
  229. fontSize: 8,
  230. color: '#fff',
  231. align: 'right',
  232. format: '{y:.1f}%',
  233. style: {
  234. //fontWeight: 'bold'
  235. },
  236. y:-1
  237. },
  238. data:[
  239. @foreach($outcomes_subgrad as $index => $outcome)
  240. @if(
  241. is_array($undergrad_outcomes_attempted)
  242. && array_key_exists($outcome->id, $undergrad_outcomes_attempted)
  243. && $undergrad_outcomes_attempted[$outcome->id]!=0)
  244. @if (($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 > $outcome->expected_outcome)
  245. {y:{{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}} },
  246. @else
  247. {y:{{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}}, color:'#e70033' },
  248. @endif
  249. @else
  250. null,
  251. @endif
  252. @endforeach
  253. ],
  254. pointPadding: 0,
  255. }]
  256. });
  257. $('#graph_grad').highcharts({
  258. chart: {
  259. type: 'bar'
  260. },
  261. title: {
  262. text: 'Graduate Performance by Learning Outcome Criteria (Campus)'
  263. },
  264. legend: {
  265. reversed: true,
  266. },
  267. xAxis: {
  268. categories: [
  269. @foreach($outcomes_grad as $outcome)
  270. "{{{ $outcome->name }}}",
  271. @endforeach
  272. ],
  273. labels: {
  274. style: {
  275. fontSize:'11px'
  276. },
  277. step:1,
  278. useHTML:true,
  279. formatter: function() {
  280. return '<div style="width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
  281. },
  282. }
  283. },
  284. yAxis: {
  285. min: 0,
  286. max: 100,
  287. title: {
  288. text: 'Percentage'
  289. }
  290. },
  291. tooltip: {
  292. headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  293. pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  294. '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
  295. footerFormat: '</table>',
  296. shared: true,
  297. useHTML: true
  298. },
  299. plotOptions: {
  300. bar: {
  301. //grouping: false,
  302. shadow: false,
  303. borderWidth: 0,
  304. },
  305. series: {
  306. pointPadding: 0,
  307. groupPadding: 0.075
  308. },
  309. },
  310. series: [{
  311. name: 'Expected Value',
  312. color: '#555555',
  313. dataLabels: {
  314. enabled: true,
  315. fontSize: 8,
  316. color: '#fff',
  317. align: 'right',
  318. format: '{y:.1f}%',
  319. style: {
  320. //fontWeight: 'bold'
  321. },
  322. y:-1
  323. },
  324. data: [
  325. @foreach($outcomes_grad as $index => $outcome)
  326. @if(
  327. is_array($grad_outcomes_attempted)
  328. && array_key_exists($outcome->id, $grad_outcomes_attempted)
  329. && $grad_outcomes_attempted[$outcome->id]!=0)
  330. {{{ $outcome->expected_outcome }}},
  331. @else
  332. null,
  333. @endif
  334. @endforeach
  335. ],
  336. pointPadding: 0,
  337. }, {
  338. name: 'Obtained Value',
  339. color: '#e70033',
  340. dataLabels: {
  341. enabled: true,
  342. fontSize: 8,
  343. color: '#fff',
  344. align: 'right',
  345. format: '{y:.1f}%',
  346. style: {
  347. //fontWeight: 'bold'
  348. },
  349. y:-1
  350. },
  351. data:[
  352. @foreach($outcomes_grad as $index => $outcome)
  353. @if(
  354. is_array($grad_outcomes_attempted)
  355. && array_key_exists($outcome->id, $grad_outcomes_attempted)
  356. && $grad_outcomes_attempted[$outcome->id]!=0)
  357. {{{ ($grad_outcomes_achieved[$outcome->id]/$grad_outcomes_attempted[$outcome->id])*100 }}},
  358. @else
  359. null,
  360. @endif
  361. @endforeach
  362. ],
  363. pointPadding: 0,
  364. }]
  365. });
  366. })
  367. $('#graph_undergrad').highcharts({
  368. chart: {
  369. type: 'bar'
  370. },
  371. title: {
  372. text: 'Undergraduate Performance by Learning Outcome Criteria (Campus)'
  373. },
  374. legend: {
  375. reversed: true,
  376. },
  377. xAxis: {
  378. categories: [
  379. @foreach($outcomes_subgrad as $outcome)
  380. "{{{ $outcome->name }}}",
  381. @endforeach
  382. ],
  383. labels: {
  384. style: {
  385. fontSize:'11px'
  386. },
  387. step:1,
  388. useHTML:true,
  389. formatter: function() {
  390. return '<div style="max-width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
  391. },
  392. }
  393. },
  394. yAxis: {
  395. min: 0,
  396. max: 100,
  397. title: {
  398. text: 'Percentage'
  399. }
  400. },
  401. tooltip: {
  402. headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  403. pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  404. '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
  405. footerFormat: '</table>',
  406. shared: true,
  407. useHTML: true
  408. },
  409. plotOptions: {
  410. bar: {
  411. //grouping: false,
  412. shadow: false,
  413. borderWidth: 0,
  414. },
  415. series: {
  416. pointPadding: 0,
  417. groupPadding: 0.075
  418. },
  419. },
  420. series: [{
  421. name: 'Expected Value',
  422. color: '#555555',
  423. dataLabels: {
  424. enabled: true,
  425. fontSize: 8,
  426. color: '#fff',
  427. align: 'right',
  428. format: '{y:.1f}%',
  429. style: {
  430. //fontWeight: 'bold'
  431. },
  432. y: -1
  433. },
  434. data: [
  435. @foreach($outcomes_subgrad as $index => $outcome)
  436. @if(
  437. is_array($undergrad_outcomes_attempted)
  438. && array_key_exists($outcome->id, $undergrad_outcomes_attempted)
  439. && $undergrad_outcomes_attempted[$outcome->id]!=0)
  440. {{{ $outcome->expected_outcome }}},
  441. @else
  442. null,
  443. @endif
  444. @endforeach
  445. ],
  446. pointPadding: 0,
  447. },
  448. {
  449. name: 'Obtained Value',
  450. color: 'rgba(231, 0, 51, 1)',
  451. dataLabels: {
  452. enabled: true,
  453. fontSize: 8,
  454. color: '#fff',
  455. align: 'right',
  456. format: '{y:.1f}%',
  457. style: {
  458. //fontWeight: 'bold'
  459. },
  460. y:-1
  461. },
  462. data:[
  463. @foreach($outcomes_subgrad as $index => $outcome)
  464. @if(
  465. is_array($undergrad_outcomes_attempted)
  466. && array_key_exists($outcome->id, $undergrad_outcomes_attempted)
  467. && $undergrad_outcomes_attempted[$outcome->id]!=0)
  468. {{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}},
  469. @else
  470. null,
  471. @endif
  472. @endforeach
  473. ],
  474. pointPadding: 0,
  475. }]
  476. });
  477. $('#objectives_count').highcharts({
  478. chart: {
  479. type: 'bar'
  480. },
  481. title: {
  482. text: 'Programs Assessing Each Learning Outcome'
  483. },
  484. xAxis: {
  485. categories: [
  486. @foreach($outcomes_subgrad as $outcome)
  487. "{{{ $outcome->name }}}",
  488. @endforeach
  489. ],
  490. labels: {
  491. style: {
  492. fontSize:'11px'
  493. }
  494. }
  495. },
  496. yAxis: {
  497. min: 0,
  498. title: {
  499. text: 'Programs'
  500. }
  501. },
  502. tooltip: {
  503. headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
  504. pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
  505. '<td style="padding:0"><b>{point.y}</b></td></tr>',
  506. footerFormat: '</table>',
  507. shared: true,
  508. useHTML: true
  509. },
  510. plotOptions: {
  511. column: {
  512. pointPadding: 0.2,
  513. borderWidth: 0
  514. }
  515. },
  516. series: [{
  517. name: 'Undergraduate',
  518. color: '#e70033',
  519. data:[
  520. @foreach($outcomes_subgrad as $outcome)
  521. {{{ $attemptedUndergradProgramsPerOutcome[$outcome->id] }}},
  522. @endforeach
  523. ],
  524. pointPadding: 0,
  525. }]
  526. });
  527. });
  528. // Include dummy graph for outcomes
  529. @include('global.dummy-outcomes')
  530. @stop