The following is a time series plot using jquery and the morrisjs plot library.
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) { if (status === 'ok') { var result = []; 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, // The name of the data record attribute that contains x-values. xkey: 'date', // A list of names of data record attributes that contain y-values. ykeys: ['value'], // Labels for the ykeys -- will be displayed when you hover over the // chart. labels: ['T.obs.mean'] }); }; $.getJSON(url, callback.bind(this, 'ok')).fail(callback.bind(this, 'error')); }); </script> |