Reorganize function order and add comments #9

js/main.js

@@ -32,72 +32,16 @@ var buildingColors = new Array( '#9c1c34', '#0A22af', '#ff381a','#00ff00', '#009
 var endDate	  
 var startDate
 
+//split url on '?' for permalink creation and parsing
 var URLComponents = document.URL.split('?')
 
-function flipAndRedraw(which){
-	whichBuildings[which] = !whichBuildings[which]
-	if(which===0){
-		//Adds or removes total options for chart
-		handleTotalOptions(whichBuildings[0])
-	}
-	drawLineChart()
-}
-
-function handleTotalOptions(totalVisible){
-	if(totalVisible===true){
-		//adds options for separate series for total data
-		chartWrapper.setOption('series',{0: {'targetAxisIndex': 1}})
-		chartWrapper.setOption('vAxes', {1: {
-			'title': 'Total Campus Usage in Kilowatts',
-			'titleColor': buildingColors[0],
-			'textColor': buildingColors[0],
-			'gridlines': {'color': 'transparent'},
-			'baselineColor': 'transparent'
-		}})
-	}
-	else{
-		//removes options for total data
-		chartWrapper.setOption('series',{})
-	}
-}
-
-function drawLineChart(){
-	// column 0 is date and should always be included
-	var visibleColumns = [0]
-	var visibleColors = []
-	for(i=0;i<whichBuildings.length;i++){
-		if(whichBuildings[i]){
-			//since column 0 is date, column index is one greater for API
-			visibleColumns.push(i+1)
-			visibleColors.push(buildingColors[i])
-		}
-	}
-
-	lineChartData.setColumns(visibleColumns)
-	chartWrapper.setOption('colors', visibleColors)
-
-	// Total is not displayed in controlWrapper if it is enabled
-	if(whichBuildings[0]===true){
-		controlWrapper.setOption('ui.chartOptions.colors', visibleColors.slice(1))
-		//Control wrapper columns are based on indexes of chart columns, include every index but 1 for Total
-		var controlWrapperColumns = [0]
-		for(i=2; i<visibleColumns.length;i++){
-			controlWrapperColumns.push(i)
-		}
-		controlWrapper.setOption('ui.chartView.columns', controlWrapperColumns)
-	}
-	else{
-		controlWrapper.setOption('ui.chartOptions.colors', visibleColors)
-		controlWrapper.setOption('ui.chartView.columns', null)
-	}
-
-	dashboard.draw(lineChartData)
-}
-
+/*called when GoogleAPI finishes loading in index.html
+  calls getData and then passes the data into initializeLineChart when finished*/
 function onAPILoad(){
 	getData().done(initializeLineChart)
 }
 
+//fetches data for chart from text file generated by data_gen.py
 function getData(){
 	return $.ajax({
 		url: "raw_line_chart.txt", //location of data file
@@ -105,6 +49,8 @@ function getData(){
 	})
 }
 
+/*creates chart with initial options
+options that change such as visible columns are declared in drawLineChart*/
 function initializeLineChart(data){
 	lineChartData = new google.visualization.DataView(new google.visualization.DataTable(data))
 	dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'))
@@ -186,10 +132,109 @@ function initializeLineChart(data){
 	drawLineChart()
 }
 
+//hides loading icon, called once chart is ready
 function disableLoadingScreen() {
 	document.getElementById("spinner").classList.add('displayNone')
 }
 
+//toggles if a building is shown in the chart and calls the chart to be redrawn
+function flipAndRedraw(which){
+	whichBuildings[which] = !whichBuildings[which]
+	if(which===0){
+		//Adds or removes total options for chart
+		handleTotalOptions(whichBuildings[0])
+	}
+	drawLineChart()
+}
+
+//adds or removes options needed for Total which involves a second y-axis
+function handleTotalOptions(totalVisible){
+	if(totalVisible===true){
+		//adds options for separate series for total data
+		chartWrapper.setOption('series',{0: {'targetAxisIndex': 1}})
+		chartWrapper.setOption('vAxes', {1: {
+			'title': 'Total Campus Usage in Kilowatts',
+			'titleColor': buildingColors[0],
+			'textColor': buildingColors[0],
+			'gridlines': {'color': 'transparent'},
+			'baselineColor': 'transparent'
+		}})
+	}
+	else{
+		//removes options for total data
+		chartWrapper.setOption('series',{})
+	}
+}
+
+//sets options for columns and colors in the chart and control bar and then draws the chart
+function drawLineChart(){
+	// column 0 is date and should always be included
+	var visibleColumns = [0]
+	var visibleColors = []
+	for(i=0;i<whichBuildings.length;i++){
+		if(whichBuildings[i]){
+			//since column 0 is date, column index is one greater for API
+			visibleColumns.push(i+1)
+			visibleColors.push(buildingColors[i])
+		}
+	}
+
+	lineChartData.setColumns(visibleColumns)
+	chartWrapper.setOption('colors', visibleColors)
+
+	// Total is not displayed in controlWrapper if it is enabled
+	if(whichBuildings[0]===true){
+		controlWrapper.setOption('ui.chartOptions.colors', visibleColors.slice(1))
+		//Control wrapper columns are based on indexes of chart columns, include every index but 1 for Total
+		var controlWrapperColumns = [0]
+		for(i=2; i<visibleColumns.length;i++){
+			controlWrapperColumns.push(i)
+		}
+		controlWrapper.setOption('ui.chartView.columns', controlWrapperColumns)
+	}
+	else{
+		controlWrapper.setOption('ui.chartOptions.colors', visibleColors)
+		controlWrapper.setOption('ui.chartView.columns', null)
+	}
+
+	dashboard.draw(lineChartData)
+}
+
+//changes view within dashboard div between chart, how to use page, and about page
+function changeDashboard(button) {
+	if(button=="close"){
+		document.getElementById("lineChart").classList.remove('displayNone')
+		document.getElementById("control").classList.remove('displayNone')
+		document.getElementById("howToUse").classList.add('displayNone')
+		document.getElementById("aboutText").classList.add('displayNone')
+		document.getElementById("closeButton").classList.add('displayNone')
+	}
+	else{
+		document.getElementById("lineChart").classList.add('displayNone')
+		document.getElementById("control").classList.add('displayNone')
+		document.getElementById("closeButton").classList.remove('displayNone')
+		if(button=="about"){
+			document.getElementById("howToUse").classList.add('displayNone')
+			document.getElementById("aboutText").classList.remove('displayNone')
+		}
+		if(button=="howToUse"){
+			document.getElementById("aboutText").classList.add('displayNone')
+			document.getElementById("howToUse").classList.remove('displayNone')
+		}
+	}
+}
+
+//if user changes the window size the chart is redrawn to be the right size
+$(window).resize(function() {
+    dashboard.draw(lineChartData)
+})
+
+//called if series menu is clicked, toggles menu being shown
+function showSeriesOptions(el) {
+	el.nextElementSibling.classList.toggle('displayNone')
+}
+
+//if site was loaded using a permalink, modifies startDate, endDate, and whichBuildings
 function parsePermalink(){
 	permalinked = URLComponents.length==2
 	if(permalinked){
@@ -208,12 +253,14 @@ function parsePermalink(){
 	}
 }
 
+//takes the date string from a permalink and returns them as a date object
 function parseDate(urlArg){
 	var dateArr = urlArg.split("-")
 	//month is zero-indexed
 	return new Date(parseInt(dateArr[0]), parseInt(dateArr[1]) - 1, parseInt(dateArr[2]))
 }
 
+//takes the string of integers from a permalink and returns them as an array of integers
 function parseInts(strArray){
 	var a = new Array()
 	for(i=0; i < strArray.length; i++)
@@ -221,7 +268,7 @@ function parseInts(strArray){
 	return a
 }
 
-// Generating a permalink
+//generates a permalink and copies it, called in index.html when the Get Permalink button is clicked
 function genPermalink(){
 	//month is zero-indexed
 	var startStr = startDate.getFullYear()+"-"+(startDate.getMonth() + 1)+"-"+startDate.getDate()
@@ -252,13 +299,8 @@ function genPermalink(){
 	}, 1000)
 }
 
-function showSeriesOptions(el) {
-	el.nextElementSibling.classList.toggle('displayNone')
-}
-
+//prepares and then downloads a csv file based on what is currently shown in the chart
 function downloadCSV(el) {
-	//prepares and then downloads a csv file based on what is currently shown in the chart
-
 	//creates csvString using same visible data as chart
 	var dataView = new google.visualization.DataView(lineChartData)
 	var filteredRows = dataView.getFilteredRows([{column: 0, minValue: startDate, maxValue: endDate}])
@@ -278,31 +320,4 @@ function downloadCSV(el) {
 	el.href = encodedUri
 	el.download = 'energy-monitoring-data.csv'
 	el.target = '_blank'
-}
-
+}
\ No newline at end of file
-function changeDashboard(button) {
-	if(button=="close"){
-		document.getElementById("lineChart").classList.remove('displayNone')
-		document.getElementById("control").classList.remove('displayNone')
-		document.getElementById("howToUse").classList.add('displayNone')
-		document.getElementById("aboutText").classList.add('displayNone')
-		document.getElementById("closeButton").classList.add('displayNone')
-	}
-	else{
-		document.getElementById("lineChart").classList.add('displayNone')
-		document.getElementById("control").classList.add('displayNone')
-		document.getElementById("closeButton").classList.remove('displayNone')
-		if(button=="about"){
-			document.getElementById("howToUse").classList.add('displayNone')
-			document.getElementById("aboutText").classList.remove('displayNone')
-		}
-		if(button=="howToUse"){
-			document.getElementById("aboutText").classList.add('displayNone')
-			document.getElementById("howToUse").classList.remove('displayNone')
-		}
-	}
-}
-
-$(window).resize(function() {
-    dashboard.draw(lineChartData)
-})
\ No newline at end of file