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: 600px;"></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&parameterIds=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>

 

 

 

 

  • No labels