mbstacy/urlDataProxy.html

## urlDataProxy.html
<html>
<head>
<script type="text/javascript" src="http://static.cybercommons.org/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://static.cybercommons.org/js/jquery.flot.js"></script>
<script type="text/javascript" src="http://static.cybercommons.org/js/jquery.flot.time.js"></script>
</head>
<style>
.placeholder{
    width:800px;
    height:540px;
    margin:60px;
}
.xAxis > .tickLabel
{
    margin-top:40px;
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script>
$(document).ready( function() {
  setpage('http://waterservices.usgs.gov/nwis/iv/?format=json&huc=11090203&period=P3D')
  function setpage(url){
    var options = {
            lines: {show: true},
            points: {show: true},
            xaxis: { mode:"time",timeformat: "%m/%d/%y %H:%M "}
        };
    $.getJSON('http://test.oklahomawatersurvey.org/data/proxy/?url='.concat(encodeURIComponent(url)).concat('&callback=?'),function(fdata){
        $.each( fdata.value.timeSeries, function( key, value ) {
            $('#output').append(value.sourceInfo.siteName + '<br>')
            $('#output').append(value.variable.variableDescription + '<br>')
            var variable = value.variable.variableDescription;
            var flotdiv='placeholder'+ key;
            $('#output').append('<div id="'+ flotdiv +  '" class="placeholder"></div>');
            if(value.values[0].value !== undefined){
                var data={label:variable,data:[]}
                $.each(value.values[0].value, function (key, val){
                    var dt=new Date(val.dateTime)
                    data.data.push([dt,parseFloat(val.value)])
                });
            }else{
                var data={label: variable,data:null}
            }
            $.plot('#' + flotdiv, [data], options);
        });
    });

  }
});
</script>
<body>
<div id='output'></div>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://static.cybercommons.org/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://static.cybercommons.org/js/jquery.flot.js"></script>
	<script type="text/javascript" src="http://static.cybercommons.org/js/jquery.flot.time.js"></script>
	</head>
	<style>
	.placeholder{
	width:800px;
	height:540px;
	margin:60px;
	}
	.xAxis > .tickLabel
	{
	margin-top:40px;
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}
	</style>
	<script>
	$(document).ready( function() {
	setpage('http://waterservices.usgs.gov/nwis/iv/?format=json&huc=11090203&period=P3D')
	function setpage(url){
	var options = {
	lines: {show: true},
	points: {show: true},
	xaxis: { mode:"time",timeformat: "%m/%d/%y %H:%M "}
	};
	$.getJSON('http://test.oklahomawatersurvey.org/data/proxy/?url='.concat(encodeURIComponent(url)).concat('&callback=?'),function(fdata){
	$.each( fdata.value.timeSeries, function( key, value ) {
	$('#output').append(value.sourceInfo.siteName + '<br>')
	$('#output').append(value.variable.variableDescription + '<br>')
	var variable = value.variable.variableDescription;
	var flotdiv='placeholder'+ key;
	$('#output').append('<div id="'+ flotdiv + '" class="placeholder"></div>');
	if(value.values[0].value !== undefined){
	var data={label:variable,data:[]}
	$.each(value.values[0].value, function (key, val){
	var dt=new Date(val.dateTime)
	data.data.push([dt,parseFloat(val.value)])
	});
	}else{
	var data={label: variable,data:null}
	}
	$.plot('#' + flotdiv, [data], options);
	});
	});

	}
	});
	</script>
	<body>
	<div id='output'></div>
	</body>
	</html>