চার্টের ধরন তৈরি করা

এই পৃষ্ঠাটি বর্ণনা করে যে কীভাবে আপনার নিজস্ব চার্টের ধরন বিকাশ করা যায় এবং এটি ব্যবহারকারীদের কাছে উপলব্ধ করা যায়।

শ্রোতা

এই পৃষ্ঠাটি অনুমান করে যে আপনি চার্ট ব্যবহার করার পৃষ্ঠাটি পড়েছেন। এটি অনুমান করে যে আপনি জাভাস্ক্রিপ্ট এবং অবজেক্ট-ওরিয়েন্টেড প্রোগ্রামিংয়ের সাথে পরিচিত। ওয়েবে অনেক জাভাস্ক্রিপ্ট টিউটোরিয়াল পাওয়া যায়।

একটি চার্ট তৈরি করা

চার্টগুলি আপনার তৈরি করা জাভাস্ক্রিপ্ট লাইব্রেরির মাধ্যমে ব্যবহারকারীর কাছে প্রকাশ করা হয়। এখানে একটি চার্ট লাইব্রেরি তৈরির পদক্ষেপগুলি রয়েছে:

  1. আপনার কোডের জন্য একটি নামস্থান চয়ন করুন। অন্যান্য পৃষ্ঠাগুলি আপনার কোড হোস্ট করা হবে; আপনি নামকরণ দ্বন্দ্ব এড়াতে চেষ্টা করা উচিত.
  2. আপনার চার্ট বস্তু বাস্তবায়ন. একটি জাভাস্ক্রিপ্ট অবজেক্ট প্রয়োগ করুন যা নিম্নলিখিতগুলি প্রকাশ করে:
    • একজন কনস্ট্রাক্টর,
    • কনস্ট্রাক্টরের কাছে পাঠানো DOM উপাদানের ভিতরে আপনার অবজেক্ট আঁকার জন্য একটি draw() পদ্ধতি,
    • ক্লায়েন্টের ব্যবহার করার জন্য অন্য কোনো ঐচ্ছিক মানক পদ্ধতি, যেমন getSelection() , এবং
    • কোনো কাস্টম পদ্ধতি যা আপনি আপনার ক্লায়েন্টদের কাছে প্রকাশ করতে চান।
  3. [ ঐচ্ছিক ] ক্লায়েন্টকে ধরার জন্য আপনি যে ইভেন্টগুলি চালাতে চান তা বাস্তবায়ন করুন ৷
  4. আপনার চার্টের জন্য ডকুমেন্টেশন লিখুন। আপনি যদি এটি নথিভুক্ত না করেন, লোকেরা সম্ভবত এটি এম্বেড করতে সক্ষম হবে না।
  5. চার্ট গ্যালারিতে আপনার চার্ট পোস্ট করুন।

টিপ

  • আপনি আপনার IDE (কোড এডিটর) এ স্বয়ংসম্পূর্ণতা সক্ষম করতে goog.visualization API ক্লাস এবং পদ্ধতির সংজ্ঞা ডাউনলোড করতে পারেন। http://www.google.com/uds/modules/gviz/gviz-api.js থেকে ফাইলটি ডাউনলোড করুন এবং আপনার প্রকল্পে সংরক্ষণ করুন। বেশিরভাগ IDE স্বয়ংক্রিয়ভাবে সূচী করবে এবং স্বয়ংসম্পূর্ণতা সক্ষম করবে, যদিও আপনার IDE ভিন্ন হতে পারে। মনে রাখবেন যে ফাইলটি সবসময় আপ টু ডেট নাও হতে পারে; সর্বাধিক আপ টু ডেট API রেফারেন্সের জন্য রেফারেন্স পৃষ্ঠাগুলি পরীক্ষা করুন৷

একটি নামস্থান চয়ন করুন

