ui.Chart
फ़ंक्शन, क्लाइंट-साइड JSON ऑब्जेक्ट से चार्ट रेंडर करता है. यह ऑब्जेक्ट, Google Charts DataTable
क्लास के स्ट्रक्चर का पालन करता है. हालांकि, इसमें DataTable
के तरीके और डेटा में बदलाव करने की सुविधा नहीं होती. यह एक 2-D टेबल होती है, जिसमें ऑब्ज़र्वेशन दिखाने वाली पंक्तियां और ऑब्ज़र्वेशन एट्रिब्यूट दिखाने वाले कॉलम होते हैं. यह Earth Engine में चार्ट बनाने के लिए, आसान और बुनियादी इंटरफ़ेस उपलब्ध कराता है. यह एक अच्छा विकल्प है, जब चार्ट को ज़्यादा कस्टमाइज़ करना ज़रूरी हो.
DataTable
स्कीमा
Earth Engine में स्यूडो-DataTable
तय करने के दो तरीके हैं: JavaScript के 2-D कलेक्शन और JavaScript के लिटरल ऑब्जेक्ट. ज़्यादातर ऐप्लिकेशन के लिए, 2-D ऐरे बनाना सबसे आसान तरीका होगा. दोनों ही मामलों में, ui.Chart
फ़ंक्शन में पास की गई टेबल, क्लाइंट-साइड ऑब्जेक्ट होनी चाहिए. मैन्युअल तरीके से कोड की गई टेबल, अपने-आप क्लाइंट-साइड पर दिखेगी. वहीं, कैलकुलेट किए गए ऑब्जेक्ट को evaluate
का इस्तेमाल करके, क्लाइंट-साइड पर ट्रांसफ़र करना होगा. सर्वर-साइड और क्लाइंट-साइड ऑब्जेक्ट के बीच के अंतर के बारे में ज़्यादा जानने के लिए, कृपया क्लाइंट बनाम सर्वर पेज देखें.
JavaScript ऐरे
दो-डाइमेंशन वाला DataTable
, पंक्तियों और कॉलम के ऐरे से बना होता है. पंक्तियां, ऑब्ज़र्वेशन होती हैं और कॉलम, एट्रिब्यूट होते हैं. पहला कॉलम, x-ऐक्सिस की वैल्यू तय करता है, जबकि अन्य कॉलम, y-ऐक्सिस की सीरीज़ की वैल्यू तय करते हैं. पहली लाइन, कॉलम हेडर होनी चाहिए. सबसे आसान हेडर, कॉलम लेबल की एक सीरीज़ होती है. इसे यहां दिए गए ऐरे DataTable
में दिखाया गया है, जिसमें चुने गए राज्यों के हिसाब से जनसंख्या की जानकारी दी गई है.
var dataTable = [ ['State', 'Population'], ['CA', 37253956], ['NY', 19378102], ['IL', 12830632], ['MI', 9883640], ['OR', 3831074], ];
इसके अलावा, कॉलम को डोमेन (x-ऐक्सिस) और डेटा (y-ऐक्सिस सीरीज़) के अलावा किसी दूसरी भूमिका के लिए भी तय किया जा सकता है. जैसे, एनोटेशन, इंटरवल, टूलटिप या स्टाइल. नीचे दिए गए उदाहरण में, हेडर कलेक्शन को ऑब्जेक्ट की सीरीज़ के तौर पर दिखाया गया है. इसमें हर कॉलम की भूमिका साफ़ तौर पर बताई गई है. Google चार्ट के हर टाइप के लिए, कॉलम की स्वीकार की जा सकने वाली भूमिकाओं के बारे में उनके दस्तावेज़ों में बताया गया है. उदाहरण के लिए, कॉलम चार्ट का डेटा फ़ॉर्मैट.
var dataTable = [ [{role: 'domain'}, {role: 'data'}, {role: 'annotation'}], ['CA', 37253956, '37.2e6'], ['NY', 19378102, '19.3e6'], ['IL', 12830632, '12.8e6'], ['MI', 9883640, '9.8e6'], ['OR', 3831074, '3.8e6'], ];
कॉलम प्रॉपर्टी इस तरह से तय की जाती हैं:
पैरामीटर | टाइप | परिभाषा |
---|---|---|
type |
स्ट्रिंग, सुझाई गई | कॉलम का डेटा टाइप: 'string' , 'number' , 'boolean' , 'date' , 'datetime' या 'timeofday' . |
label |
स्ट्रिंग, सुझाई गई | चार्ट के लेजेंड में कॉलम के लिए लेबल, सीरीज़ का लेबल. |
role |
स्ट्रिंग, सुझाई गई | कॉलम की भूमिका (उदाहरण के लिए, कॉलम चार्ट के लिए भूमिकाएं). |
pattern |
स्ट्रिंग, ज़रूरी नहीं है | संख्या (या तारीख) के फ़ॉर्मैट की स्ट्रिंग, जिसमें कॉलम की वैल्यू दिखाने का तरीका बताया गया हो. |
JavaScript ऑब्जेक्ट
DataTable
को JavaScript लिटरल ऑब्जेक्ट के तौर पर फ़ॉर्मैट किया जा सकता है, जहां पंक्ति और कॉलम ऑब्जेक्ट के ऐरे दिए जाते हैं. कॉलम और पंक्ति पैरामीटर तय करने के निर्देशों के लिए, यह गाइड देखें.
var dataTable = { cols: [{id: 'name', label: 'State', type: 'string'}, {id: 'pop', label: 'Population', type: 'number'}], rows: [{c: [{v: 'CA'}, {v: 37253956}]}, {c: [{v: 'NY'}, {v: 19378102}]}, {c: [{v: 'IL'}, {v: 12830632}]}, {c: [{v: 'MI'}, {v: 9883640}]}, {c: [{v: 'OR'}, {v: 3831074}]}] };
मैन्युअल DataTable
चार्ट
मान लें कि आपके पास थोड़ा स्टैटिक डेटा है और आपको उसे चार्ट में दिखाना है.
ui.Chart
फ़ंक्शन में पास करने के लिए इनपुट बनाने के लिए, JavaScript कलेक्शन या
ऑब्जेक्ट की जानकारी का इस्तेमाल करें. यहां, अमेरिका की 2010 की जनगणना में चुनी गई राज्य की जनसंख्या को कॉलम हेडर ऑब्जेक्ट के साथ JavaScript कलेक्शन के तौर पर एन्कोड किया गया है. ये ऑब्जेक्ट, कॉलम की प्रॉपर्टी तय करते हैं. ध्यान दें कि तीसरे कॉलम को 'annotation'
की भूमिका दी गई है. यह चार्ट में हर अवलोकन में, जनसंख्या को एनोटेशन के तौर पर जोड़ता है.
कोड एडिटर (JavaScript)
// Define a DataTable using a JavaScript array with a column property header. var dataTable = [ [ {label: 'State', role: 'domain', type: 'string'}, {label: 'Population', role: 'data', type: 'number'}, {label: 'Pop. annotation', role: 'annotation', type: 'string'} ], ['CA', 37253956, '37.2e6'], ['NY', 19378102, '19.3e6'], ['IL', 12830632, '12.8e6'], ['MI', 9883640, '9.8e6'], ['OR', 3831074, '3.8e6'] ]; // Define the chart and print it to the console. var chart = ui.Chart(dataTable).setChartType('ColumnChart').setOptions({ title: 'State Population (US census, 2010)', legend: {position: 'none'}, hAxis: {title: 'State', titleTextStyle: {italic: false, bold: true}}, vAxis: {title: 'Population', titleTextStyle: {italic: false, bold: true}}, colors: ['1d6b99'] }); print(chart);
कंप्यूट किया गया DataTable
चार्ट
DataTable
कलेक्शन, evaluate
के ज़रिए सर्वर से क्लाइंट को भेजे गए 2-D ee.List
से बनाया जा सकता है. आम तौर पर, ee.FeatureCollection
, ee.ImageCollection
की प्रॉपर्टी को DataTable
में बदला जाता है. इसके अलावा, एलिमेंट के हिसाब से इन प्रॉपर्टी को कम करके भी DataTable
में बदला जा सकता है. नीचे दिए गए उदाहरणों में बताई गई रणनीति, ee.ImageCollection
पर फ़ंक्शन को मैप करती है. यह फ़ंक्शन, दिए गए एलिमेंट को कम करता है, कम किए गए एलिमेंट के नतीजों से ee.List
को इकट्ठा करता है, और लिस्ट को 'row'
नाम की प्रॉपर्टी के तौर पर, दिखाए गए एलिमेंट से जोड़ता है. नए कलेक्शन के हर एलिमेंट में एक-डाइमेंशन वाला ee.List
होता है, जो DataTable
में मौजूद किसी लाइन को दिखाता है.
aggregate_array()
फ़ंक्शन का इस्तेमाल, सभी 'row'
प्रॉपर्टी को पैरंट ee.List
में एग्रीगेट करने के लिए किया जाता है. इससे DataTable
के लिए ज़रूरी आकार में, सर्वर साइड ee.List
का 2-D वर्शन बनाया जा सकता है. कस्टम कॉलम हेडर को टेबल में जोड़ दिया जाता है और नतीजे को evaluate
की मदद से क्लाइंट-साइड पर ट्रांसफ़र कर दिया जाता है. यहां इसे ui.Chart
फ़ंक्शन का इस्तेमाल करके रेंडर किया जाता है.
इलाके के हिसाब से टाइम सीरीज़
इस उदाहरण में, जंगल वाले इको-क्षेत्र के लिए, MODIS से मिले एनडीवीआई और ईवीआई वनस्पति के इंडेक्स की टाइम सीरीज़ दिखाई गई है. सीरीज़ में मौजूद हर इमेज को इको-क्षेत्र के हिसाब से कम किया जाता है. साथ ही, इसके नतीजों को 'row'
प्रॉपर्टी के तौर पर इकट्ठा किया जाता है. इस प्रॉपर्टी को क्लाइंट को भेजने और ui.Chart
के साथ चार्ट बनाने के लिए, DataTable
में एग्रीगेट किया जाता है. ध्यान दें कि यह स्निपेट, ui.Chart.image.series
चार्ट के उदाहरण से जनरेट किया गया वही चार्ट दिखाता है.
कोड एडिटर (JavaScript)
// Import the example feature collection and subset the forest feature. var forest = ee.FeatureCollection('projects/google/charts_feature_example') .filter(ee.Filter.eq('label', 'Forest')); // Load MODIS vegetation indices data and subset a decade of images. var vegIndices = ee.ImageCollection('MODIS/061/MOD13A1') .filter(ee.Filter.date('2010-01-01', '2020-01-01')) .select(['NDVI', 'EVI']); // Define a function to format an image timestamp as a JavaScript Date string. function formatDate(img) { var millis = img.date().millis().format(); return ee.String('Date(').cat(millis).cat(')'); } // Build a feature collection where each feature has a property that represents // a DataFrame row. var reductionTable = vegIndices.map(function(img) { // Reduce the image to the mean of pixels intersecting the forest ecoregion. var stat = img.reduceRegion( {reducer: ee.Reducer.mean(), geometry: forest, scale: 500}); // Extract the reduction results along with the image date. var date = formatDate(img); // x-axis values. var evi = stat.get('EVI'); // y-axis series 1 values. var ndvi = stat.get('NDVI'); // y-axis series 2 values. // Make a list of observation attributes to define a row in the DataTable. var row = ee.List([date, evi, ndvi]); // Return the row as a property of an ee.Feature. return ee.Feature(null, {'row': row}); }); // Aggregate the 'row' property from all features in the new feature collection // to make a server-side 2-D list (DataTable). var dataTableServer = reductionTable.aggregate_array('row'); // Define column names and properties for the DataTable. The order should // correspond to the order in the construction of the 'row' property above. var columnHeader = ee.List([[ {label: 'Date', role: 'domain', type: 'date'}, {label: 'EVI', role: 'data', type: 'number'}, {label: 'NDVI', role: 'data', type: 'number'} ]]); // Concatenate the column header to the table. dataTableServer = columnHeader.cat(dataTableServer); // Use 'evaluate' to transfer the server-side table to the client, define the // chart and print it to the console. dataTableServer.evaluate(function(dataTableClient) { var chart = ui.Chart(dataTableClient).setOptions({ title: 'Average Vegetation Index Value by Date for Forest', hAxis: { title: 'Date', titleTextStyle: {italic: false, bold: true}, }, vAxis: { title: 'Vegetation index (x1e4)', titleTextStyle: {italic: false, bold: true} }, lineWidth: 5, colors: ['e37d05', '1d6b99'], curveType: 'function' }); print(chart); });
इंटरवल चार्ट
यह चार्ट, इंटरवल चार्ट जनरेट करने के लिए, DataTable
कॉलम 'role'
प्रॉपर्टी का फ़ायदा लेता है.
इस चार्ट में, कैलिफ़ोर्निया के मॉन्टेरी के पास मौजूद एक पिक्सल के लिए, सालाना एनडीडब्ल्यूआई प्रोफ़ाइल और साल-दर-साल के अंतर की जानकारी दी गई है.
साल-दर-साल के मीडियन को लाइन के तौर पर दिखाया जाता है, जबकि पूरी और इंटरक्वार्टील रेंज को बैंड के तौर पर दिखाया जाता है. हर इंटरवल को दिखाने वाले टेबल कॉलम को, 'role'
कॉलम प्रॉपर्टी को 'interval'
के तौर पर सेट करके असाइन किया जाता है. intervals.style
चार्ट प्रॉपर्टी को 'area'
के तौर पर सेट करके, मीडियन लाइन के चारों ओर बैंड बनाए जाते हैं.
कोड एडिटर (JavaScript)
// Define a point to extract an NDVI time series for. var geometry = ee.Geometry.Point([-121.679, 36.479]); // Define a band of interest (NDVI), import the MODIS vegetation index dataset, // and select the band. var band = 'NDVI'; var ndviCol = ee.ImageCollection('MODIS/006/MOD13Q1').select(band); // Map over the collection to add a day of year (doy) property to each image. ndviCol = ndviCol.map(function(img) { var doy = ee.Date(img.get('system:time_start')).getRelative('day', 'year'); // Add 8 to day of year number so that the doy label represents the middle of // the 16-day MODIS NDVI composite. return img.set('doy', ee.Number(doy).add(8)); }); // Join all coincident day of year observations into a set of image collections. var distinctDOY = ndviCol.filterDate('2013-01-01', '2014-01-01'); var filter = ee.Filter.equals({leftField: 'doy', rightField: 'doy'}); var join = ee.Join.saveAll('doy_matches'); var joinCol = ee.ImageCollection(join.apply(distinctDOY, ndviCol, filter)); // Calculate the absolute range, interquartile range, and median for the set // of images composing each coincident doy observation group. The result is // an image collection with an image representative per unique doy observation // with bands that describe the 0, 25, 50, 75, 100 percentiles for the set of // coincident doy images. var comp = ee.ImageCollection(joinCol.map(function(img) { var doyCol = ee.ImageCollection.fromImages(img.get('doy_matches')); return doyCol .reduce(ee.Reducer.percentile( [0, 25, 50, 75, 100], ['p0', 'p25', 'p50', 'p75', 'p100'])) .set({'doy': img.get('doy')}); })); // Extract the inter-annual NDVI doy percentile statistics for the // point of interest per unique doy representative. The result is // is a feature collection where each feature is a doy representative that // contains a property (row) describing the respective inter-annual NDVI // variance, formatted as a list of values. var reductionTable = comp.map(function(img) { var stats = ee.Dictionary(img.reduceRegion( {reducer: ee.Reducer.first(), geometry: geometry, scale: 250})); // Order the percentile reduction elements according to how you want columns // in the DataTable arranged (x-axis values need to be first). var row = ee.List([ img.get('doy'), // x-axis, day of year. stats.get(band + '_p50'), // y-axis, median. stats.get(band + '_p0'), // y-axis, min interval. stats.get(band + '_p25'), // y-axis, 1st quartile interval. stats.get(band + '_p75'), // y-axis, 3rd quartile interval. stats.get(band + '_p100') // y-axis, max interval. ]); // Return the row as a property of an ee.Feature. return ee.Feature(null, {row: row}); }); // Aggregate the 'row' properties to make a server-side 2-D array (DataTable). var dataTableServer = reductionTable.aggregate_array('row'); // Define column names and properties for the DataTable. The order should // correspond to the order in the construction of the 'row' property above. var columnHeader = ee.List([[ {label: 'Day of year', role: 'domain'}, {label: 'Median', role: 'data'}, {label: 'p0', role: 'interval'}, {label: 'p25', role: 'interval'}, {label: 'p75', role: 'interval'}, {label: 'p100', role: 'interval'} ]]); // Concatenate the column header to the table. dataTableServer = columnHeader.cat(dataTableServer); // Use 'evaluate' to transfer the server-side table to the client, define the // chart and print it to the console. dataTableServer.evaluate(function(dataTableClient) { var chart = ui.Chart(dataTableClient).setChartType('LineChart').setOptions({ title: 'Annual NDVI Time Series with Inter-Annual Variance', intervals: {style: 'area'}, hAxis: { title: 'Day of year', titleTextStyle: {italic: false, bold: true}, }, vAxis: {title: 'NDVI (x1e4)', titleTextStyle: {italic: false, bold: true}}, colors: ['0f8755'], legend: {position: 'none'} }); print(chart); });
इंटरवल को दिखाने के कई तरीके हैं. नीचे दिए गए उदाहरण में, intervals.style
प्रॉपर्टी को 'boxes'
में बदलकर, बैंड के बजाय बॉक्स का इस्तेमाल किया गया है. साथ ही, बॉक्स की स्टाइल भी बदली गई है.
dataTableServer.evaluate(function(dataTableClient) { var chart = ui.Chart(dataTableClient).setChartType('LineChart').setOptions({ title: 'Annual NDVI Time Series with Inter-Annual Variance', intervals: {style: 'boxes', barWidth: 1, boxWidth: 1, lineWidth: 0}, hAxis: { title: 'Day of year', titleTextStyle: {italic: false, bold: true}, }, vAxis: {title: 'NDVI (x1e4)', titleTextStyle: {italic: false, bold: true}}, colors: ['0f8755'], legend: {position: 'none'} }); print(chart); });