Commit f2d78c7c authored by Gilbert Kim's avatar Gilbert Kim
Browse files

uploading all files

parent 255c278c

GUI/7_7_14.html

0 → 100644
+861 −0
Original line number Diff line number Diff line 
<!doctype>

<link type="text/css" rel="stylesheet" href="Content/rickshaw.min.css">

<link rel="stylesheet" href="Scripts/jquery-ui.css">

<link rel="stylesheet" href="Scripts/style.css">

<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">



<script src="Scripts/d3.min.js"></script>

<script src="Scripts/rickshaw.min.js"></script>

<script src="Scripts/jquery-1.9.0.min.js"></script>

<script src="Scripts/jquery-1.9.0.js"></script>

<script src="Scripts/jquery-ui.js"></script>

<script src = "Scripts/rickshaw.js"></script>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script src = "Scripts/Fixtures.Time.js"> </script>

<script src = "Scripts/RangeSlider.js"> </script>







<head>

	<title> Data Visualization </title>

</head>











<body>

<!--

	<a href = "CR800_1Visualization.html"> CR800_1 Data Visualization </a> <br>

    <a href = "CR800_2Visualization.html"> CR800_2 Data Visualization </a> <br>

-->

	<a href = "GilbertLiveData.html"> LIVE DATA </a> 



	<h1>Data From CR1000</h1>



	<button id = "add" type="button" onclick="addGraph()">Add Graph</button>



	<div id="page-wrapper">



		<h2>Text File Reader</h2>

		<div>

			Select a text file: 

			<input type="file" id="fileInput">

		</div>

		<pre id="fileDisplayArea"><pre>



	</div>







	<h1> GRAPH 1 </h1>



	<div style="float:left;width:260px;padding-top:4px;margin-left:50px;">

		<div class="compare-label">Start Date:</div>

		<input type="text" id="start-date1" class="text ui-widget-content ui-corner-all compare-input">

		<div class="compare-label">End Date:</div>

		<input type="text" id="end-date1" class="text ui-widget-content ui-corner-all compare-input">

	</div>



	<div style="float:left;width:600px;">

		Sensor Parameters:

		<button id="add-button" onclick = "addParameter()">Add Parameter</button>

		<div id="parameters"></div>

	</div>



	<div style="float:left;width:175px;" class = "legend" id = "legend1"></div>



	<div style="clear:both;height:10px;"></div>



	<div class = "chart_container" id="chart_container1">

		<div id = "y_axis"> </div>

		<div class = "chart" id="chart1"></div>

		<div id = "preview"></div>

		<div id = "y_axis_2"></div>

	</div>







<p><br><br></p>













</body>

 





<style>



	.chart1 {

        position: relative;

        left: 40px;

		width: 1000px;

		height: 400px

    }

	.legend {

		display: inline-block;

        vertical-align: top;

        margin: 0 0 0 10px;

		float: left

    }



	#chart_container1 {

		position: relative;

        font-family: Arial, Helvetica, sans-serif;

		float: left

    }

#chart_container2 {

		position: relative;

        font-family: Arial, Helvetica, sans-serif;

		float: left

    }

#chart_container3 {

		position: relative;

        font-family: Arial, Helvetica, sans-serif;

		float: left

    }

#chart_container4 {

		position: relative;

        font-family: Arial, Helvetica, sans-serif;

		float: left

    }



#y_axis {

  position: absolute;

  top: 0;

  bottom: 0;

  width: 40px

}

#y_axis_2 {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 1040px;

  width: 40px

}







    #chart1 {

        position: relative;

        left: 40px;

    }

#chart2 {

        position: relative;

        left: 40px;

    }



#chart3 {

        position: relative;

        left: 40px;

    }



#chart4 {

        position: relative;

        left: 40px;

    }





<!--    #y_axis {

        position: absolute;

        top: 0;

        bottom: 0;

        width: 40px;

    }

-->

	



    #legend1 {

        display: inline-block;

        vertical-align: top;

        margin: 0 0 0 10px;



    }

#legend2 {

        display: inline-block;

        vertical-align: top;

        margin: 0 0 0 10px;



    }

#legend3 {

        display: inline-block;

        vertical-align: top;

        margin: 0 0 0 10px;

		float: left

    }

#legend4 {

        display: inline-block;

        vertical-align: top;

        margin: 0 0 0 10px;

		float: left

    }



</style>





