Google Earth Engine – How to Reset Charts Displayed on Map

google-earth-enginegoogle-earth-engine-javascript-api

I have created an Earth Engine app in which user selects a class from dropdown menu. When a class is selected and load button is clicked chart is displayed on Map as well as other layers. When I select another class from dropdown the second chart is also loaded while the first chart is removed. But when I select the first class again or reload the same class the chart is not displayed / hides on map. This is my code

https://code.earthengine.google.com/710462bab06b19d49b3a811984b013e4 Complete app code here with all layers

var loadComposite = function() {
  var gv = Selector.getValue();
  if(gv=='SRTM'){
  Map.layers().reset();
  Map.clear(); 
  Map.add(mainPanel)
  Map.drawingTools().setShown(false);
  Map.setOptions('SATELLITE');
Map.addLayer(SRTM)
Map.add(chart) //this is first chart
}

else if(gv=='Slope'){
  Map.layers().reset();
  Map.clear(); 
  Map.add(mainPanel)
  Map.drawingTools().setShown(false);
  Map.setOptions('SATELLITE');
Map.addLayer(ee.Terrain.slope(SRTM))
Map.add(chart2) //this is second chart
})

This is how app chart is displayed on map when a layer is loaded for the first time
First Time Loaded

But when same layer is loaded again, all layers are displayed but same chart hides
Chart Hides

Also, how do I fix the width of chart displayed on Map?

Best Answer

You have to re-create the chart the second time around. To do that, simply create functions for creating the charts.

function chart() {
  return ui.Chart.array.values({
  ...
}

function chart2() {
  return ui.Chart.array.values({
  ...
}

...

var loadComposite = function() {
  ...
  Map.add(chart())
  ...
  Map.add(chart2())
  ...
}

https://code.earthengine.google.com/c33c1a2fde399b57793c95955102bb0c

Related Question