DataTables এবং DataViews

এই পৃষ্ঠাটি চার্ট দ্বারা ব্যবহৃত অভ্যন্তরীণ ডেটা উপস্থাপনা, একটি চার্টে ডেটা পাস করার জন্য ব্যবহৃত DataTable এবং DataView ক্লাস এবং একটি DataTable কে তাৎক্ষণিক ও পপুলেট করার বিভিন্ন উপায় নিয়ে আলোচনা করে।

বিষয়বস্তু

  1. একটি চার্টে ডেটা কীভাবে উপস্থাপন করা হয়
  2. কি টেবিল স্কিমা আমার চার্ট ব্যবহার করে?
  3. DataTables এবং DataViews
  4. একটি ডেটা টেবিল তৈরি এবং জনবহুল করা
    1. একটি নতুন ডেটা টেবিল তৈরি করুন, তারপর addColumn()/addRows()/addRow()/setCell() কল করুন
    2. arrayToDataTable()
    3. জাভাস্ক্রিপ্ট আক্ষরিক ইনিশিয়ালাইজার
    4. একটি ডেটাসোর্স কোয়েরি পাঠানো হচ্ছে
  5. dataTableToCsv()
  6. অধিক তথ্য

একটি চার্টে ডেটা কীভাবে উপস্থাপন করা হয়

সমস্ত চার্ট একটি টেবিলে তাদের ডেটা সংরক্ষণ করে। এখানে একটি জনবহুল দুই-কলাম ডেটা টেবিলের একটি সরলীকৃত উপস্থাপনা রয়েছে:

সূচক: 0
প্রকার: স্ট্রিং
লেবেল: 'টাস্ক'

 সূচক: 1
প্রকার: সংখ্যা
লেবেল: 'প্রতিদিন ঘন্টা'
'কাজ' 11
'খাওয়া' 2
'বিনিময় করা' 2
'টিভি দেখ' 2
'ঘুম' 7

ডেটা ( সারি , কলাম ) হিসাবে উল্লেখ করা কক্ষগুলিতে সংরক্ষণ করা হয়, যেখানে সারি একটি শূন্য-ভিত্তিক সারি সূচক, এবং কলাম হয় একটি শূন্য-ভিত্তিক কলাম সূচক বা একটি অনন্য ID যা আপনি নির্দিষ্ট করতে পারেন।

এখানে টেবিলের সমর্থিত উপাদান এবং বৈশিষ্ট্যগুলির আরও সম্পূর্ণ তালিকা রয়েছে; আরো বিস্তারিত জানার জন্য কনস্ট্রাক্টরের জাভাস্ক্রিপ্ট লিটারাল প্যারামিটারের ফর্ম্যাটটি দেখুন:

  • সারণি - কলাম এবং সারিগুলির একটি বিন্যাস, সাথে ইচ্ছামত নাম/মান জোড়ার একটি ঐচ্ছিক মানচিত্র যা আপনি বরাদ্দ করতে পারেন৷ টেবিল-স্তরের বৈশিষ্ট্যগুলি বর্তমানে চার্ট দ্বারা ব্যবহৃত হয় না।
  • কলাম - প্রতিটি কলাম একটি প্রয়োজনীয় ডেটা টাইপ সমর্থন করে, সাথে একটি ঐচ্ছিক স্ট্রিং লেবেল, আইডি, প্যাটার্ন, এবং ইচ্ছামত নাম/মান বৈশিষ্ট্যের মানচিত্র। লেবেলটি একটি ব্যবহারকারী-বান্ধব স্ট্রিং যা চার্ট দ্বারা প্রদর্শিত হতে পারে; আইডি একটি ঐচ্ছিক শনাক্তকারী যা একটি কলাম সূচকের জায়গায় ব্যবহার করা যেতে পারে। শূন্য-ভিত্তিক সূচক বা ঐচ্ছিক ID দ্বারা কোডে একটি কলাম উল্লেখ করা যেতে পারে। সমর্থিত ডেটা প্রকারের তালিকার জন্য DataTable.addColumn() দেখুন।
  • সারি - একটি সারি হল কক্ষগুলির একটি অ্যারে, এছাড়াও ইচ্ছাকৃত নাম/মান জোড়ার একটি ঐচ্ছিক মানচিত্র যা আপনি বরাদ্দ করতে পারেন৷
  • কক্ষ - প্রতিটি কক্ষ হল একটি বস্তু যাতে কলামের প্রকারের একটি প্রকৃত মান রয়েছে, এছাড়াও আপনি যে মানটি প্রদান করেন তার একটি ঐচ্ছিক স্ট্রিং-ফরম্যাট করা সংস্করণ৷ উদাহরণস্বরূপ: একটি সাংখ্যিক কলাম মান 7 এবং বিন্যাসিত মান "সাত" নির্ধারণ করা যেতে পারে। যদি একটি বিন্যাসিত মান সরবরাহ করা হয়, তাহলে একটি চার্ট গণনা এবং রেন্ডারিংয়ের জন্য প্রকৃত মান ব্যবহার করবে, তবে উপযুক্ত যেখানে ফর্ম্যাট করা মান দেখাতে পারে, উদাহরণস্বরূপ যদি ব্যবহারকারী একটি বিন্দুর উপর ঘোরায়। প্রতিটি কক্ষের ইচ্ছামত নাম/মান জোড়ার একটি ঐচ্ছিক মানচিত্রও রয়েছে।