<script>





	var currentParams = []

	function addParameter() {



		//limit number of parameters

		if (currentParams.length < all_tag_info.length) {



			currentParams.push([all_tag_info[currentParams.length],currentParams.length])

	

			drawParameter(currentParams.length)	



			updating = true

			test(allStartDates[1].getTime(), allEndDates[1].getTime())

		}

	}



	function removeParameter(a, id) {

		currentParams.splice(a,1)

		drawAllParameters()

	}



	function drawAllParameters() {

		for (var a = 0; a < currentParams.length; a++) {

			drawParameter(a)

		}

	}



	function updateParameter1(id, index) {

		document.getElementById("p-"+id.split("-")[1]).selectedIndex = index

		console.log("herehere")

		console.log(id.split("-")[1])

		currentParams[id.split("-")[1]] = [all_tag_info[index], index]

		updating = true

		test(allStartDates[1].getTime(), allEndDates[1].getTime())

	}



	function updateParameter2(id, index) {

		document.getElementById("s-"+id.split("-")[1]).selectedIndex = index

	}



		



	function drawParameter(a) {

		//"Table.sensor_name:BattV.sensor_processing:Smp.sensor_units:Volts"

		var sensor_name = all_tag_info[a].split(".")[1].split(":")[1]

		var sensor_processing = all_tag_info[a].split(".")[2].split(":")[1]

		var sensor_units = all_tag_info[a].split(".")[3].split(":")[1]



		var html = '<div id="param-'+a+'" style="clear:left;"><div style="float:left;">';

		html += '<select id="s-'+a+'" ' + 'onchange="updateParameter1(this.id, this.selectedIndex)"' +'>';

		for (var j = 0; j < all_tag_info.length; j++) {

			html += '<option value="'+all_tag_info[j].split(".")[1].split(":")[1]+'"';

			if (j == a) {

				html += ' selected="true"';

			}

			html += '>'+all_tag_info[j].split(".")[1].split(":")[1]+'</option>';

		}

		html += '</select>';



		html += '<select id="p-'+a+'" ' + 'onchange="updateParameter2(this.id, this.selectedIndex)"' +'>';

		for (var j = 0; j < all_tag_info.length; j++) {

			html += '<option value="'+all_tag_info[j].split(".")[3].split(":")[1]+'"';



			if (j == a) {

				html += ' selected="true"';

				//currentParams[i][3] = parameters[j].units;

			}

			html += '>'+all_tag_info[j].split(".")[3].split(":")[1]+'</option>';

		}

		html += '</select>';



/*

		html += '<select id="a-'+a+'">';

		html += '<option value="0">Left Axis</option>';

		html += '<option value="1"';

		if (axis) {

			html += ' selected="true"';

		}

		html += '>Right Axis</option></select></div>';

		html += '<div id="c-'+i+'" class="ui-corner-all color-box"></div>';

		html += '<div id="v-'+i+'" class="value-box"></div>';

*/

		if (a > 0) {

			html += '<button id="r-'+a+'" class="remove-button" onclick="removeParameter('+a+', this.id);">Remove</button>';

		}



		html += '</div>';

	

		var options = {multiple: false,

						header: false,

						minWidth: 100,

						selectedList: 1};

	

		$("#parameters").append(html);

		//$("#r-"+a).button();

		//options.minWidth = 160;

		//$("#s-"+a).bind("multiselectclose", {index:a}, updateParameter).multiselect(options);

		//options.minWidth = 160;

		//$("#p-"+a).bind("multiselectclose", {index:a}, updateParameter).multiselect(options);

		//options.minWidth = 60;

		//$("#a-"+a).bind("multiselectclose", {index:a}, updateParameter).multiselect(options);

	}





	var count = 1

	function createTable() {

		count += 1

		var p = document.createElement('p')

			var br1 = document.createElement('br')

			var br2 = document.createElement('br')

			p.appendChild(br1)

			p.appendChild(br2)

		document.body.appendChild(p)



		var table = document.createElement('table')



		var tbody = document.createElement('tbody')

			var tr = document.createElement('tr')

				var h1 = document.createElement('h1')

					h1.innerHTML = "GRAPH " + count.toString()

				tr.appendChild(h1)

			tbody.appendChild(tr)

			var tr2 = document.createElement('tr')

				var td1 = document.createElement('td')

					var div1 = document.createElement('div')

						div1.innerHTML = "Start Date:"

						div1.className = "compare-label"

					td1.appendChild(div1)

					var input1 = document.createElement('input')

						input1.setAttribute("type", "text")

						input1.setAttribute("id", "start-date" + count.toString())

						input1.className = "text ui-widget-content ui-corner-all compare-input"

					td1.appendChild(input1)

					var div2 = document.createElement('div')

						div2.innerHTML = "End Date:"

						div2.className = "compare-label"

					td1.appendChild(div2)

					var input2 = document.createElement('input')

						input2.setAttribute("type", "text")

						input2.setAttribute("id", "end-date" + count.toString())

						input2.className = "text ui-widget-content ui-corner-all compare-input"

					td1.appendChild(input2)



					var p2 = document.createElement('p')

						var br3 = document.createElement('br')

						p2.appendChild(br3)

					td1.appendChild(p2)

					var div3 = document.createElement('div')

						div3.className = "legend"

						div3.id = "legend" + count.toString()

						div3

					td1.appendChild(div3)

				tr2.appendChild(td1)

				var td2 = document.createElement('td')

					var div4 = document.createElement('div')

						div4.className = "chart_container"

						div4.id = "chart_container" + count.toString()

						var div5 = document.createElement('div')

							div5.className = "chart"

							div5.id = "chart" + count.toString()

						div4.appendChild(div5)

					td2.appendChild(div4)

				tr2.appendChild(td2)

			tbody.appendChild(tr2)

			var btn = document.createElement("button")

				btn.setAttribute("type", "button")

				btn.innerHTML = "Remove Graph"

				btn.setAttribute("onclick", "removeGraph(this.id)")

				btn.id = "asdf" + count.toString()

			tbody.appendChild(btn)

		table.appendChild(tbody)

		table.id = count.toString()

		document.body.appendChild(table)







	}







	function removeGraph(id) {

		console.log(" i hate you")

		console.log(id)

		var deleted = document.getElementById(id.substr(id.length-1))

		deleted.parentNode.removeChild(deleted)

	}













	var start = new Date(2014, 6-1, 13);

    var end = new Date();













	var allStartDates = [new Date(), start]

	var allEndDates = [new Date(), end]

	function addGraph() {

		createTable()

		allStartDates.push(start)

		allEndDates.push(end)

		doDatePickers()

		copy = count

		test(allStartDates[count].getTime(), allEndDates[count].getTime())

	}













	function display(msg) {

        $("<p>").html(msg).appendTo(document.body);

    }

















	// add datepicker objects

    



	var i

	var copy = 1

	var updating = false

	function doDatePickers() {

		for (i = 1; i <= count; i++) {

			console.log("actual i: " + i)

    		$( "#start-date" + i.toString() ).datepicker({ onSelect: function(dateText)  {



				copy = Number(this.id.substring(this.id.length - 1))

				//console.log("new i number: " + copy)



				allStartDates[copy] = new Date(dateText);

        		//display("start: " + start + "; end: " + end);

				console.log("OMGOMG")

				//console.log("i: " + (i-1))

				updating = true

				//console.log("updating: " + updating)

				//console.log("allStartDates: " + allStartDates)

				//console.log("allEndDates: " + allEndDates)

        		test(allStartDates[copy].getTime(), allEndDates[copy].getTime());

				}

			});

    		$( "#start-date" + i.toString() ).datepicker("setDate", allStartDates[i]);





    		$( "#end-date" + i.toString() ).datepicker({ onSelect: function(dateText) {



				copy = Number(this.id.substring(this.id.length - 1))

				//console.log("new i number: " + copy)



        		allEndDates[copy] = new Date(dateText);

        		//display("start: " + start + "; end: " + end);

				updating = true

        		test(allStartDates[copy].getTime(), allEndDates[copy].getTime());

        	}

    		});

    		$( "#end-date" + i.toString() ).datepicker("setDate", allEndDates[i]);

		}

	}











	// read file with tag metrics

