Adds Pie Chart

- Adds Pie Chart to Workshop Stats
- Corrects code format

3 files changed, 131 insertions, 82 deletions

diff --git a/workshop_app/templates/workshop_app/propose_workshop.html b/workshop_app/templates/workshop_app/propose_workshop.html
index 95a4008..ce90dc8 100644
--- a/workshop_app/templates/workshop_app/propose_workshop.html
+++ b/workshop_app/templates/workshop_app/propose_workshop.html
@@ -22,7 +22,7 @@
           changeMonth: true,
           changeYear: true,
           minDate: dateToday,
-          maxDate: upto,
+          maxDate: upto
           // You can put more options here.
         });
       });
diff --git a/workshop_app/templates/workshop_app/view_profile.html b/workshop_app/templates/workshop_app/view_profile.html
index 91efdf1..8f1fbae 100644
--- a/workshop_app/templates/workshop_app/view_profile.html
+++ b/workshop_app/templates/workshop_app/view_profile.html
@@ -69,6 +69,10 @@
     <th><label for="id_department"><h5>{{ user.profile.department }}</h5></label></th>
   </tr>
   <tr>
+    <th><label for="id_location"><h5>Location:</h5></label></th>
+    <th><label for="id_location"><h5>{{ user.profile.location }}</h5></label></th>
+  </tr>
+  <tr>
     <th><label for="id_position"><h5>Position:</h5></label></th>
     <th><label for="id_position"><h5>{{ user.profile.position }}</h5></label></th>
   </tr>
diff --git a/workshop_app/templates/workshop_app/workshop_stats.html b/workshop_app/templates/workshop_app/workshop_stats.html
index 464c625..bc6387b 100644
--- a/workshop_app/templates/workshop_app/workshop_stats.html
+++ b/workshop_app/templates/workshop_app/workshop_stats.html
@@ -63,18 +63,17 @@
       .on( "change", function() {
         from.datepicker( "option", "maxDate", getDate( this ) );
       });
- 
-    function getDate( element ) {
-      var date;
-      try {
-        date = $.datepicker.parseDate( dateFormat, element.value );
-      } catch( error ) {
-        date = null;
-      }
- 
-      return date;
-    }
-  } );
+
+	function getDate( element ) {
+		var date;
+		try {
+			date = $.datepicker.parseDate( dateFormat, element.value );
+		} catch( error ) {
+			date = null;
+		}
+		return date;
+		}
+	} );
 
   </script>
 
@@ -82,22 +81,22 @@
 
 {% block content %}
 
-	<div class="container">
+<div class="container">
 	{% if show_workshop_stats %}
 	<div align="right">
 		<form method="POST" >
-				{% csrf_token %}
-	            <div class="form-group">
-	            <label for="from">From</label>
-	            <input type="text" id="from" name="from">
-	            <label for="to">to</label>
-	            <input type="text" id="to" name="to">
-	            <button class="btn btn-warning" type="submit" name="Download" value="Download">Download</button>
-	            <button class="btn btn-info" type="submit" name="View" value="View">View</button>
-	            </div>
+			{% csrf_token %}
+			<div class="form-group">
+				<label for="from">From</label>
+				<input type="text" id="from" name="from">
+				<label for="to">to</label>
+				<input type="text" id="to" name="to">
+				<button class="btn btn-warning" type="submit" name="Download" value="Download">Download</button>
+				<button class="btn btn-info" type="submit" name="View" value="View">View</button>
+			</div>
 	    </form>
-	    {% if messages %}
 
+	    {% if messages %}
 		<ul class="messages">
 		    {% for message in messages %}
 		    	<div class="alert alert-{{ message.tags }}">
@@ -106,7 +105,8 @@
 			    </div>
 		    {% endfor %}
 		</ul>
-	{% endif %}
+		{% endif %}
+
 	</div>
 	<br>
 		<table class="table table-hover">
@@ -177,69 +177,114 @@
 	{% else %}
 		<div class="jumbotron">
 				<h2>Permission to View Upcoming Workshops is set to false, please set it to true in settings.py</h2>
-			</div>
+		</div>
 	{% endif %}
-	</div>
+</div>
+
 <br>
-	<div class="row">
+<div class="row">
+	<br>
+	<div class="col-md-12 ">
 		<br>
-		<div class="col-md-12 ">
-			<br>
-			<canvas id="myChart" width="300px" height="40px"></canvas>
+		<div class="widget" style="padding-left: 22px;">
+			  <fieldset>
+			    <label for="radio-1">Number of Workshops per Month</label>
+			    <input type="radio" name="radio-1" id="radio-1" value="NWPM">
+			    <label for="radio-2">Overall Workshop Count</label>
+			    <input type="radio" name="radio-1" id="radio-2" value="OWC">
+			  </fieldset>
+		</div>
+		<canvas id="myChartPie" width="90px" height="12px"></canvas>
+
 			<script>
