Tutorial 6.2

2. Script structure

2.6. Add Panel for displaying charts

Below code snippet add panel in left side of the web application to display some text, and on click results like values and charts.


// Now For the web application we want to create a left panel which will display

// time series plots on click on map inside ulb

// Let us create two charts i) monthly precipitation and ii) dekadal ETIa of two years

// Also display elevation value on click on a pixel

 

///////////////////Insert Panels to display charts and results ///////////////

// Create an empty panel and let us add the remaining panels as sub panels to this one

var panel = ui.Panel({

    style: {fontSize: '20px'color: '114982'}

});

 

// Create a panel to display some labels like text

var text = ui.Panel([

  ui.Label({

    value: 'My first App',

    style: {fontSize: '30px'fontWeight: 'bold'color: '#2F4F4F'}

  }),

  ui.Label({

    value:'Click a point on the map to explore the variable over time',

    style: {fontSize: '14px'fontWeight: 'bold'maxWidth: '400px'color: '#2F4F4F'}

  }),

]);

// Add the new text panel to the root panel.

panel.add(text);

 

// Create a panel to display elevation value on click

var inspector = ui.Panel([ui.Label('Click to get Elevation')]);

panel.add(inspector);

 

// Below we are going to define panels to display dynamic objects -

// Elevation values, precipitation chart, ETIa chart

 

Map.onClick(function(coords) {

   // Add a chart to put monthly precipitation chart

  var point = ee.Geometry.Point(coords.loncoords.lat);

  var dot = ui.Map.Layer(point, {color: 'FF0000'});

  Map.layers().set(1dot);

  var sample = dsm_ulb.sample(point30);

  var computedValue = sample.first().get('DSM');

  // Request the value from the server.

  computedValue.evaluate(function(result) {

  // When the server returns the value, show it.

  inspector.widgets().set(0ui.Label({

  value: 'Elevation: ' + result,

    }));

  });

    var chart1 = ui.Chart.image.series({

    imageCollection: pcp_monthly.select(['precipitation']),

    region: point

    reducer: ee.Reducer.mean(), 

    scale: 30

  });

  chart1.setOptions({

    title: 'Monthly Precipitation 2019',

    vAxis: {title: 'P (mm)'gridlines: {count: 10}},

    hAxis: {title: 'month'format: 'MM-yy'gridlines: {count: 10}},

    label: 'ETa',

    width: 250,

    height: 250,

    //interpolateNulls: true,

    //curveType: 'function'

  });

  chart1.setChartType('ColumnChart');

  panel.widgets().set(2chart1);

       //////Second chart

    var chart2 = ui.Chart.image.series({

    imageCollection: ETIa_filt.select('L1_AETI_D'),

    region: point

    reducer: ee.Reducer.mean(), 

    scale: 250

  });

  chart2.setOptions({

    title: 'Dekadal ETIa',

    vAxis: {title: 'ETIa'gridlines: {count: 10}, maxValue: 0.5minValue: 0 },

    hAxis: {title: 'month'format: 'MM-yy'gridlines: {count: 10}},

    width: 250,

    height: 250,

    colors: ['#09F310'],

    interpolateNulls: true,

    curveType: 'function'

  });

  panel.widgets().set(3chart2);

});

 

// Add the above defined panel to root

ui.root.insert(0panel);