Tools‎ > ‎

GC Graph Widget

The graph widget is a java script library to easily display and compare time series data of the ag|knowledge service. It makes quantitative comparisons of vegetation vitality (NDVI) easy. You can compare several fields or years. It is based on the charts library. The java script can be changed if needed to adapt the functionality. If done so we would like to be notified about changes and new versions of the widget.

ATTENTION: When you give your customers access to this widget it is important that you don't expose your API key to them. Instead you should use a proxy.

Documentation


Include in the header the following lines
<head>
    <title>GC Line Graph API Demo</title>
    <script src="./js/Chart.bundle.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="./js/gc_scripts.js"></script>

    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
canvas {
   background-image: url(images/geo.PNG);
background-repeat: no-repeat;
background-size: 3%;
background-position: right center;
}
    </style>
</head>

The graph is drawn on the canvas. To initiate the drawing and set the global options use e.g.

<body>
    <div style="width:95%">
         <canvas id="canvas "gc-title="Graphs" gc-api=<your-key> gc-host="" gc-product="vitality" gc-xaxis="Month" gc-yaxis="NDVI" gc-xunit="month" gc-ymin="-0.1" gc-ymax="0.9" gc-startdate="2016-11-01" gc-enddate="2017-08-30">

Available global options:

 Tag Default Description
 gc-title    "Parcel Graph" Title, displayed above the graph
 gc-api  - Mandatory API key to be used
 gc-host https://geocledian.com/agknow/api/v3/parcels/ URL to parcel resource to be used
 gc-product     "vitality" Product to be used, currently only "vitality" and "variations" are supported
 gc-xtext  "Month" Title of the X-Axis
 gc-ytext "Vitality" Title of the Y-Axis
 gc-xunit  "month" Units displayed on X-Axis, supported "month", "DOY" (day of the year)
 gc-ymin automatic Minimum Y value of graph to be displayed, if not defined ymin will be determined automatically from the data displayed.
 gc-ymax  automatic Maximum Y value of graph to be displayed, if not defined ymin will be determined automatically from the data displayed.
 gc-start automatic Start date on x-axis to be displayed ISO format "YYYY-MM-DD". If not defined it will be determines automatically from the data.
 gc-end automatic End date on x-axis to be displayed ISO format "YYYY-MM-DD". If not defined it will be determines automatically from the data.

For each line in the graph add a <div> section below such as

<div gc-parcelid="65450" gc-type="mean" gc-startdate="2016-11-01" gc-enddate="2017-08-30" gc-type="mean" gc-legend="Sentinel 65427" gc-color="Blue" gc-width="2" gc-timeShift="" gc-source="sentinel2" gc-display="true"></div>

Available options per line:

 Tag Default Description
 gc-parcel - Mandatory parcel ID for which the time series shall be displayed
 gc-type "mean" Type of data to be displayed for this parcel. Options are: "mean", "stddev", "min", "max", "meanNormalized", "2SigmaPlus", "2SigmaMinus". The option "meanNormalized" calculates the positive maximum value for each line and divides each value by this maximum. The options "2SigmaPlus" and "2SigmaMinus" draw a line 2 * stddev above or below the mean value. Should be used in combination with displaying the "mean" graph for this parcel
 gc-start - Start date to be used for this line. If not set all the data available for this parcel will be displayed.
 gc-end -  End date to be used for this line. If not set all the data available for this parcel will be displayed.
 gc-source - Allows to select the data source such as "Sentinel2" or "Landsat8". If not set all sources will be displayed.
 gc-timeShift 0 Allows to define a time period (in month, integer) the graph will be shifted for this parcel. Example: by using timeShift = 12 parcel data for 2016 can be overlayed with data from 2017
 gc-legend - Text to be displayed in the legend for this line
 gc-color random Color to be used for the line. Can be defined as hex ("#RRGGBB") of by name (e.g. "Red" or "Black". If not defined a random color will be generated.
 gc-style "curved" Defines the line style. Available are: "curved", "linear", "dotted"
 gc-width 3 Allows to define the line width in points.

At the end close the first </div> section.

Known issues

  • When hovering over a data point (mouse-over), sometimes another data point is highlighted too. This should be solved in a future version.

Download

ċ
GC_GraphWidget_delivery3.zip
(267k)
Florian Schlenz,
12 Mar 2018, 08:58
Comments