//	var tag_metrics = []

//	window.onload = function() {

//		var fileInput = document.getElementById('fileInput');

//		var fileDisplayArea = document.getElementById('fileDisplayArea');



//		fileInput.addEventListener('change', function(e) {

//			var file = fileInput.files[0];

//			var textType = /text.*/;

/*

			if (file.type.match(textType)) {

				var reader = new FileReader();



				reader.onload = function(e) {

					fileDisplayArea.innerText = reader.result;

					tag_metrics = reader.result.split("\n")

					tag_metrics.pop()



					setTimeout(getMetrics(), 1000) // now use the tag metrics

				}

				

				//display(tag_metrics.toString())

				



				reader.readAsText(file);	

			} else {

				fileDisplayArea.innerText = "File not supported!";

			}

		});

	}

*/

 

    





	var all_tag_info = []

	// get all tag information for each tag metric

	function getMetrics() {

		for (var j=0; j < tag_metrics.length; j++) {

			//display(tag_metrics[j])

        	queryData =

            	{

					

                	"metric": tag_metrics[j]

           		}

        	try {

            	$.ajax({

                	url: "http://brki167-lnx-5:8888/lookup",

                	dataType: "json",

                	error: showError,

                	success: getTags,

                	crossDomain: true,

                	data: JSON.stringify(queryData),

                	type: 'POST',

					async: false

                	//contentType: "application/json; charset=utf-8"

            	});

        	}

        	catch (err) {

            	console.log(err.stack);

        	}

    	}



		currentParams = [[all_tag_info[0], 0], [all_tag_info[1], 1], [all_tag_info[2], 2]]  ///////////////////////////////////////////////////////////////////////

		drawParameter(0)

		drawParameter(1)

		drawParameter(2)

		

		//display(all_tag_info.toString())



		doDatePickers()

		console.log("allStartDates: " + allStartDates)

		console.log("allEndDates: " + allEndDates)



		test(allStartDates[1].getTime(), allEndDates[1].getTime())

		

	}

    function getTags(data, status, jqXHRob) {

        console.log("over here...")



		var dataConverted = JSON.parse(data)

        

        console.log(dataConverted)



		//display("number of tags: " + dataConverted["results"].length)



		for (var j = 0; j < dataConverted["results"].length; j++) {



			var tag = dataConverted["results"][j]["tags"]



			var keys = [];

   			for(var key in tag){

      			keys.push(key);

   			}



			var string = ""

			for (var k = 0; k < keys.length; k++) {

				string += "." + keys[k] + ":" + tag[keys[k]]

			}



			//take out RecordNumber

			if (string.indexOf("RecordNumber") == -1) {

				all_tag_info.push(dataConverted["metric"] + string)

			}	

		}

	}





	





















/*

    document.write("start: " + start + "<br>")

    document.write("end: " + end + "<br>")

	document.write("start-time: " + start.getTime() + "<br>")

    document.write("end-time: " + end.getTime() + "<br>")

*/



	var time = new Rickshaw.Fixtures.Time()

	var timeunit = time.unit('second')

    function test(start, end) {

		// start and end times in seconds.miliseconds (3 decimal places)



		var diff = (end/1000)-(start/1000);

		if (diff <= 0) {

			return

		}

        //display("diff: " + diff)

		// default = every 1 min

		var downsample = "1m-avg"

		timeunit = time.unit('hour')

		// if diff > 1 day, then 15 min

		if (diff > (60*60*24)) {

			downsample = "15m-avg";

			timeunit = time.unit('4 hour')

		}

		// if diff > 3 days, then hourly

		if (diff > (60*60*24*3)) {

			downsample = "1h-avg";

			timeunit = time.unit('12 hour')

		}

		// if diff > 1 week, then 6-hr

		if (diff > (60*60*24*7)) {

			downsample = "6h-avg";

			timeunit = time.unit('day')

		}

		// if diff > 3 weeks, then 12-hr

		if (diff > (60*60*24*21)) {

			downsample = "12h-avg";

			timeunit = time.unit('week')

		}

		// if diff > 5 weeks, then daily

		if (diff > (60*60*24*35)) {

			downsample = "1d-avg";

			timeunit = time.unit('2 week')

		}

		// if diff > 6 moths, then weekly

		if (diff > (60*60*24*30*6)) {

			downsample = "1w-avg";

			timeunit = time.unit('month')

		}





		var queryCmd = []

		for (var k = 0; k < all_tag_info.length; k++) {

			var string

			var temp = all_tag_info[k].split(".")



			var haha = {}



			for (var j = 1; j < temp.length; j++) {

				var asdf = temp[j].split(":")

				haha[asdf[0]] = ""

				haha[asdf[0]] = asdf[1]

			}

			//display("haha: " + haha.toString())



			var temp2 = {"aggregator": "max", "metric": temp[0], "rate": "false", "tags": haha, "downsample": downsample}

			//display("temp2: " + temp2.toString())

			console.log("temp2")

			console.log(temp2)





			queryCmd.push(temp2)



		}

console.log("queryCmd")

console.log(queryCmd)

console.log([queryCmd[0], queryCmd[1], queryCmd[2]])



var usethis = []

for (var asdf = 0; asdf < currentParams.length; asdf++) {

	usethis.push(queryCmd[currentParams[asdf][1]])

	//console.log("in loop")

	//console.log(currentParams[asdf][1])

	//console.log(queryCmd[currentParams[asdf][1]])

}

console.log(usethis)

        queryData =

            {

                "start": Math.floor(start/1000),

                "end": Math.floor(end/1000),

                "queries": usethis //////////////////////////////////////////////////////////////////////////////////

            }

        try {

            $.ajax({

                url: "http://brki167-lnx-5:8888/rickshaw",

                dataType: "json",

                error: showError,

                success: createGraph,

                crossDomain: true,

                data: JSON.stringify(queryData),

                type: 'POST'

                //contentType: "application/json; charset=utf-8"

            });

        }

        catch (err) {

            console.log(err.stack);

        }



    }



// need to work for all graphs

//	setInterval(function(){

//		var endDate = new Date();

//		test(start.getTime(), endDate.getTime());

//		}, 15*60*1000); //redo every 15 minute

	



    function showError(error) {

        console.log(error.responseText);

    };





    function createGraph(data, status, jqXHRob) {

        //console.log("creating graph...")



		console.log("what the heck...")



		if (data.length == 0) {

			return

		}

        

        //console.log(data)



		var palette = new Rickshaw.Color.Palette();



        colorScheme = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628"]

		//reset old graph

		if (updating == true) {

			console.log("GOT HERE")

			console.log(copy.toString())

			$( "#legend" + copy.toString() ).empty();

        	$( "#chart_container" + copy.toString() ).html('<div id="chart' + copy.toString() + '"></div>');



			updating = false

		}



//"Table.sensor_name:BattV.sensor_processing:Smp.sensor_units:Volts"

		var indices = []

		for (var p = 0; p < currentParams.length; p++) {

			console.log("im over here")

			console.log(currentParams[p][1])

			indices.push(currentParams[p][1])

		}

		var series_to_chose  = []

		for (var j = 0; j < indices.length; j++) {

			console.log("and then im here")

			console.log(indices[j])

			var asdf = all_tag_info[indices[j]].split(".")

			

			var temp = {}

			temp["name"] = asdf[1].split(":")[1] //hardcoded to be name

			temp["color"] = palette.color()

			temp["data"] = data[j][all_tag_info[indices[j]]]

			series_to_chose.push(temp)

			

		}



console.log("ASDFASDF")

console.log(series_to_chose)

		

		console.log("#chart" + copy.toString())

        var graph = new Rickshaw.Graph({

        	renderer: 'line',

        	element: document.querySelector("#chart" + copy.toString()),

        	width: 1000,

       	 	height: 400,

        	unstack: true,

          

        	stroke: true,

        	preserve: true,



        	series: series_to_chose

        });

		



        //graph.render(); 



//		var preview = new Rickshaw.Graph.RangeSlider( {

//			graph: graph,

//			element: document.getElementById('preview')

//		} );





		var hoverDetail = new Rickshaw.Graph.HoverDetail({

            graph: graph,

			xFormatter: function(x) { return new Date(x*1000) },

			yFormatter: function(y) { return y }

        });

		

		var legend = new Rickshaw.Graph.Legend({

            element: document.querySelector('#legend' + copy.toString()),

            graph: graph

        }); 



		var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {

			graph: graph,

			legend: legend

		} );



		var order = new Rickshaw.Graph.Behavior.Series.Order( {

			graph: graph,

			legend: legend

		} );



		var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {

			graph: graph,

			legend: legend

		} );





		var ticksTreatment = 'glow';

        var yAxis = new Rickshaw.Graph.Axis.Y( {

			graph: graph,

			orientation: 'left',

			tickFormat: Rickshaw.Fixtures.Number.formatKMBT,

			ticksTreatment: ticksTreatment,

			element: document.getElementById('y_axis')

		} );



		yAxis.render();





		var yAxis2 = new Rickshaw.Graph.Axis.Y( {

			graph: graph,

			orientation: 'right',

			tickFormat: Rickshaw.Fixtures.Number.formatKMBT,

			ticksTreatment: ticksTreatment,

			element: document.getElementById('y_axis_2')

		} );



		yAxis2.render()





        var xAxis = new Rickshaw.Graph.Axis.Time( {

			graph: graph,

			ticksTreatment: ticksTreatment,

			//timeFixture: new Rickshaw.Fixtures.Time.Local()

			timeUnit: timeunit

		} );



		xAxis.render();



        graph.render()



		//return graph



    }





	tag_metrics = ['Table','Test']

	getMetrics()



	

</script>

GUI/CR800Visualization.html~

0 → 100644
+298 −0

File added.

Preview size limit exceeded, changes collapsed.

GUI/CR800_1Visualization.html

0 → 100644
+301 −0

File added.

Preview size limit exceeded, changes collapsed.

GUI/CR800_1Visualization.html~

0 → 100644
+300 −0

File added.

Preview size limit exceeded, changes collapsed.

GUI/CR800_2Visualization.html

0 → 100644
+300 −0

File added.

Preview size limit exceeded, changes collapsed.