-			var ctx = document.getElementById("myChart").getContext('2d');
-			var myChart = new Chart(ctx, {
-			    type: 'bar',
-			    data: {
-			        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', '	December'],
-			        datasets: [{
-			            label: 'Number of workshops per Month for '+ dateToday.getFullYear(),
-			            data: {{ workshop_count }},
-			            backgroundColor: [
-			                'rgba(255, 99, 132, 0.2)',
-			                'rgba(54, 162, 235, 0.2)',
-			                'rgba(255, 206, 86, 0.2)',
-			                'rgba(75, 192, 192, 0.2)',
-			                'rgba(153, 102, 255, 0.2)',
-			                'rgba(242, 38, 19, 0.2)',
-			                'rgba(25, 91, 13, 0.2)',
-			                'rgba(54, 12, 235, 0.2)',
-			                'rgba(150, 40, 27, 0.2)',
-			                'rgba(66, 114, 155, 0.2)',
-			                'rgba(219, 10, 91, 0.2)',
-			                'rgba(191, 191, 191, 0.2)'
-			            ],
-			            borderColor: [
-							'rgba(255, 99, 132, 1)',
-			                'rgba(54, 162, 235, 1)',
-			                'rgba(255, 206, 86, 1)',
-			                'rgba(75, 192, 192, 1)',
-			                'rgba(153, 102, 255, 1)',
-			                'rgba(242, 38, 19, 1)',
-			                'rgba(25, 91, 13, 1)',
-			                'rgba(54, 12, 235, 1)',
-			                'rgba(150, 40, 27 ,1)',
-			                'rgba(66, 114, 155, 1)',
-			                'rgba(219, 10, 91, 1)',
-			                'rgba(191, 191, 191, 1)'
-			            ],
-			            borderWidth: 1
-			        }]
-			    },
-			    options: {
-			    	responsive: true,
-			    	scales: {
-			            yAxes: [{
-			                ticks: {
-			                    beginAtZero:true
-			                }
-			            }]
+			$( function() {
+			    $( "fieldset" ).controlgroup();
+			  });
+
+			var ctx1 = document.getElementById("myChartPie").getContext('2d');
+			var myChart;
+			$('input[type=radio]').change(function() {
+			        if (this.value == 'NWPM') {//Number of Workshops per month
+			        if(myChart){
+			        	myChart.destroy();
+			        }
+					myChart = new Chart(ctx1, {
+					    type: 'bar',
+					    data: {
+					        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', '	December'],
+							datasets: [{
+							label: 'Number of workshops per Month for '+ dateToday.getFullYear(),
+					            data: {{ workshop_count }},
+					            backgroundColor: [
+					                'rgba(255, 99, 132, 0.2)',
+					                'rgba(54, 162, 235, 0.2)',
+					                'rgba(255, 206, 86, 0.2)',
+					                'rgba(75, 192, 192, 0.2)',
+					                'rgba(153, 102, 255, 0.2)',
+					                'rgba(242, 38, 19, 0.2)',
+					                'rgba(25, 91, 13, 0.2)',
+					                'rgba(54, 12, 235, 0.2)',
+					                'rgba(150, 40, 27, 0.2)',
+					                'rgba(66, 114, 155, 0.2)',
+					                'rgba(219, 10, 91, 0.2)',
+					                'rgba(191, 191, 191, 0.2)'
+					            ],
+					            borderColor: [
+									'rgba(255, 99, 132, 1)',
+					                'rgba(54, 162, 235, 1)',
+					                'rgba(255, 206, 86, 1)',
+					                'rgba(75, 192, 192, 1)',
+					                'rgba(153, 102, 255, 1)',
+					                'rgba(242, 38, 19, 1)',
+					                'rgba(25, 91, 13, 1)',
+					                'rgba(54, 12, 235, 1)',
+					                'rgba(150, 40, 27 ,1)',
+					                'rgba(66, 114, 155, 1)',
+					                'rgba(219, 10, 91, 1)',
+					                'rgba(191, 191, 191, 1)'
+					            ],
+					            borderWidth: 1
+					        }]
+					    },
+					    options: {
+					    	responsive: true,
+					    	scales: {
+					            yAxes: [{
+					                ticks: {
+					                    beginAtZero:true
+					                }
+					            }]
+					        }
+					    }
+					});
+				}
+			   else if (this.value == 'OWC') { //Overall Workshop Count
+			        if(myChart){
+			        	myChart.destroy();
 			        }
-			    }
-			});
+					myChart = new Chart(ctx1, {
+				    type: 'pie',
+				    data: {
+				    	labels : {{ workshoptype_count.0 | safe}},
+				        datasets: [{
+				            data: {{ workshoptype_count.1 }},
+				            //Add more color scheme if workshop number increases
+				            backgroundColor: [
+				                'rgba(153, 102, 255, 1)',
+				                'rgba(191, 191, 1, 1)',
+				                'rgba(75, 192, 192, 1)',
+					            'rgba(153, 102, 255, 1)'
+				           ] 
+				        }]
+				    },
+				    options: {
+				    	responsive: true
+				 		}
+					});
+			     }
+			    });
 			</script>	
-		</div>
-
 	</div>
+</div>
 <br>
 {% endblock %}