কি টেবিল স্কিমা আমার চার্ট ব্যবহার করে?

বিভিন্ন চার্ট বিভিন্ন ফরম্যাটে টেবিল ব্যবহার করে: উদাহরণস্বরূপ, একটি পাই চার্ট একটি স্ট্রিং কলাম এবং একটি সংখ্যা কলাম সহ একটি দুই-কলামের টেবিল আশা করে, যেখানে প্রতিটি সারি একটি স্লাইস বর্ণনা করে এবং প্রথম কলামটি স্লাইস লেবেল এবং দ্বিতীয় কলামটি স্লাইস মান। একটি স্ক্যাটার চার্ট, তবে, দুটি সাংখ্যিক কলাম সমন্বিত একটি টেবিল আশা করে, যেখানে প্রতিটি সারি একটি বিন্দু এবং দুটি কলাম হল বিন্দুর X এবং Y মান। আপনার চার্টের ডকুমেন্টেশন পড়ুন এটি জানতে কি ডেটা বিন্যাস প্রয়োজন।

DataTables এবং DataViews

একটি চার্ট ডেটা টেবিল জাভাস্ক্রিপ্টে একটি DataTable অবজেক্ট বা একটি DataView অবজেক্ট দ্বারা উপস্থাপিত হয়। কিছু ক্ষেত্রে, আপনি ব্যবহার করা DataTable এর একটি JavaScript আক্ষরিক বা JSON সংস্করণ দেখতে পারেন, উদাহরণস্বরূপ যখন চার্ট টুলস ডেটাসোর্স দ্বারা ইন্টারনেটে ডেটা পাঠানো হয়, বা একটি ChartWrapper জন্য সম্ভাব্য ইনপুট মান হিসাবে।

একটি DataTable মূল ডেটা টেবিল তৈরি করতে ব্যবহৃত হয়। একটি DataView হল একটি সুবিধার শ্রেণী যা একটি DataTable এর শুধুমাত্র পঠনযোগ্য ভিউ প্রদান করে, লিঙ্ক করা, মূল ডেটা পরিবর্তন না করে দ্রুত সারি বা কলামগুলিকে লুকিয়ে রাখার বা পুনর্বিন্যাস করার পদ্ধতি সহ। এখানে দুটি শ্রেণীর একটি সংক্ষিপ্ত তুলনা:

ডেটা টেবিল ডেটাভিউ
পড়ুন/লিখুন শুধুমাত্র পাঠযোগ্য
খালি এবং তারপর জনবহুল তৈরি করা যেতে পারে একটি বিদ্যমান DataTable একটি রেফারেন্স। স্ক্র্যাচ থেকে জনবহুল করা যাবে না; একটি বিদ্যমান DataTable রেফারেন্স সহ তাৎক্ষণিক হতে হবে।
ডেটা স্টোরেজ স্পেস লাগে। ডেটা একটি বিদ্যমান DataTable এর একটি রেফারেন্স, এবং স্থান খরচ করে না।
সারি, কলাম এবং ডেটা যোগ/সম্পাদনা/মুছে ফেলতে পারে এবং সমস্ত পরিবর্তন স্থায়ী হয়। অন্তর্নিহিত ডেটা পরিবর্তন না করে সারি সাজাতে বা ফিল্টার করতে পারে। সারি এবং কলাম লুকানো এবং বারবার প্রকাশ করা যেতে পারে।
ক্লোন করা যায় দৃশ্যের একটি DataTable সংস্করণ ফেরত দিতে পারে
উৎস তথ্য; রেফারেন্স ধারণ করে না একটি DataTable একটি লাইভ রেফারেন্স; DataTable ডেটাতে যেকোনো পরিবর্তন অবিলম্বে দৃশ্যে প্রতিফলিত হয়।
একটি তথ্য উৎস হিসাবে একটি চার্টে পাস করা যেতে পারে একটি তথ্য উৎস হিসাবে একটি চার্টে পাস করা যেতে পারে
গণনা করা কলাম সমর্থন করে না গণনা করা কলামগুলিকে সমর্থন করে, যা অন্য কলামগুলিকে একত্রিত বা ম্যানিপুলেট করে ফ্লাইতে গণনা করা একটি মান সহ কলাম।
কোনো সারি বা কলাম লুকানো নেই নির্বাচিত কলাম লুকাতে বা দেখাতে পারে

একটি ডেটা টেবিল তৈরি এবং জনবহুল করা

একটি DataTable তৈরি এবং পপুলেট করার বিভিন্ন উপায় রয়েছে:

খালি DataTable + addColumn()/addRows()/addRow()/setCell()

