...
Code Block | ||
---|---|---|
| ||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<div id="fews-plot" style="height: 800px;"></div>
<script>
$(document).ready(function () {
// Get timeseries from FEWS using the PI_JSON and show plot
var url = 'http://localhost:8181/FewsWebServices/rest/fewspiservice/v1/timeseries?documentFormat=PI_JSON&moduleInstanceIds=ImportObserved&locationIds=63306260000¶meterIds=T.obs.mean&startTime=2001-01-01T00:00:00Z&endTime=2017-01-01T00:00:00Z&documentVersion=1.23';
var callback = function (status, data) {
var result = [];
if (status === 'ok') {
var events = data.timeSeries[0].events;
var header = data.timeSeries[0].header;
$.each(events, function (key, val) {
var dateTime = "" + val.date + " " + val.time;
var value = val.value;
var dataObject = {};
if (header.missVal !== val.value) {
dataObject.date = dateTime;
dataObject.value = value;
result.push(dataObject);
}
});
}
var graph = new Morris.Line({
element: 'fews-plot', data: result,
xkey: 'date',
ykeys: ['value'],
labels: ['T.obs.mean']
});
};
$.getJSON(url, callback.bind(this, 'ok')).fail(callback.bind(this, 'error'));
});
</script> |
...