arcgis-pro – How to Get Basic Statistics from a Feature Server and Display in ArcGIS JavaScript

arcgis-maps-sdk-javascriptarcgis-proweb-mapping

I use ArcGIS Pro 2.9.0 and ArcGIS JavaScript. I am new to using my feature sets with ArcGIS JavaScript.

I have a point feature set on ArcGIS Online (https://services2.arcgis.com/iVTT0jpvWSmHS8yL/arcgis/rest/services/GPR_punkt/FeatureServer/layers) that has two attributes I want to show some basic statistics of. It is the column year and hectare.

By doing summarize and create bar chart of the summarization in ArcGIS Pro, I got exactly what I want, a simple and basic statistic over the area (in hecatare) that has been run each year:

The problem arises when I want to show this in my online map (located at https://kartla.xyz/html/gf.html)

I am unsure what tool is the right one for this, and I want one that does not use the current map view or anything like that. Only a statistic for all of the records.

I created a box (I found an example online) that I want to populate with this data:

// UI-element

const titleContent = document.createElement("div");
titleContent.style.padding = "15px";
titleContent.style.backgroundColor = "white";
titleContent.style.width = "500px"; titleContent.innerHTML = [
"

Vi tester

", ].join(" ");

const titleExpand = new Expand({
expandIconClass: "esri-icon-dashboard",
expandToottip: "Summary stats",
view: view,
content: titleContent,
expanded: view.widthBreakpoint !== "xsmall" }); view.ui.add(titleExpand, "top-right");

Should I do a query inside this? Or is histogram or StatisticDefinition the best solution? I know I could just paste a picture of my findings from ArcGIS Pro, but then I have a problem when I add more data for 2021.

Best Answer

Using the ArcGIS API for JavaScript, once the layer has loaded, you can use a "group by" query on the layer to get the summary statistics that you want. Then display/format the table/chart as you wish.

Snippet:

  gfPunkt.when(() => {
    const statsQuery = gfPunkt.createQuery();
    // create a query for both Count and Hectares
    statsQuery.outStatistics = [
      {
        onStatisticField: "hectare",
        outStatisticFieldName: "Counts",
        statisticType: "count"
      },
      {
        onStatisticField: "hectare",
        outStatisticFieldName: "Hectares",
        statisticType: "sum"
      }
    ];
    // group by year
    statsQuery.groupByFieldsForStatistics = ["year"];
    // return the results ordered by year
    statsQuery.orderByFields = "year";
    gfPunkt.queryFeatures(statsQuery).then(displayResults);
  });

Full example code at https://codepen.io/bsvensson/pen/WNZQoqO

Resources:

Related Solutions

[GIS] How to programmatically change the timeExtent of a Map & update the timeSlider

You are approaching this backwards--the time slider's time extent updates the map's time extent, not the other way around. It's my understanding that the map.setTimeExtent() function should only be called when a time slider is not in use.

You should be setting the extent of the time slider and setting the position of the time thumb(s), which then updates the current time extent of the map.

If you have already configured your time slider, this is as simple as:

// Assuming time slider has a single time thumb
timeSlider.setThumbIndexes([0]);

This will move the time slider's thumb position to the first time stop, which will then update the map's time extent to match. Any time-enabled layers will be listening for this event and will redraw automatically.

If you have two time thumbs, you have to set the index of each one:

// Moves first time thumb to the first time stop and the second time thumb to the second time stop
timeSlider.setThumbIndexes([0,1]);

Here is a more complete example, assuming you have data valid on the first day of each month:

var timeStops = [new Date(2013, 0, 1), new Date(2013, 1, 1), new Date(2013, 2, 1), new Date(2013, 3, 1), new Date(2013, 4, 1), new Date(2013, 5, 1), new Date(2013, 6, 1), new Date(2013, 7, 1), new Date(2013, 8, 1), new Date(2013, 9, 1), new Date(2013, 10, 1), new Date(2013, 11, 1)]

var timeSlider = new esri.dijit.TimeSlider({style: "width: 100%;"}, dojo.byId("timeSliderDiv"));
map.setTimeSlider(timeSlider);

timeSlider.setTimeStops(timeStops);
// Assuming slider has only one thumb:
timeSlider.setThumbCount(1);
// Set position of time slider's thumb to the first date (January 1, 2013):
timeSlider.setThumbIndexes([0]);
// Set animation speed to 1 second:
timeSlider.setThumbMovingRate(1000);
// Time slider thumb position represents an instantaneous time, rather than cumulative:
timeSlider.singleThumbAsTimeInstant(true);
// Allow animation to loop:
timeSlider.setLoop(true);
// Start it up!
timeSlider.startup();

If you already have a time slider and need to reset its time extent:

timeSlider.setTimeStops(newTimeStops);
// Assuming time slider has only one time thumb:
timeSlider.setThumbIndexes([newThumbIndex]);
// startup() must be called after updating time stops:
timeSlider.startup();

[GIS] How to toggle ArcGIS webmap layers using ArcGIS Javascript API

The layer object returned via the createMap response doesn't have the property "setVisibility."

However, it does has a property called "layerObject," which seems to be the actual map object. The code snippet below does the trick:

 layer.layerObject.setVisibility(true)

Best Answer

Related Solutions

[GIS] How to programmatically change the timeExtent of a Map & update the timeSlider

[GIS] How to toggle ArcGIS webmap layers using ArcGIS Javascript API

Related Question