পদক্ষেপ:

  1. একটি নতুন DataTable টেবিল ইনস্ট্যান্টিয়েট করুন
  2. কলাম যোগ করুন
  3. এক বা একাধিক সারি যোগ করুন, ঐচ্ছিকভাবে ডেটা দিয়ে জনবহুল। আপনি খালি সারি যোগ করতে পারেন এবং পরে তাদের পূরণ করতে পারেন। এছাড়াও আপনি সারি অতিরিক্ত সারি যোগ বা অপসারণ করতে পারেন বা পৃথকভাবে সেল মান সম্পাদনা করতে পারেন।

সুবিধাদি:

  • আপনি প্রতিটি কলামের ডেটা টাইপ এবং লেবেল নির্দিষ্ট করতে পারেন।
  • ব্রাউজারে টেবিল তৈরি করার জন্য ভাল, এবং JSON আক্ষরিক পদ্ধতির চেয়ে কম টাইপ করার প্রবণতা।

অসুবিধা:

  • একটি ওয়েব সার্ভারে প্রোগ্রাম্যাটিকভাবে পৃষ্ঠা তৈরি করার সময় ডেটাটেবল কনস্ট্রাক্টরে পাস করার জন্য একটি JSON আক্ষরিক স্ট্রিং তৈরি করা ততটা কার্যকর নয়।
  • ব্রাউজারের গতির উপর নির্ভর করে এবং বড় টেবিল (প্রায় 1,000+ সেল) সহ JSON আক্ষরিক স্ট্রিংগুলির চেয়ে ধীর হতে পারে।

উদাহরণ:

এই কৌশলটির বিভিন্ন বৈচিত্র ব্যবহার করে একই ডেটা টেবিল তৈরি করার কয়েকটি উদাহরণ এখানে দেওয়া হল:

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

arrayToDataTable()

এই সাহায্যকারী ফাংশন একটি একক কল ব্যবহার করে একটি ডেটা টেবিল তৈরি করে এবং DataTable করে।

সুবিধাদি:

  • ব্রাউজারে নির্বাহ করা খুব সহজ এবং পঠনযোগ্য কোড।
  • আপনি হয় স্পষ্টভাবে প্রতিটি কলামের ডেটা টাইপ নির্দিষ্ট করতে পারেন, অথবা Google চার্টগুলিকে পাস করা ডেটা থেকে ধরণটি অনুমান করতে দিন৷
    • একটি কলামের ডেটা টাইপ সুস্পষ্টভাবে নির্দিষ্ট করতে, type বৈশিষ্ট্য সহ হেডার সারিতে একটি বস্তু নির্দিষ্ট করুন।
    • Google চার্টগুলিকে ধরণ অনুমান করতে, কলাম লেবেলের জন্য একটি স্ট্রিং ব্যবহার করুন৷

উদাহরণ:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.


var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

জাভাস্ক্রিপ্ট লিটারেল ইনিশিয়ালাইজার

আপনি একটি জাভাস্ক্রিপ্ট আক্ষরিক বস্তু আপনার টেবিল কনস্ট্রাক্টরে পাস করতে পারেন, টেবিল স্কিমা এবং ঐচ্ছিকভাবে ডেটাও সংজ্ঞায়িত করে।

সুবিধাদি:

  • আপনার ওয়েব সার্ভারে ডেটা তৈরি করার সময় দরকারী।
  • বড় টেবিলের (প্রায় 1,000+ কোষ) জন্য অন্যান্য পদ্ধতির তুলনায় দ্রুত প্রক্রিয়া

অসুবিধা:

  • সিনট্যাক্স সঠিক হওয়া কঠিন, এবং টাইপোর প্রবণ।
  • খুব পঠনযোগ্য কোড নয়।
  • লোভনীয়ভাবে অনুরূপ, কিন্তু অভিন্ন নয়, JSON.

উদাহরণ:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

একটি ডেটাসোর্স কোয়েরি পাঠানো হচ্ছে

যখন আপনি একটি চার্ট টুলস ডেটাসোর্সে একটি প্রশ্ন পাঠান , একটি সফল উত্তর একটি ডেটাটেবল উদাহরণ। এই প্রত্যাবর্তনকৃত DataTable অন্য কোন DataTable এর মতই একটি DataView-এ কপি, পরিবর্তিত বা অনুলিপি করা যেতে পারে।

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

সহায়ক ফাংশন google.visualization.dataTableToCsv( data ) ডেটা টেবিল থেকে ডেটা সহ একটি CSV স্ট্রিং প্রদান করে৷

এই ফাংশনের ইনপুট একটি DataTable বা DataView হতে পারে।

এটি কোষের বিন্যাসিত মান ব্যবহার করে। কলাম লেবেল উপেক্ষা করা হয়.

বিশেষ অক্ষর যেমন " , " এবং " \n " স্ট্যান্ডার্ড CSV এস্কেপিং নিয়মগুলি ব্যবহার করে এস্কেপ করা হয়৷

নিম্নলিখিত কোড প্রদর্শিত হবে

Ramanujan,1729
Gauss,5050

আপনার ব্রাউজারের জাভাস্ক্রিপ্ট কনসোলে:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

অধিক তথ্য