আপনার চার্টটি এমন একটি পৃষ্ঠায় এম্বেড করা যেতে পারে যা অন্যান্য চার্ট বা অন্যান্য সম্পর্কহীন জাভাস্ক্রিপ্ট হোস্ট করে। অন্যান্য কোড বা CSS শ্রেণীর নামের সাথে নামকরণের দ্বন্দ্ব এড়াতে, আপনার চার্ট কোডের জন্য একটি অনন্য নামস্থান বেছে নেওয়া উচিত। একটি নেমস্পেসের জন্য একটি ভাল পছন্দ হল URL যা আপনি আপনার স্ক্রিপ্ট হোস্ট করতে ব্যবহার করবেন (WWW এবং যেকোনো এক্সটেনশন বিয়োগ করুন)। সুতরাং, উদাহরণস্বরূপ, যদি আপনার চার্ট www.example.com-এ পোস্ট করা হয়, আপনি আপনার অনন্য নামস্থান হিসাবে example ব্যবহার করবেন। আপনি অতিরিক্ত প্রত্যয় যোগ করতে পারেন, দ্বারা পৃথক। চিহ্ন, আপনার চার্টকে আরও গোষ্ঠীবদ্ধ করতে (গুগলের সমস্ত চার্টের নামস্থান google.visualization আছে)। আপনার চার্ট অবজেক্ট, সেইসাথে আপনার প্রয়োজন হতে পারে এমন যেকোনো গ্লোবাল ভেরিয়েবল সংরক্ষণ করতে আপনার নেমস্পেস অবজেক্ট ব্যবহার করুন।

এখানে MyTable নামক একটি চার্ট ক্লাস রাখার জন্য একটি নেমস্পেস অবজেক্ট তৈরি করার একটি উদাহরণ রয়েছে, সেইসাথে যেকোন গ্লোবাল ভেরিয়েবলের প্রয়োজন:

// Namespace, implemented as a global variable.
var example = {};

// MyTable class constructor.
example.MyTable = function(container) {
  // ...
}

// MyTable.draw() method.
example.MyTable.prototype.draw = function(data, options) {
  // ...
}

CSS দ্বন্দ্ব এড়ানো

আপনি যদি CSS ব্যবহার করেন, তাহলে নিশ্চিত করুন যে পৃষ্ঠার অন্যান্য চার্টকে প্রভাবিত করতে পারে এমন CSS নিয়ম না লিখুন। উদাহরণস্বরূপ, td {color: blue;} এর মতো একটি নিয়ম অত্যন্ত নিরুৎসাহিত করা হয়, কারণ এটি শুধুমাত্র আপনার চার্টের মধ্যে নয়, পৃষ্ঠার অন্য কোনো <td> উপাদানকেও প্রভাবিত করবে। এটি কাটিয়ে ওঠার একটি উপায় হল আপনার পুরো চার্টকে <div> -এ একটি ক্লাসের নাম দিয়ে আবদ্ধ করা, এবং আপনার সমস্ত CSS নিয়মগুলি শুধুমাত্র সেই উপাদানগুলির জন্য প্রযোজ্য যা সেই শ্রেণীর নামের একটি উপাদানের বংশধর৷ উদাহরণ স্বরূপ, নিম্নলিখিত CSS নিয়মটি শুধুমাত্র <td> উপাদানগুলিকে প্রভাবিত করবে যেগুলির একটি পূর্বপুরুষ হিসাবে ক্লাস নাম "example" সহ একটি উপাদান রয়েছে৷

td.example {color: blue;}

তারপর আপনি একটি <div> এর সাথে আপনার চার্ট মোড়ানো করতে পারেন:

<div class="example">
  ...
</div>

আপনার চার্ট বাস্তবায়ন

আপনাকে একটি জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে আপনার চার্ট বাস্তবায়ন করতে হবে যা রেফারেন্স বিভাগে বর্ণিত মানক পদ্ধতিগুলিকে প্রকাশ করে। দুটি প্রয়োজনীয় পদ্ধতি হল কনস্ট্রাক্টর এবং ড্র() পদ্ধতি। আপনি আপনার ব্যবহারকারীর কাছে আপনার চার্টের জন্য উপযুক্ত যে কোনো অতিরিক্ত পদ্ধতিও প্রকাশ করতে পারেন। শুধু মনে রাখবেন যে ব্যবহার করা সহজ।

কনস্ট্রাক্টর

আপনার চার্টে একটি একক কনস্ট্রাক্টরকে প্রকাশ করা উচিত যা একটি একক প্যারামিটার নেয়, একটি DOM উপাদান যার মধ্যে আপনি আপনার চার্ট আঁকবেন। সাধারণত, চার্ট পরে ব্যবহারের জন্য কনস্ট্রাক্টরে এই উপাদানটির একটি স্থানীয় অনুলিপি সংরক্ষণ করে:

function example.MyTable(container) {
  this.container = container
}

draw() পদ্ধতি

