Adds statistics_app

- Adds statistics_app
- moves workshop_stats to statistics_app
- changes urls of workshop_stats to statistics
- adds public_stats
- modified form.py to get off regex warning
- updates urls.py

2 files changed, 747 insertions, 0 deletions

diff --git a/statistics_app/templates/statistics_app/workshop_public_stats.html b/statistics_app/templates/statistics_app/workshop_public_stats.html
new file mode 100644
index 0000000..8894037
--- /dev/null
+++ b/statistics_app/templates/statistics_app/workshop_public_stats.html
@@ -0,0 +1,353 @@
+{% extends 'workshop_app/base.html' %}
+
+{% block header %}
+   <nav class="navbar navbar-default navbar-custom">
+	  <div class="container-fluid">
+		<div class="navbar-header">
+		  <a class="navbar-brand" href="{{ URL_ROOT }}/">Home</a>
+		</div>
+		<ul class="nav navbar-nav navbar-right">
+		  <li><a href="{{ URL_ROOT }}/register/"><span class="glyphicon glyphicon-user"></span>Register</a></li>
+		  <li><a href="{{ URL_ROOT }}/login/"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
+		</ul>
+		</div>
+  </nav>
+{% endblock %}
+
+{% block extra %}
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+ 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>	
+  	<!-- For Charts -->
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>                                                              
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
+
+	<!-- For Google GeoChart India Map -->
+	<script type='text/javascript' src='https://www.google.com/jsapi'></script>
+
+<script>
+    var dateToday = new Date();
+    var upto = new Date();
+
+    dateToday.setDate(dateToday.getDate() - 1);
+    upto.setFullYear(dateToday.getFullYear() + 1);
+  
+  $( function() {
+      from = $( "#from" )
+        .datepicker({
+          defaultDate: "+1w",
+          changeMonth: true,
+          changeYear: true,
+          showButtonPanel: true,
+          maxDate: dateToday,
+          dateFormat: "yy-mm-dd"
+        })
+        .on( "change", function() {
+          to.datepicker( "option", "minDate", getDate( this ) );
+        }),
+      to = $( "#to" ).datepicker({
+        defaultDate: "+1w",
+        changeMonth: true,
+        changeYear: true,
+        showButtonPanel: true,
+        minDate: dateToday,
+       	maxDate: upto,
+       	dateFormat: "yy-mm-dd"
+      })
+      .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;
+		}
+	} );
+
+  </script>
+
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+  <div class="row">
+		<div class="col-md-4" align="left" >
+			  <fieldset data-mini="true">
+			    <label for="radio-2">Overall Count</label>
+			    <input type="radio" name="radio-1" id="radio-2" value="OWC">
+			    <label for="radio-3">India Map</label>
+			    <input type="radio" name="radio-1" id="radio-3" value="MOIN">
+			  </fieldset>
+		</div>
+	
+	<div class="col-md-8">
+		<form method="POST" >
+			{% csrf_token %}
+			<div class="form-group">
+			 <label>state: </label>
+			  <select name="states">
+			    <option value="all">ALL</option>
+			    <option value="IN-AP">Andhra Pradesh</option>	
+			    <option value="IN-AR">Arunachal Pradesh</option>	
+			    <option value="IN-AS">Assam</option>	
+			    <option value="IN-BR">Bihar</option>	
+			    <option value="IN-CT">Chhattisgarh</option>	
+			    <option value="IN-GA">Goa</option>	
+			    <option value="IN-GJ">Gujarat</option>	
+			    <option value="IN-HR">Haryana</option>	
+			    <option value="IN-HP">Himachal Pradesh</option>	
+			    <option value="IN-JK">Jammu and Kashmir</option>	
+			    <option value="IN-JH">Jharkhand</option>	
+			    <option value="IN-KA">Karnataka</option>	
+			    <option value="IN-KL">Kerala</option>	
+			    <option value="IN-MP">Madhya Pradesh</option>	
+			    <option value="IN-MH">Maharashtra</option>	
+			    <option value="IN-MN">Manipur</option>	
+			    <option value="IN-ML">Meghalaya</option>	
+			    <option value="IN-MZ">Mizoram</option>	
+			    <option value="IN-NL">Nagaland</option>	
+			    <option value="IN-OR">Odisha</option>	
+			    <option value="IN-PB">Punjab</option>	
+			    <option value="IN-RJ">Rajasthan</option>	
+			    <option value="IN-SK">Sikkim</option>	
+			    <option value="IN-TN">Tamil Nadu</option>	
+			    <option value="IN-TG">Telangana</option>	
+			    <option value="IN-TR">Tripura</option>
+			    <option value="IN-UT">Uttarakhand</option>	
+			    <option value="IN-UP">Uttar Pradesh</option>	
+			    <option value="IN-WB">West Bengal</option>
+			    <option value="IN-AN">Andaman and Nicobar Islands</option>	
+			    <option value="IN-CH">Chandigarh</option>	
+			    <option value="IN-DN">Dadra and Nagar Haveli</option>	
+			    <option value="IN-DD">Daman and Diu</option>	
+			    <option value="IN-DL">Delhi</option>	
+			    <option value="IN-LD">Lakshadweep</option>	
+			    <option value="IN-PY">Puducherry</option>	
+	                  </select>
+			  <label>WorkshopType:  </label>
+			  <select name="workshoptype_name">
+			  {% for workshop in workshoptype_list %}
+			   <option value={{ workshop.id }}> {{ workshop }} </option>
+			  {% endfor %}
+			  </select>
+			  &nbsp;
+			  <br>
+				<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-info btn-sm" type="submit" name="View" value="View">View</button>
+			</div>
+	    </form>
+
+	    {% if messages %}
+		<ul class="messages">
+		    {% for message in messages %}
+		    	<div class="alert alert-{{ message.tags }}">
+				    <li {% if message.tags %} class="{{ message.tags }}"{% endif %}> {{ message }}
+				    </li>
+			    </div>
+		    {% endfor %}
+		</ul>
+		{% endif %}
+
+	</div>
+	<br>
+		<table class="table table-hover">
+			<thead>
+				<tr>
+					<th>Coordinator Name</th>
+					<th>Institute Name</th>
+					<th>Instructor Name</th>
+					<th>Workshop Name</th>
+					<th>Workshop Date</th>
+					<th>Initiated By</th>
+				</tr>
+			</thead>
+			{% csrf_token %}
+			{% for workshop in workshop_list %}
+				{% if workshop.proposed_workshop_date %}
+						<tbody>
+							<tr>
+							<td>{{ workshop.proposed_workshop_coordinator.get_full_name | capfirst }}</td>
+							<td>{{ workshop.proposed_workshop_coordinator.profile.institute | capfirst }}</td>
+							<td>{{ workshop.proposed_workshop_instructor.get_full_name }}</td>
+							<td>{{ workshop.proposed_workshop_title.workshoptype_name }}</td>
+							<td>{{ workshop.proposed_workshop_date | date}}</td>
+							<td>Coordinator</td>
+							</tr>
+						</tbody>
+				{% else %}
+						<tbody>
+							<tr>
+							<td>{{ workshop.requested_workshop_coordinator.get_full_name | capfirst }}</td>
+							<td>{{ workshop.requested_workshop_coordinator.profile.institute | capfirst }}</td>
+							<td>{{ workshop.requested_workshop_instructor.get_full_name }}</td>
+							<td>{{ workshop.requested_workshop_title.workshoptype_name }}</td>
+							<td>{{ workshop.requested_workshop_date | date}}</td>
+							<td>Instructor</td>
+							</tr>
+						</tbody>
+				{% endif %}
+			{% endfor %}
+		</table>
+
+		<!-- Page Navigation -->
+		<div class="container">
+		<div class="Page-Nav" align="center">
+		<nav aria-label="Page navigation">
+		 	<ul class="pagination pagination-sm">
+			  	<li class="page-item">
+			      {% if workshop_list.has_previous %}
+					<a class="page-link" tabindex="-1" 
+						href="?page={{ workshop_list.previous_page_number }}">Previous</a>
+				  {% endif %}
+			    </li>
+			    <li class="page-item">
+			    <span class="current">
+				Page {{ workshop_list.number }} of {{ workshop_list.paginator.num_pages }}
+					</span>
+				</li>
+			    <li class="page-item">
+			    {% if workshop_list.has_next %}
+					<a class="page-link" href="?page={{ workshop_list.next_page_number }}">Next
+					</a>	
+				{% endif %}
+			    </li>
+		  	</ul>
+		</nav>
+		</div>
+	</div>
+	</div>
+
+<div class="row">
+	<br>
+	<div class="col-md-12 ">
+		<br>
+		<canvas id="myChartPie" ></canvas>
+		<script>
+			$( function() {
+			    $( "fieldset" ).controlgroup();
+			  });
+
+			var ctx1 = document.getElementById("myChartPie").getContext('2d');
+			var myChart;
+
+			$('input[type=radio]').change(function() {
+		   if (this.value == 'OWC') { //Overall Workshop Count
+			        if(myChart){
+			        	myChart.destroy();
+			        }
+
+				    var dWidth = $(window).width() * 0.9;
+			        var dHeight = $(window).height() * 0.9;
+                
+			        $( "#myChartPie" ).dialog({
+					resizable: false,
+					draggable: true,
+			        title: 'Pie Chart',
+					closeOnEscape: true,
+					stack: true,
+					zIndex: 10000,
+					width: dWidth,
+					height: dHeight,    
+					modal: true
+					});
+	
+				document.getElementById("visualization").style.visibility='hidden';
+				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
+				 		}
+					});
+			     }
+
+				else if (this.value == 'MOIN') {
+			            if(myChart){
+			        		myChart.destroy();
+			            }
+
+				    var dWidth = $(window).width() * 0.9;
+			        var dHeight = $(window).height() * 0.9;
+                
+			        $( "#visualization" ).dialog({
+					resizable: false,
+					draggable: true,
+			        title: 'Map of India',
+					closeOnEscape: true,
+					stack: true,
+					zIndex: 10000,
+					width: dWidth,
+					height: dHeight,    
+					modal: true
+					});
+	
+					document.getElementById("visualization").style.visibility='visible';
+			        function drawVisualization() {
+					    var data = google.visualization.arrayToDataTable(
+						{{ india_map | safe }}
+						);
+
+					var opts = {
+					    region: 'IN',
+					    domain: 'IN',
+					    displayMode: 'regions',
+					    resolution: 'provinces',
+					    colorAxis: {colors: ['lightyellow', 'orange']},
+					    legend: {position: 'top'},
+					   	};
+
+					var geochart = new google.visualization.GeoChart(
+					document.getElementById('visualization'));
+							geochart.draw(data, opts);
+					    };	
+					if(google) {
+					    google.load('visualization', '1.0', {
+						packages: ['geochart'],
+			            callback: function() {
+					    // do stuff, if you wan't - it doesn't matter, because the page isn't blank!
+							drawVisualization();
+							}
+			            })
+				        }	
+				}
+			});
+		</script>	
+		<style>
+		    #visualization path {
+		    stroke-width:1; /* control the countries borders width */
+		    stroke:#6699cc; /* choose a color for the border */
+		    }
+		</style>
+		<div id="visualization" style="width: 400px; height: 300px; display: block; margin: 0 auto;" ></div>
+
+	</div>
+</div>
+</div>
+<br>
+{% endblock %}
diff --git a/statistics_app/templates/statistics_app/workshop_stats.html b/statistics_app/templates/statistics_app/workshop_stats.html
new file mode 100644
index 0000000..ba597dc
--- /dev/null
+++ b/statistics_app/templates/statistics_app/workshop_stats.html
@@ -0,0 +1,394 @@
+{% extends 'workshop_app/base.html' %}
+
+{% block header %}
+   <nav class="navbar navbar-default navbar-custom">
+	  <div class="container-fluid">
+		<div class="navbar-header">
+		  <a class="navbar-brand" href="{{ URL_ROOT }}/manage/">Home</a>
+		</div>
+		<ul class="nav navbar-nav">
+		  <li ><a href="{{ URL_ROOT }}/create_workshop/">Create Workshop</a></li>
+		   <li ><a href="{{ URL_ROOT }}/view_workshoptype_list/"> Workshop List</a></li>
+		   <li ><a href="{{ URL_ROOT }}/my_workshops/">My Workshops</a></li>
+		   <li class="active"><a href="{{ URL_ROOT }}/workshop_stats/" >Workshop Stats</a></li>
+		</ul>
+		<ul class="nav navbar-nav navbar-right">
+		  <li><a href="{{ URL_ROOT }}/view_profile/"><span class="glyphicon glyphicon-user"></span> Profile </a></li>
+		  <li><a href="{{ URL_ROOT }}/logout/"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
+		</ul>
+		</div>
+  </nav>
+{% endblock %}
+
+{% block extra %}
+    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
+ 
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+ 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>	
+  	<!-- For Charts -->
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>                                                              
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
+
+	<!-- For Google GeoChart India Map -->
+	<script type='text/javascript' src='https://www.google.com/jsapi'></script>
+
+<script>
+    var dateToday = new Date();
+    var upto = new Date();
+
+    dateToday.setDate(dateToday.getDate() - 1);
+    upto.setFullYear(dateToday.getFullYear() + 1);
+  
+  $( function() {
+      from = $( "#from" )
+        .datepicker({
+          defaultDate: "+1w",
+          changeMonth: true,
+          changeYear: true,
+          showButtonPanel: true,
+          maxDate: dateToday,
+          dateFormat: "yy-mm-dd"
+        })
+        .on( "change", function() {
+          to.datepicker( "option", "minDate", getDate( this ) );
+        }),
+      to = $( "#to" ).datepicker({
+        defaultDate: "+1w",
+        changeMonth: true,
+        changeYear: true,
+        showButtonPanel: true,
+        minDate: dateToday,
+       	maxDate: upto,
+       	dateFormat: "yy-mm-dd"
+      })
+      .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;
+		}
+	} );
+
+  </script>
+
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+  <div class="row">
+		<div class="col-md-6" align="left" >
+			  <fieldset data-mini="true">
+			    <label for="radio-1">Monthly Count </label>
+			    <input type="radio" name="radio-1" id="radio-1" value="NWPM">
+			    <label for="radio-2">Overall Count</label>
+			    <input type="radio" name="radio-1" id="radio-2" value="OWC">
+			    <label for="radio-3">India Map</label>
+			    <input type="radio" name="radio-1" id="radio-3" value="MOIN">
+			  </fieldset>
+		</div>
+	
+
+	{% if show_workshop_stats %}
+	<div  align="right" class="col-md-6">
+		<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 btn-sm" type="submit" name="Download" value="Download">Download</button>
+				<button class="btn btn-info btn-sm" type="submit" name="View" value="View">View</button>
+			</div>
+	    </form>
+
+	    {% if messages %}
+		<ul class="messages">
+		    {% for message in messages %}
+		    	<div class="alert alert-{{ message.tags }}">
+				    <li {% if message.tags %} class="{{ message.tags }}"{% endif %}> {{ message }}
+				    </li>
+			    </div>
+		    {% endfor %}
+		</ul>
+		{% endif %}
+
+	</div>
+	<br>
+		<table class="table table-hover">
+			<thead>
+				<tr>
+					<th>Coordinator Name</th>
+					<th>Institute Name</th>
+					<th>Instructor Name</th>
+					<th>Workshop Name</th>
+					<th>Workshop Date</th>
+					<th>Requested/Proposed By</th>
+				</tr>
+			</thead>
+			{% csrf_token %}
+			{% for workshop in upcoming_workshops %}
+				{% if workshop.proposed_workshop_date %}
+						<tbody>
+							<tr>
+							<td>{{ workshop.proposed_workshop_coordinator.get_full_name | capfirst }}</td>
+							<td>{{ workshop.proposed_workshop_coordinator.profile.institute | capfirst }}</td>
+							<td>{{ workshop.proposed_workshop_instructor.get_full_name }}</td>
+							<td>{{ workshop.proposed_workshop_title.workshoptype_name }}</td>
+							<td>{{ workshop.proposed_workshop_date | date}}</td>
+							<td>Coordinator</td>
+							</tr>
+						</tbody>
+				{% else %}
+						<tbody>
+							<tr>
+							<td>{{ workshop.requested_workshop_coordinator.get_full_name | capfirst }}</td>
+							<td>{{ workshop.requested_workshop_coordinator.profile.institute | capfirst }}</td>
+							<td>{{ workshop.requested_workshop_instructor.get_full_name }}</td>
+							<td>{{ workshop.requested_workshop_title.workshoptype_name }}</td>
+							<td>{{ workshop.requested_workshop_date | date}}</td>
+							<td>Instructor</td>
+							</tr>
+						</tbody>
+				{% endif %}
+			{% endfor %}
+		</table>
+
+		<!-- Page Navigation -->
+		<div class="container">
+		<div class="Page-Nav" align="center">
+		<nav aria-label="Page navigation">
+		 	<ul class="pagination pagination-sm">
+			  	<li class="page-item">
+			      {% if upcoming_workshops.has_previous %}
+					<a class="page-link" tabindex="-1" 
+						href="?page={{ upcoming_workshops.previous_page_number }}">Previous</a>
+				  {% endif %}
+			    </li>
+			    <li class="page-item">
+			    <span class="current">
+				Page {{ upcoming_workshops.number }} of {{ upcoming_workshops.paginator.num_pages }}
+					</span>
+				</li>
+			    <li class="page-item">
+			    {% if upcoming_workshops.has_next %}
+					<a class="page-link" href="?page={{ upcoming_workshops.next_page_number }}">Next
+					</a>	
+				{% endif %}
+			    </li>
+		  	</ul>
+		</nav>
+		</div>
+	</div>
+	{% else %}
+		<div class="jumbotron">
+			<h2>Permission to View Upcoming Workshops is set to false, please set it to true in settings.py</h2>
+		</div>
+	{% endif %}
+	</div>
+
+
+<div class="row">
+	<br>
+	<div class="col-md-12 ">
+		<br>
+		<canvas id="myChartPie" ></canvas>
+		<script>
+			$( 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();
+			            }
+
+				    var dWidth = $(window).width() * 0.9;
+			        var dHeight = $(window).height() * 0.9;
+                
+			        $( "#myChartPie" ).dialog({
+					resizable: false,
+					draggable: true,
+			                title: 'Bar Chart',
+					closeOnEscape: true,
+					stack: true,
+					zIndex: 10000,
+					width: dWidth,
+					height: dHeight,    
+					modal: true
+					});
+			               
+			        document.getElementById("visualization").style.visibility='hidden';
+					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();
+			        }
+
+				    var dWidth = $(window).width() * 0.9;
+			        var dHeight = $(window).height() * 0.9;
+                
+			        $( "#myChartPie" ).dialog({
+					resizable: false,
+					draggable: true,
+			        title: 'Pie Chart',
+					closeOnEscape: true,
+					stack: true,
+					zIndex: 10000,
+					width: dWidth,
+					height: dHeight,    
+					modal: true
+					});
+	
+				document.getElementById("visualization").style.visibility='hidden';
+				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
+				 		}
+					});
+			     }
+
+				else if (this.value == 'MOIN') {
+			            if(myChart){
+			        		myChart.destroy();
+			            }
+
+				    var dWidth = $(window).width() * 0.9;
+			        var dHeight = $(window).height() * 0.9;
+                
+			        $( "#visualization" ).dialog({
+					resizable: false,
+					draggable: true,
+			        title: 'Map of India',
+					closeOnEscape: true,
+					stack: true,
+					zIndex: 10000,
+					width: dWidth,
+					height: dHeight,    
+					modal: true
+					});
+	
+					document.getElementById("visualization").style.visibility='visible';
+			        function drawVisualization() {
+					    var data = google.visualization.arrayToDataTable(
+						{{ india_map | safe }}
+						);
+
+					var opts = {
+					    region: 'IN',
+					    domain: 'IN',
+					    displayMode: 'regions',
+					    resolution: 'provinces',
+					    colorAxis: {colors: ['lightyellow', 'orange']},
+					    legend: {position: 'top'},
+					   	};
+
+					var geochart = new google.visualization.GeoChart(
+					document.getElementById('visualization'));
+							geochart.draw(data, opts);
+					    };	
+					if(google) {
+					    google.load('visualization', '1.0', {
+						packages: ['geochart'],
+			            callback: function() {
+					    // do stuff, if you wan't - it doesn't matter, because the page isn't blank!
+							drawVisualization();
+							}
+			            })
+				        }	
+				}
+			});
+		</script>	
+		<style>
+		    #visualization path {
+		    stroke-width:1; /* control the countries borders width */
+		    stroke:#6699cc; /* choose a color for the border */
+		    }
+		</style>
+		<div id="visualization" style="width: 400px; height: 300px; display: block; margin: 0 auto;" ></div>
+
+	</div>
+</div>
+</div>
+<br>
+{% endblock %}