The following is a time series plot using jquery and the morris.js plot library.
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="http://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:8080/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>