আপনার চার্ট ক্লাসে আপনার চার্ট ক্লাসের প্রোটোটাইপে সংজ্ঞায়িত একটি পদ্ধতি draw() থাকা উচিত। draw() পদ্ধতি দুটি পরামিতি গ্রহণ করে:

  1. একটি DataTable যা প্রদর্শনের জন্য ডেটা ধারণ করে।
  2. আপনার চার্টের জন্য নাম/মূল্য বিকল্পগুলির একটি ঐচ্ছিক মানচিত্র। আপনার নির্দিষ্ট চার্টের জন্য বিকল্পগুলির নাম এবং মান প্রকারগুলি আপনার দ্বারা সংজ্ঞায়িত করা হয়েছে। উদাহরণস্বরূপ, নীচের হ্যালো চার্ট উদাহরণে, চার্টটি বুলিয়ান টাইপের মান সহ 'showLineNumber' নামের একটি বিকল্পকে সমর্থন করে। প্রতিটি বিকল্পের জন্য আপনার একটি ডিফল্ট মান সমর্থন করা উচিত, যদি ব্যবহারকারী একটি নির্দিষ্ট বিকল্পের জন্য একটি মান পাস না করে। এই প্যারামিটারটি ঐচ্ছিক, তাই ব্যবহারকারী যদি এই প্যারামিটারে পাস না করে তবে আপনাকে সমস্ত ডিফল্ট মান ব্যবহার করার জন্য প্রস্তুত থাকতে হবে ( আরো তথ্য )।
example.MyTable.prototype.draw = function(data, options) {
  // Process data and options and render output into the container element.
  ...
}

হ্যালো চার্ট!

এখানে একটি সাধারণ চার্ট যা একটি HTML টেবিল হিসাবে একটি DataTable ডেটা প্রদর্শন করে:

এবং এখানে বাস্তবায়ন কোড:

// Declare a unique namespace.
var example = {};

// Class constructor. Parameter container is a DOM elementon the client that
// that will contain the chart.
example.MyTable = function(container) {
  this.containerElement = container;
}

// Main drawing logic.
// Parameters:
//   data is data to display, type google.visualization.DataTable.
//   options is a name/value map of options. Our example takes one option.
example.MyTable.prototype.draw = function(data, options) {

  // Create an HTML table
  var showLineNumber = options.showLineNumber; // Boolean configuration option.

  var html = [];
  html.push('<table border="1">');

  // Header row
  html.push('<tr>');
  if (showLineNumber) {
    html.push('<th>Seq</th>');
  }
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>');
  }
  html.push('</tr>');

  for (var row = 0; row < data.getNumberOfRows(); row++) {
    html.push('<tr>');
    if (showLineNumber) {
      html.push('<td align="right">', (row + 1), '</td>');
    }

    for (var col = 0; col < data.getNumberOfColumns(); col++) {
      html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>');
      html.push(this.escapeHtml(data.getFormattedValue(row, col)));
      html.push('</td>');
    }
    html.push('</tr>');
  }
  html.push('</table>');

  this.containerElement.innerHTML = html.join('');
}

