0

I am looking to attempt to create a web app with the Esri Javascript API that is half map, half scatterplot. There would be one hosted feature layer in the web map, that has two variables in the attributes.

I would like to mimic some of the functionality that is available with ArcGIS Pro charts:

  • Scatterplot will respect what is in the current map extent (example)
  • If you interact with features in the map, they are highlighted in the scatterplot (example)
  • Vice versa of above (select points in scatterplot, selects corresponding features in the map

Lower Priority Requirements:

  • Draws a trend line through the scatterplot
  • Scatterplot will respect the symbology of the hosted feature layer (example)

enter image description here

I have tried building an app with Cedar, but my Javascript skills are very out of date. Will try to add a JSFiddle once I have something that actually resembles the above. Would love a headstart from someone who has more experience with Cedar and the Esri Javascript API.

UPDATE

Have made some progress in an application available here.

Remaining Issues:

  1. Selecting a point on the chart = does not select the corresponding feature
  2. Selecting an individual feature in map = does not select point in chart
  3. Getting undefined on the chart points. Suspect fixing this might fix 1 & 2
  4. Making the chart respect the colors from the classification served up from the hosted feature service not respected (nice to have)

enter image description here

1

Great question. And fortunately, simple answer: Case Sensitivity.

Your layer has attributes GRID_ID and FREQUENCY but throughout your example you use grid_id and frequency. I made some changes to your code to fix that issue as well as add map feature (graphic) click to chart highlight.

Code comparison

Working example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.