ui.Chart ফাংশন একটি ক্লায়েন্ট-সাইড JSON অবজেক্ট থেকে চার্ট রেন্ডার করে যা Google চার্ট DataTable , ক্লাসের মতো একই কাঠামো অনুসরণ করে, কিন্তু DataTable পদ্ধতি এবং পরিবর্তনযোগ্যতার অভাব রয়েছে। এটি মূলত সারি সহ একটি 2-ডি টেবিল যা পর্যবেক্ষণের প্রতিনিধিত্ব করে এবং কলামগুলি যা পর্যবেক্ষণের বৈশিষ্ট্যগুলিকে উপস্থাপন করে। এটি আর্থ ইঞ্জিনে চার্ট করার জন্য একটি নমনীয়, বেস ইন্টারফেস প্রদান করে। উচ্চ মাত্রার চার্ট কাস্টমাইজেশনের প্রয়োজন হলে এটি একটি ভাল বিকল্প।
DataTable স্কিমা
আর্থ ইঞ্জিনে একটি ছদ্ম- DataTable সংজ্ঞায়িত করার দুটি উপায় রয়েছে: একটি জাভাস্ক্রিপ্ট 2-ডি অ্যারে এবং একটি জাভাস্ক্রিপ্ট আক্ষরিক বস্তু। বেশিরভাগ অ্যাপ্লিকেশনের জন্য, একটি 2-ডি অ্যারে তৈরি করা সবচেয়ে সহজ পদ্ধতি হবে। উভয় ক্ষেত্রেই, টেবিলটি ui.Chart এ পাস করা একটি ক্লায়েন্ট-সাইড অবজেক্ট হতে হবে। একটি ম্যানুয়ালি কোড করা টেবিলটি অন্তর্নিহিতভাবে ক্লায়েন্ট-সাইড হবে, যেখানে একটি গণনা করা বস্তুকে evaluate ব্যবহার করে ক্লায়েন্ট-সাইড স্থানান্তর করতে হবে। সার্ভার-সাইড এবং ক্লায়েন্ট-সাইড অবজেক্টের মধ্যে পার্থক্য সম্পর্কে আরও তথ্যের জন্য দয়া করে ক্লায়েন্ট বনাম সার্ভার পৃষ্ঠাটি দেখুন।
জাভাস্ক্রিপ্ট অ্যারে
একটি 2-ডি 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 | স্ট্রিং, ঐচ্ছিক | একটি সংখ্যা (বা তারিখ) ফর্ম্যাট স্ট্রিং যা কলামের মান কীভাবে প্রদর্শন করতে হয় তা উল্লেখ করে। |
জাভাস্ক্রিপ্ট অবজেক্ট
একটি DataTable একটি জাভাস্ক্রিপ্ট আক্ষরিক অবজেক্ট হিসাবে ফর্ম্যাট করা যেতে পারে যেখানে সারি এবং কলাম অবজেক্টের অ্যারে প্রদান করা হয়। কলাম এবং সারি পরামিতি নির্দিষ্ট করার নির্দেশাবলীর জন্য এই নির্দেশিকাটি দেখুন।
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 এর আদমশুমারি থেকে নির্বাচিত রাজ্য জনসংখ্যাকে একটি জাভাস্ক্রিপ্ট অ্যারে হিসাবে এনকোড করা হয়েছে কলাম হেডার অবজেক্টের সাথে যা কলামের বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে। উল্লেখ্য যে তৃতীয় কলামটি 'annotation' এর ভূমিকার জন্য মনোনীত করা হয়েছে, যা চার্টের প্রতিটি পর্যবেক্ষণে একটি টীকা হিসাবে জনসংখ্যা যোগ করে।
কোড এডিটর (জাভাস্ক্রিপ্ট)
// 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 অ্যারে একটি 2-D ee.List থেকে তৈরি করা যেতে পারে। তালিকা সার্ভার থেকে evaluate মাধ্যমে ক্লায়েন্টের কাছে পাঠানো হয়েছে। একটি সাধারণ দৃশ্যকল্প হল একটি ee.FeatureCollection , ee.ImageCollection বা এগুলির উপাদান-ভিত্তিক হ্রাসের বৈশিষ্ট্যগুলিকে DataTable রূপান্তর করা। নিম্নলিখিত উদাহরণগুলিতে প্রয়োগ করা কৌশলটি একটি ee.ImageCollection উপর একটি ফাংশন ম্যাপ করে যা প্রদত্ত উপাদানকে হ্রাস করে, হ্রাসের ফলাফল থেকে একটি ee.List একত্রিত করে এবং প্রত্যাবর্তিত উপাদানের সাথে 'row' নামক একটি বৈশিষ্ট্য হিসাবে তালিকাটিকে সংযুক্ত করে। নতুন সংগ্রহের প্রতিটি উপাদানের একটি 1-D ee.List রয়েছে যা একটি DataTable একটি সারি প্রতিনিধিত্ব করে। aggregate_array() ফাংশনটি সমস্ত 'row' বৈশিষ্ট্যগুলিকে একটি প্যারেন্ট ee.List এ একত্রিত করতে ব্যবহৃত হয়। একটি 2-D সার্ভার-সাইড ee.List তৈরি করতে তালিকা। DataTable এর জন্য প্রয়োজনীয় আকারে তালিকা। একটি কাস্টম কলাম শিরোনাম টেবিলের সাথে সংযুক্ত করা হয় এবং ফলাফলটি evaluate সহ ক্লায়েন্ট-সাইড স্থানান্তরিত হয়, যেখানে এটি ui.Chart ফাংশন ব্যবহার করে রেন্ডার করা হয়।
অঞ্চল অনুসারে টাইম সিরিজ
এই উদাহরণটি একটি অরণ্য পরিবেশের জন্য MODIS- থেকে প্রাপ্ত NDVI এবং EVI গাছপালা সূচকগুলির একটি টাইম সিরিজ দেখায়। সিরিজের প্রতিটি চিত্র ইকোরিজিয়ন দ্বারা হ্রাস করা হয় এবং এর ফলাফলগুলিকে একটি 'row' বৈশিষ্ট্য হিসাবে একত্রিত করা হয় যা ক্লায়েন্টের কাছে পাঠানোর জন্য এবং ui.Chart এর সাথে চার্ট করার জন্য DataTable একত্রিত হয়। মনে রাখবেন যে এই স্নিপেটটি ui.Chart.image.series চার্ট উদাহরণ দ্বারা তৈরি একই চার্ট তৈরি করে।
কোড এডিটর (জাভাস্ক্রিপ্ট)
// 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' বৈশিষ্ট্যের সুবিধা নেয়। চার্টটি Monterey, CA-এর কাছে একটি পিক্সেলের জন্য বার্ষিক NDVI প্রোফাইল এবং আন্তঃবার্ষিক প্রকরণ সম্পর্কিত। আন্তঃবার্ষিক মাঝামাঝি একটি রেখা হিসাবে উপস্থাপিত হয়, যখন পরম এবং আন্তঃবৃত্তীয় রেঞ্জগুলি ব্যান্ড হিসাবে দেখানো হয়। প্রতিটি ব্যবধানের প্রতিনিধিত্বকারী সারণি কলামগুলি 'role' কলামের বৈশিষ্ট্যকে 'interval' হিসাবে সেট করার মাধ্যমে বরাদ্দ করা হয়। intervals.style চার্ট প্রপার্টি 'area' হিসেবে সেট করে মধ্যরেখার চারপাশে ব্যান্ড আঁকা হয়।
কোড এডিটর (জাভাস্ক্রিপ্ট)
// 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); });