// Utility function to escape HTML special characters
example.MyTable.prototype.escapeHtml = function(text) {
  if (text == null)
    return '';
  return text.replace(/&/g, '&').replace(/</g, '<')
      .replace(/>/g, '>').replace(/"/g, '"');
}

একটি ওয়েব পৃষ্ঠায় আপনার চার্ট সহ

পূর্ববর্তী চার্টটি ব্যবহার করতে, এটিকে আপনার ব্রাউজার থেকে অ্যাক্সেসযোগ্য একটি .js ফাইলে সংরক্ষণ করুন৷ তারপর আপনার জাভাস্ক্রিপ্ট ফাইলে নির্দেশ করতে <script> সোর্স প্যারামিটার পরিবর্তন করে নিম্নলিখিত কোডটি সংরক্ষণ করুন:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="mytablevis.js"></script>
    <script type="text/javascript">
      google.charts.load("current");

      // Set callback to run when API is loaded
      google.charts.setOnLoadCallback(drawVisualization);

      // Called when the Chart API is loaded.
      function drawVisualization() {

        // Create and populate a data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Daily Hours');
        data.addRows(5);
        data.setCell(0, 0, 'Work');
        data.setCell(0, 1, 11);
        // Add more data rows and cells here

        // Instantiate our table object.
        var vis = new example.MyTable(document.getElementById('mydiv'));

        // Draw our table with the data we created locally.
        vis.draw(data, {showLineNumber: true});
       }
   </script>
  <title>MyTable example page</title></head>
  <body>
    <div id="mydiv"></div>
    <p>This page demonstrates hosting a table visualization.</p>
  </body>
</html>

আপনার ইভেন্ট বাস্তবায়ন

আপনি যদি চান যে আপনার চার্ট দরকারী ইভেন্টগুলি (উদাহরণস্বরূপ, টাইমার ইভেন্ট বা ব্যবহারকারীর দ্বারা সূচিত ইভেন্ট যেমন ক্লিকগুলি) চালু করতে চান, তাহলে আপনাকে আপনার ইভেন্টের বিশদ বিবরণ সহ google.visualization.events.trigger ফাংশনে কল করতে হবে (নাম, পাঠাতে বৈশিষ্ট্য, ইত্যাদি)। আপনি ঘটনা পৃষ্ঠায় বিস্তারিত জানতে পারেন. আপনি ইভেন্ট অবজেক্টে বৈশিষ্ট্য যোগ করে আপনার ইভেন্টের বিবরণ ক্লায়েন্টের কাছে প্রকাশ করতে পারেন, অথবা আপনি আপনার চার্টে কিছু ধরনের একটি get...() পদ্ধতি প্রকাশ করতে পারেন এবং ক্লায়েন্ট ইভেন্টের বিবরণ পেতে সেই পদ্ধতিটিকে কল করতে পারে। উভয় ক্ষেত্রেই, আপনার পদ্ধতি বা ইভেন্ট বৈশিষ্ট্যগুলি ভালভাবে নথিভুক্ত করুন।

আপনার চার্ট ডকুমেন্ট করুন

আপনি যদি আপনার চার্টটি সঠিকভাবে নথিভুক্ত না করেন তবে আপনি সম্ভবত অনেক ব্যবহারকারী পাবেন না। নিম্নলিখিত নথিভুক্ত করতে ভুলবেন না:

  • আপনি সমর্থন করেন এমন সমস্ত পদ্ধতি বর্ণনা করুন। draw() পদ্ধতিটি সব চার্টে সাধারণ, কিন্তু প্রতিটি চার্ট তার নিজস্ব অতিরিক্ত পদ্ধতি সমর্থন করতে পারে। (আপনার সম্ভবত আপনার কনস্ট্রাক্টরকে নথিভুক্ত করার দরকার নেই, যদি না এটির অ-মানক আচরণ থাকে।) আপনি রেফারেন্স পৃষ্ঠায় প্রত্যাশিত পদ্ধতির একটি তালিকা পেতে পারেন।
  • আপনার draw() পদ্ধতি সমর্থন করে এমন সমস্ত বিকল্প বর্ণনা করুন। এতে প্রতিটি বিকল্পের নাম, প্রত্যাশিত মান প্রকার এবং এটির ডিফল্ট মান অন্তর্ভুক্ত রয়েছে।
  • আপনি ট্রিগার করা সমস্ত ঘটনা বর্ণনা করুন। এর অর্থ প্রতিটি ইভেন্টের নাম এবং বৈশিষ্ট্য এবং যখন প্রতিটি ইভেন্ট ট্রিগার হয়।
  • আপনার চার্ট লাইব্রেরির URL তালিকা করুন যা ক্লায়েন্টের <script> অন্তর্ভুক্ত বিবৃতিতে ব্যবহার করা উচিত এবং আপনার ডকুমেন্টেশনের জন্য URL দিন।
  • আপনার চার্টের সম্পূর্ণ-যোগ্য নাম দিন।
  • নমুনা পৃষ্ঠাগুলি তৈরি করুন যা প্রদর্শন করে যে কীভাবে আপনার চার্টটি এটি সমর্থন করে এমন বিকল্পগুলি, এর ইভেন্টগুলি এবং কাস্টম পদ্ধতিগুলির সাথে ব্যবহার করতে হয়৷
  • আপনার চার্টের ডেটা নীতি পরিষ্কারভাবে বর্ণনা করুন। বেশিরভাগ চার্ট ব্রাউজারের মধ্যে ডেটা প্রক্রিয়া করে, তবে কিছু একটি সার্ভারে ডেটা পাঠাতে পারে, উদাহরণস্বরূপ একটি চার্ট বা একটি মানচিত্রের একটি চিত্র তৈরি করা। আপনি যদি একটি সার্ভারে ডেটা পাঠান:
    • কোন ডেটা পাঠানো হয় তা স্পষ্টভাবে সংজ্ঞায়িত করুন।
    • সার্ভারে কতক্ষণ ডেটা সংরক্ষণ করা হবে তা নোট করুন।
    • কোন সত্তার ডেটাতে অ্যাক্সেস থাকবে তা নথি। যেমন কোম্পানি XYZ, ইত্যাদি।
    • ডেটা লগ করা হবে কিনা এবং কতক্ষণের জন্য তা উল্লেখ করুন।

আপনার ডকুমেন্টেশন আপনার চার্ট কোডের মতো একই জায়গায় হোস্ট করা হবে (নীচের গ্যালারিতে আপনার চার্ট জমা দিন দেখুন)।

আপনি আপনার চার্টটি লেখার পরে, আমাদের গ্যালারির "অতিরিক্ত চার্ট" বিভাগে পোস্ট করার জন্য এটি জমা দিন । একটি চার্ট জমা দেওয়ার অর্থ হল আপনাকে আমাদের সাথে একটি চুক্তি স্বাক্ষর করতে হবে যাতে দূষিত সফ্টওয়্যার তৈরি না করা বা ব্যবহারকারীর ডেটার অপব্যবহার না করার বিষয়ে সম্মত হয়৷ গ্যালারিটি আমাদের তৈরি করা বা আমরা পর্যালোচনা করেছি এমন চার্টের পয়েন্টারগুলির একটি তালিকা মাত্র; আপনি আপনার নিজের সাইটে প্রকৃত জাভাস্ক্রিপ্ট লাইব্রেরি এবং ডকুমেন্টেশন হোস্ট করতে বেছে নিতে পারেন, অথবা আপনি Google আপনার জন্য লাইব্রেরি এবং ডকুমেন্টেশন হোস্ট করতে পারেন। আপনি গ্যালারিতে পোস্ট করার সময় আপনার চার্টটি হোস্ট করতে চান কিনা তা নির্দিষ্ট করুন৷

সমস্যা সমাধান

যদি আপনার কোড কাজ করছে বলে মনে হয় না, তাহলে এখানে কিছু পন্থা রয়েছে যা আপনাকে আপনার সমস্যার সমাধান করতে সাহায্য করতে পারে:

  • টাইপোর জন্য দেখুন. মনে রাখবেন জাভাস্ক্রিপ্ট একটি কেস-সংবেদনশীল ভাষা।
  • একটি জাভাস্ক্রিপ্ট ডিবাগার ব্যবহার করুন। ফায়ারফক্সে, আপনি জাভাস্ক্রিপ্ট কনসোল, ভেঙ্কম্যান ডিবাগার বা ফায়ারবাগ অ্যাড-অন ব্যবহার করতে পারেন। IE-তে, আপনি Microsoft Script Debugger ব্যবহার করতে পারেন।
  • গুগল চার্ট API আলোচনা গোষ্ঠী অনুসন্ধান করুন। আপনি যদি এমন কোনো পোস্ট খুঁজে না পান যা আপনার প্রশ্নের উত্তর দেয়, তাহলে সমস্যাটি প্রদর্শন করে এমন একটি ওয়েব পৃষ্ঠার লিঙ্ক সহ গ্রুপে আপনার প্রশ্ন পোস্ট করুন।

স্থানীয়করণ

আপনি যদি আশা করেন যে আপনার চার্টটি বিভিন্ন দেশের লোকেরা ব্যবহার করবে, তাহলে আপনি আপনার চার্টটি বিভিন্ন ভাষা এবং সংস্কৃতির স্থানীয়করণের জন্য ডিজাইন করতে চাইতে পারেন। সবচেয়ে মৌলিক স্থানীয়করণ হল ব্যবহারকারীর ব্রাউজার সেটিংস অনুযায়ী UI-তে স্ট্যান্ডার্ড টেক্সট স্ট্রিংগুলি অনুবাদ করা। স্থানীয়করণের একটি আরও উন্নত রূপ হ'ল স্থানীয়করণের উপর নির্ভর করে সংখ্যা বিন্যাস পরিবর্তন করা, বা সম্ভবত এমনকি UI ডিজাইনও। আপনি যদি আপনার চার্ট স্থানীয়করণ করার সিদ্ধান্ত নেন, আপনার ডকুমেন্টেশনে আপনার চার্ট সমর্থন করে এমন ভাষাগুলির তালিকা করুন এবং একটি সাধারণভাবে ব্যবহৃত ভাষার একটি ডিফল্ট সেটিং প্রদান করুন। আপনার চার্টের UI-তে একটি "ভাষা পরিবর্তন করুন" বোতাম অন্তর্ভুক্ত করাও দরকারী, যদি আপনি ভাষাটি ভুল পান। ব্রাউজার ভাষা সনাক্ত করার সাধারণ উপায় হল Accept-Language HTML হেডারটি দেখা।