/* Authors: Tristan Wright, July 2012, Lillian Gray 2017-2020 This reads the json formatted data generated by data_gen.py the data is piped into the Google Charts API and a graph with controls are made If more buildings are added increment buildingNum and add a new color to buildingColors Benchmark functions or sections by wrapping them in: console.log(var a = new Date()-0) console.log(var b = new Date()-0 - a) */ //init globals //chart data source is global so we don't have to reload every time. var lineChartJSONData = jQuery.ajax({ url: "raw_line_chart.txt", //location of data file dataType: "json", async: false }).responseText var lineChartData var dashboard var controlWrapper var chartWrapper const buildingNum = 8 var whichBuildings = new Array() for(i=0; i < buildingNum; i++){ whichBuildings[i] = true } //change colors here var buildingColors = new Array( '#9c1c34', '#0A22af', '#ff381a','#00ff00', '#009944','#50D8F1','#e9af32', '#E07628') //variables for range of control under chart var endDate var startDate 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) } function initializeLineChart(){ lineChartData = new google.visualization.DataView(new google.visualization.DataTable(lineChartJSONData)) dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')) var latestEntryDate = new Date(lineChartData.getValue(lineChartData.getNumberOfRows()-1, 0)) endDate = new Date(latestEntryDate) startDate = new Date(latestEntryDate.setMonth(latestEntryDate.getMonth() - 1)) parsePermalink() //adaptive screen height. var graphHeight = Math.floor($(document).height() * .6) $("#dashboard").css("height", graphHeight+75) //settings for control bar below chart controlWrapper = new google.visualization.ControlWrapper({ 'controlType': 'ChartRangeFilter', 'containerId': 'control', 'options': { // Filter by the date axis. 'filterColumnIndex': 0, 'ui': { 'chartType': 'LineChart', 'chartOptions': { 'chartArea': {'width': '100%', 'height': 75}, 'colors': buildingColors.slice(1), 'hAxis': {'baselineColor': 'none'}}, //1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 'minRangeSize': 86400000 } //close ui }, // Initial range: (yyyy-mm-dd) 'state': {'range': {'start': startDate, 'end': endDate}} }) //chart settings chartWrapper = new google.visualization.ChartWrapper({ 'chartType': 'LineChart', 'containerId': 'lineChart', 'options':{ // Use the same chart area width as the control for axis alignment. 'width': '100%','height': graphHeight, 'fontName': 'Georgia', 'vAxis': {'title': 'Individual Building Usage in Kilowatts'}, 'hAxis': { 'textStyle': {'fontSize':14}, 'gridlines': { 'count':-1, 'color': '#fff', 'units': { 'years': {'format': ['yyyy', "''yy"]}, 'months': {'format': ['MMM yyyy', "MMM ''yy",'MMM']}, 'days': {'format': ['EEE MMM d, yyyy', "MMM d, ''yy", 'MMM d']} } }, 'minorGridlines': { 'units': { 'months': {'format': ['MMM']}, 'days': {'format': ['d']}, 'hours': {'format': ['']} } } }, 'colors': buildingColors, 'legend': 'none' },//close options }) //close chart_wrapper //event handler saves date google.visualization.events.addListener(controlWrapper, 'statechange', function(){ startDate = controlWrapper.getState().range.start endDate = controlWrapper.getState().range.end } ) dashboard.bind(controlWrapper, chartWrapper) //bind control to chart if(whichBuildings[0]===true){ handleTotalOptions(whichBuildings[0]) } drawLineChart() } function parsePermalink(){ permalinked = URLComponents.length==2 if(permalinked){ var args = URLComponents[1] var argsArray = args.split("+") var startTemp = parseDate(argsArray[0]) var endTemp = parseDate(argsArray[1]) var whichArgs = parseInts(argsArray[2].split("")) for(i=0; i<whichArgs.length; i++){ whichBuildings[whichArgs[i]] = !whichBuildings[whichArgs[i]] } if(startTemp < endTemp){ startDate = startTemp endDate = endTemp } } } function parseDate(urlArg){ var dateArr = urlArg.split("-") //month is zero-indexed return new Date(parseInt(dateArr[0]), parseInt(dateArr[1]) - 1, parseInt(dateArr[2])) } function parseInts(strArray){ var a = new Array() for(i=0; i < strArray.length; i++) a.push(parseInt(strArray[i])) return a } // Generating a permalink function genPermalink(){ //month is zero-indexed var startStr = startDate.getFullYear()+"-"+(startDate.getMonth() + 1)+"-"+startDate.getDate() var endStr = endDate.getFullYear()+"-"+(endDate.getMonth() + 1)+"-"+endDate.getDate() var disabledBuildings = "" for(i=0; i < buildingNum; i++){ if(!whichBuildings[i]) disabledBuildings += i } var permalink = URLComponents[0]+"?"+startStr+"+"+endStr+"+"+disabledBuildings //Copies permalink and puts permalink in text box next to the button var plinkTextField = document.getElementById('plink') plinkTextField.value = permalink plinkTextField.select() document.execCommand('copy') //Fades tooltip in and out var plinkButton = document.querySelector('.getPlink') plinkButton.classList.add('active') plinkButton.classList.remove('inactive') setTimeout(function(){ plinkButton.classList.remove('active') setTimeout(function(){ plinkButton.classList.add('inactive') }, 1000) }, 1000) } 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}]) dataView.setRows(filteredRows) var csvString = google.visualization.dataTableToCsv(dataView) //generates header to append to beginning of csvString var csvHeader = "" for(i=0; i < lineChartData.getNumberOfColumns(); i++){ csvHeader += lineChartData.getColumnLabel(i) csvHeader += "," } csvString = csvHeader + "\n" + csvString //downloads csv var encodedUri = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvString) el.href = encodedUri el.download = 'energy-monitoring-data.csv' el.target = '_blank' } 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') } } }