Skip to content
Snippets Groups Projects
Commit 207fba33 authored by Lillian Gray's avatar Lillian Gray
Browse files

Reorganize function order and add comments #9

parent 7de75f0e
Branches
No related merge requests found
...@@ -32,72 +32,16 @@ var buildingColors = new Array( '#9c1c34', '#0A22af', '#ff381a','#00ff00', '#009 ...@@ -32,72 +32,16 @@ var buildingColors = new Array( '#9c1c34', '#0A22af', '#ff381a','#00ff00', '#009
var endDate var endDate
var startDate var startDate
//split url on '?' for permalink creation and parsing
var URLComponents = document.URL.split('?') var URLComponents = document.URL.split('?')
function flipAndRedraw(which){ /*called when GoogleAPI finishes loading in index.html
whichBuildings[which] = !whichBuildings[which] calls getData and then passes the data into initializeLineChart when finished*/
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)
}
function onAPILoad(){ function onAPILoad(){
getData().done(initializeLineChart) getData().done(initializeLineChart)
} }
//fetches data for chart from text file generated by data_gen.py
function getData(){ function getData(){
return $.ajax({ return $.ajax({
url: "raw_line_chart.txt", //location of data file url: "raw_line_chart.txt", //location of data file
...@@ -105,6 +49,8 @@ function getData(){ ...@@ -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){ function initializeLineChart(data){
lineChartData = new google.visualization.DataView(new google.visualization.DataTable(data)) lineChartData = new google.visualization.DataView(new google.visualization.DataTable(data))
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')) dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'))
...@@ -186,10 +132,109 @@ function initializeLineChart(data){ ...@@ -186,10 +132,109 @@ function initializeLineChart(data){
drawLineChart() drawLineChart()
} }
//hides loading icon, called once chart is ready
function disableLoadingScreen() { function disableLoadingScreen() {
document.getElementById("spinner").classList.add('displayNone') 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(){ function parsePermalink(){
permalinked = URLComponents.length==2 permalinked = URLComponents.length==2
if(permalinked){ if(permalinked){
...@@ -208,12 +253,14 @@ function parsePermalink(){ ...@@ -208,12 +253,14 @@ function parsePermalink(){
} }
} }
//takes the date string from a permalink and returns them as a date object
function parseDate(urlArg){ function parseDate(urlArg){
var dateArr = urlArg.split("-") var dateArr = urlArg.split("-")
//month is zero-indexed //month is zero-indexed
return new Date(parseInt(dateArr[0]), parseInt(dateArr[1]) - 1, parseInt(dateArr[2])) 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){ function parseInts(strArray){
var a = new Array() var a = new Array()
for(i=0; i < strArray.length; i++) for(i=0; i < strArray.length; i++)
...@@ -221,7 +268,7 @@ function parseInts(strArray){ ...@@ -221,7 +268,7 @@ function parseInts(strArray){
return a return a
} }
// Generating a permalink //generates a permalink and copies it, called in index.html when the Get Permalink button is clicked
function genPermalink(){ function genPermalink(){
//month is zero-indexed //month is zero-indexed
var startStr = startDate.getFullYear()+"-"+(startDate.getMonth() + 1)+"-"+startDate.getDate() var startStr = startDate.getFullYear()+"-"+(startDate.getMonth() + 1)+"-"+startDate.getDate()
...@@ -252,13 +299,8 @@ function genPermalink(){ ...@@ -252,13 +299,8 @@ function genPermalink(){
}, 1000) }, 1000)
} }
function showSeriesOptions(el) { //prepares and then downloads a csv file based on what is currently shown in the chart
el.nextElementSibling.classList.toggle('displayNone')
}
function downloadCSV(el) { 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 //creates csvString using same visible data as chart
var dataView = new google.visualization.DataView(lineChartData) var dataView = new google.visualization.DataView(lineChartData)
var filteredRows = dataView.getFilteredRows([{column: 0, minValue: startDate, maxValue: endDate}]) var filteredRows = dataView.getFilteredRows([{column: 0, minValue: startDate, maxValue: endDate}])
...@@ -278,31 +320,4 @@ function downloadCSV(el) { ...@@ -278,31 +320,4 @@ function downloadCSV(el) {
el.href = encodedUri el.href = encodedUri
el.download = 'energy-monitoring-data.csv' el.download = 'energy-monitoring-data.csv'
el.target = '_blank' 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment