Skip to content

P
pypakutil
Commit f2d78c7c authored by Gilbert Kim's avatar Gilbert Kim
Browse files
Options

uploading all files

parent 255c278c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 266022 additions and 0 deletions
GUI/7_7_14.html 0 → 100644
View file @ f2d78c7c
This diff is collapsed.
GUI/CR800Visualization.html~ 0 → 100644
View file @ f2d78c7c
<!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>
<!-- Comment -->
<head>
<title> Data Visualization </title>
</head>
<body>
<a href = "CR800Visualization.html"> CR800 Data Visualization </a>
<h1>Data From CR800</h1>
<div id="content">
<div class = "compare-label">Start Date:</div>
<input type="text" id="start-date" class="text ui-widget-content ui-corner-all compare-input">
<div class = "compare-label">End Date:</div>
<input type="text" id="end-date" class="text ui-widget-content ui-corner-all compare-input">
</div>
<div id="legend"></div>
<div id="chart_container">
<div id="chart"></div>
<div id="timeline"></div>
<div id="preview"></div>
</div>
</body>
<style>
#chart_container {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
#chart {
position: relative;
left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
#legend {
display: inline-block;
vertical-align: top;
margin: 0 0 0 10px
}
</style>
<script>
var start = new Date(2014, 6-1, 13);
var dayLater = new Date(2014, 6-1, 14);
var end = new Date();
$( "#start-date" ).datepicker({ onSelect: function(dateText) {
$( "#legend" ).empty();
$( "#chart_container" ).html('<div id="chart"></div><div id="timeline"></div><div id="preview"></div>');
start = new Date(dateText);
display("start: " + start + "; end: " + end);
test(start.getTime(), end.getTime());
}
});
$( "#start-date" ).datepicker("setDate", start);
$( "#end-date" ).datepicker({ onSelect: function(dateText) {
$( "#legend" ).empty();
$( "#chart_container" ).html('<div id="chart"></div><div id="timeline"></div><div id="preview"></div>');
end = new Date(dateText);
display("start: " + start + "; end: " + end);
test(start.getTime(), end.getTime());
}
});
$( "#end-date" ).datepicker("setDate", end);
function displayChange(dateText) {
display("Selected date: " + dateText);
}
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
var palette = new Rickshaw.Color.Palette();
document.write("start: " + start + "<br>")
document.write("end: " + end + "<br>")
document.write("start-time: " + start.getTime() + "<br>")
document.write("end-time: " + end.getTime() + "<br>")
function test(start, end) {
// start and end times in seconds.miliseconds (3 decimal places)
var diff = (end/1000)-(start/1000);
display("diff: " + diff)
// default = every 1 min
var downsample = "1m-avg"
// if diff > 1 day, then 15 min
if (diff > (60*60*24)) {
downsample = "15m-avg";
}
// if diff > 3 days, then hourly
if (diff > (60*60*24*3)) {
downsample = "1h-avg";
}
// if diff > 1 week, then 6-hr
if (diff > (60*60*24*7)) {
downsample = "6h-avg";
}
// if diff > 3 weeks, then 12-hr
if (diff > (60*60*24*21)) {
downsample = "12h-avg";
}
// if diff > 5 weeks, then daily
if (diff > (60*60*24*35)) {
downsample = "1d-avg";
}
// if diff > 6 moths, then weekly
if (diff > (60*60*24*30*6)) {
downsample = "1w-avg";
}
queryData =
{
"start": start,
"end": end,
"queries": [{
"aggregator": "max",
"metric": "Test",
"rate": false,
"tags": {
"sensor_name": "batt_volt_Min",
"sensor_units": "Units",
"sensor_processing": "Min"
},
"downsample": downsample
},
/*{
"aggregator": "max",
"metric": "Test",
"rate": false,
"tags": {
"sensor_name": "Units",
"sensor_units": "",
"sensor_processing": "Smp"
},
"downsample": downsample
}*/]
}
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);
}
}
function showError(error) {
console.log(error.responseText);
};
function createGraph(data, status, jqXHRob) {
console.log("creating graph...")
console.log(data)
/* Scheme:
#e41a1c
#377eb8
#4daf4a
#984ea3
#ff7f00
#ffff33
#a65628
*/
graph = new Rickshaw.Graph({
renderer: 'line',
element: document.querySelector("#chart"),
width: 580*2,
height: 250*2,
unstack: true,
stroke: true,
preserve: true,
series: [
{
name: "Batt Voltage",
color: palette.color(),
data: data[0]["Test.sensor_processing:Min.sensor_name:batt_volt_Min.sensor_units:Units"]
}/*,
{
name: "Panel Temp",
color: palette.color(),
data: data[1]["Test.sensor_processing:Smp.sensor_name:PTemp.sensor_units:Units"]
}*/]
});
graph.render();
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph
});
var annotator = new Rickshaw.Graph.Annotate( {
graph: graph,
element: document.getElementById('timeline')
} );
var legend = new Rickshaw.Graph.Legend({
element: document.querySelector('#legend'),
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,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
ticksTreatment: ticksTreatment
} );
yAxis.render();
var xAxis = new Rickshaw.Graph.Axis.Time( {
graph: graph,
ticksTreatment: ticksTreatment,
timeFixture: new Rickshaw.Fixtures.Time.Local()
} );
xAxis.render();
graph.render()
}
test(start.getTime(), end.getTime())
</script>
GUI/CR800_1Visualization.html 0 → 100644
View file @ f2d78c7c
<!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>
<!-- Comment -->
<head>
<title> Data Visualization </title>
</head>
<body>
<a href = "GilbertTest.html"> CR1000 Data Visualization </a> <br>
<a href = "CR800_2Visualization.html"> CR800_2 Data Visualization </a>
<h1>Data From CR800</h1>
<div id="content">
<div class = "compare-label">Start Date:</div>
<input type="text" id="start-date" class="text ui-widget-content ui-corner-all compare-input">
<div class = "compare-label">End Date:</div>
<input type="text" id="end-date" class="text ui-widget-content ui-corner-all compare-input">
</div>
<div id="legend"></div>
<div id="chart_container">
<div id="chart"></div>
<div id="timeline"></div>
<div id="preview"></div>
</div>
</body>
<style>
#chart_container {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
#chart {
position: relative;
left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
#legend {
display: inline-block;
vertical-align: top;
margin: 0 0 0 10px
}
</style>
<script>
var start = new Date(2014, 5-1, 19);
var end = new Date();
$( "#start-date" ).datepicker({ onSelect: function(dateText) {
$( "#legend" ).empty();
$( "#chart_container" ).html('<div id="chart"></div><div id="timeline"></div><div id="preview"></div>');
start = new Date(dateText);
display("start: " + start + "; end: " + end);
test(start.getTime(), end.getTime());
}
});
$( "#start-date" ).datepicker("setDate", start);
$( "#end-date" ).datepicker({ onSelect: function(dateText) {
$( "#legend" ).empty();
$( "#chart_container" ).html('<div id="chart"></div><div id="timeline"></div><div id="preview"></div>');
end = new Date(dateText);
display("start: " + start + "; end: " + end);
test(start.getTime(), end.getTime());
}
});
$( "#end-date" ).datepicker("setDate", end);
function displayChange(dateText) {
display("Selected date: " + dateText);
}
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
var palette = new Rickshaw.Color.Palette();
document.write("start: " + start + "<br>")
document.write("end: " + end + "<br>")
document.write("start-time: " + start.getTime() + "<br>")
document.write("end-time: " + end.getTime() + "<br>")
function test(start, end) {
// start and end times in seconds.miliseconds (3 decimal places)
var diff = (end/1000)-(start/1000);
display("diff: " + diff)
// default = every 1 min
var downsample = "1m-avg"
// if diff > 1 day, then 15 min
if (diff > (60*60*24)) {
downsample = "15m-avg";
}
// if diff > 3 days, then hourly
if (diff > (60*60*24*3)) {
downsample = "1h-avg";
}
// if diff > 1 week, then 6-hr
if (diff > (60*60*24*7)) {
downsample = "6h-avg";
}
// if diff > 3 weeks, then 12-hr
if (diff > (60*60*24*21)) {
downsample = "12h-avg";
}
// if diff > 5 weeks, then daily
if (diff > (60*60*24*35)) {
downsample = "1d-avg";
}
// if diff > 6 moths, then weekly
if (diff > (60*60*24*30*6)) {
downsample = "1w-avg";
}
queryData =
{
"start": start,
"end": end,
"queries": [{
"aggregator": "max",
"metric": "Test",
"rate": false,
"tags": {
"sensor_name": "batt_volt_Min",
"sensor_units": "Units",
"sensor_processing": "Min"
},
"downsample": downsample
},
{
"aggregator": "max",
"metric": "Test",
"rate": false,
"tags": {
"sensor_name": "PTemp",
"sensor_units": "Units",
"sensor_processing": "Smp"
},
"downsample": downsample
}]
}
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"
});
setTimeout(liveData, 60*15*1000); //auto refresh every 15 minute
}
catch (err) {
console.log(err.stack);
}
}
function showError(error) {