লাইব্রেরি লোড করুন

এই পৃষ্ঠাটি দেখায় কিভাবে গুগল চার্ট লাইব্রেরি লোড করতে হয়।

বেসিক লাইব্রেরি লোড হচ্ছে

কিছু ব্যতিক্রম ছাড়া, Google চার্ট সহ সমস্ত ওয়েব পৃষ্ঠায় ওয়েব পৃষ্ঠার <head> এ নিম্নলিখিত লাইনগুলি অন্তর্ভুক্ত করা উচিত:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  ...
</script>

এই উদাহরণের প্রথম লাইন লোডার নিজেই লোড করে। আপনি যত চার্ট আঁকার পরিকল্পনা করেন না কেন আপনি শুধুমাত্র একবার লোডার লোড করতে পারবেন। লোডার লোড করার পর, আপনি google.charts.load ফাংশনকে এক বা একাধিকবার কল করতে পারেন নির্দিষ্ট চার্ট প্রকারের প্যাকেজ লোড করতে।

google.charts.load এর প্রথম যুক্তি হল সংস্করণের নাম বা সংখ্যা, একটি স্ট্রিং হিসাবে। আপনি যদি 'current' নির্দিষ্ট করেন, তাহলে এর ফলে Google চার্টের সর্বশেষ অফিসিয়াল রিলিজ লোড হবে। আপনি যদি পরবর্তী রিলিজের জন্য প্রার্থীকে চেষ্টা করতে চান তবে এর পরিবর্তে 'upcoming' ব্যবহার করুন। সাধারণভাবে উভয়ের মধ্যে খুব সামান্য পার্থক্য থাকবে এবং একটি নতুন রিলিজ চলমান থাকা ছাড়া তারা সম্পূর্ণ অভিন্ন হবে। upcoming ব্যবহার করার একটি সাধারণ কারণ হল আপনি একটি নতুন চার্ট টাইপ বা বৈশিষ্ট্য পরীক্ষা করতে চান যা Google আগামী দুই বা দুই মাসে প্রকাশ করতে চলেছে৷ (আমরা আমাদের ফোরামে আসন্ন রিলিজ ঘোষণা করি এবং সুপারিশ করি যে ঘোষণা করার সময় আপনি সেগুলি চেষ্টা করে দেখুন, আপনার চার্টে যেকোনো পরিবর্তন গ্রহণযোগ্য কিনা তা নিশ্চিত করতে।)

উপরের উদাহরণটি অনুমান করে যে আপনি একটি corechart (বার, কলাম, লাইন, এলাকা, ধাপের এলাকা, বুদবুদ, পাই, ডোনাট, কম্বো, ক্যান্ডেলস্টিক, হিস্টোগ্রাম, স্ক্যাটার) প্রদর্শন করতে চান। আপনি যদি একটি ভিন্ন বা অতিরিক্ত চার্টের ধরন চান, তাহলে উপরের corechart জন্য উপযুক্ত প্যাকেজের নাম বিকল্প বা যোগ করুন (যেমন, {packages: ['corechart', 'table', 'sankey']} আপনি প্যাকেজের নামটি 'এ খুঁজে পেতে পারেন প্রতিটি চার্টের জন্য ডকুমেন্টেশন পৃষ্ঠার বিভাগ লোড হচ্ছে।

এই উদাহরণটিও অনুমান করে যে আপনার ওয়েব পেজের কোথাও drawChart নামে একটি জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়িত করা আছে। আপনি যে ফাংশনটিকে আপনার পছন্দ মতো নাম দিতে পারেন, তবে নিশ্চিত হোন যে এটি বিশ্বব্যাপী অনন্য এবং google.charts.setOnLoadCallback এ আপনার কলে এটি উল্লেখ করার আগে এটি সংজ্ঞায়িত করা হয়েছে।

দ্রষ্টব্য: Google চার্টের পূর্ববর্তী সংস্করণগুলি লাইব্রেরিগুলি লোড করার জন্য উপরের থেকে আলাদা কোড ব্যবহার করেছে৷ নতুন কোড ব্যবহার করতে আপনার বিদ্যমান চার্ট আপডেট করতে, লাইব্রেরি লোডার কোড আপডেট করুন দেখুন।

এখানে মৌলিক লোডিং কৌশল ব্যবহার করে একটি পাই চার্ট আঁকার একটি সম্পূর্ণ উদাহরণ রয়েছে:

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
</head>
<body>
  <!-- Identify where the chart should be drawn. -->
  <div id="myPieChart"/>
</body>

বিশদ লোড হচ্ছে

প্রথমে আপনাকে লোডার নিজেই লোড করতে হবে, যা src="https://www.gstatic.com/charts/loader.js" সহ একটি পৃথক script ট্যাগে করা হয়। এই ট্যাগটি ডকুমেন্টের head বা body হতে পারে, অথবা এটি লোড হওয়ার সময় বা লোডিং সম্পন্ন হওয়ার পরে ডকুমেন্টে গতিশীলভাবে ঢোকানো যেতে পারে।

<script src="https://www.gstatic.com/charts/loader.js"></script>

লোডার লোড হওয়ার পরে, আপনি google.charts.load কল করতে পারবেন। যেখানে আপনি কল করবেন সেটি ডকুমেন্টের head বা body একটি script ট্যাগে থাকতে পারে, এবং ডকুমেন্টটি এখনও লোড হওয়ার সময় বা এটি লোড করা শেষ হওয়ার পরে যে কোনো সময় আপনি এটিকে কল করতে পারেন।

সংস্করণ 45 অনুযায়ী, অতিরিক্ত প্যাকেজ লোড করার জন্য আপনি একাধিকবার google.charts.load কল করতে পারেন , যদিও আপনি এটি করা এড়াতে পারলে এটি নিরাপদ। আপনাকে প্রতিবার একই সংস্করণ নম্বর এবং ভাষা সেটিংস প্রদান করতে হবে।

আপনি এখন পুরানো JSAPI autoload URL প্যারামিটার ব্যবহার করতে পারেন, কিন্তু এই প্যারামিটারের মান অবশ্যই কঠোর JSON ফর্ম্যাটিং এবং URL এনকোডিং ব্যবহার করতে হবে৷ জাভাস্ক্রিপ্টে, আপনি এই কোড দিয়ে jsonObject এর এনকোডিং করতে পারেন: encodeURIComponent(JSON.stringify(jsonObject)) ।

সীমাবদ্ধতা

আপনি যদি v45 এর আগের সংস্করণগুলি ব্যবহার করেন তবে আপনি Google চার্টগুলি কীভাবে লোড করবেন তার সাথে কয়েকটি ছোটখাটো কিন্তু গুরুত্বপূর্ণ সীমাবদ্ধতা রয়েছে:

  1. আপনি শুধুমাত্র একবার google.charts.load কল করতে পারেন। কিন্তু আপনি একটি কলে আপনার প্রয়োজন হবে এমন সমস্ত প্যাকেজ তালিকাভুক্ত করতে পারেন, তাই আলাদা কল করার প্রয়োজন নেই৷
  2. আপনি যদি একটি ChartWrapper ব্যবহার করে থাকেন, তাহলে আপনার জন্য স্বয়ংক্রিয়ভাবে লোড করার জন্য ChartWrapper-এর উপর নির্ভর না করে আপনার প্রয়োজনীয় সমস্ত প্যাকেজ স্পষ্টভাবে লোড করতে হবে।
  3. জিওচার্ট এবং ম্যাপ চার্টের জন্য, আপনাকে অবশ্যই পুরানো লাইব্রেরি লোডার এবং নতুন লাইব্রেরি লোডার উভয়ই লোড করতে হবে। আবার, এটি শুধুমাত্র v45 এর আগের সংস্করণগুলির জন্য, এবং আপনার পরবর্তী সংস্করণগুলির জন্য এটি করা উচিত নয় ৷ 
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>

সংস্করণের নাম বা নম্বর লোড করুন

আপনার google.charts.load কলের প্রথম যুক্তিটি হল সংস্করণের নাম বা নম্বর। এই সময়ে শুধুমাত্র দুটি বিশেষ সংস্করণের নাম এবং বেশ কয়েকটি হিমায়িত সংস্করণ রয়েছে৷

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

যখন আমরা Google চার্টের নতুন সংস্করণ প্রকাশ করি, তখন কিছু পরিবর্তন বড় হয়, যেমন সম্পূর্ণ নতুন চার্টের ধরন। অন্যান্য পরিবর্তনগুলি ছোট, যেমন বিদ্যমান চার্টের চেহারা বা আচরণের উন্নতি।

অনেক Google চার্ট নির্মাতারা তাদের চার্টের চেহারা এবং অনুভূতিকে সূক্ষ্ম-টিউন করেন যতক্ষণ না তারা ঠিক যা চান তা হয়। ভবিষ্যতে আমরা যতই উন্নতি করি না কেন, কিছু নির্মাতারা তাদের চার্ট কখনই পরিবর্তিত হবে না জেনে আরও স্বাচ্ছন্দ্য বোধ করতে পারেন। সেই ব্যবহারকারীদের জন্য, আমরা হিমায়িত Google চার্ট সমর্থন করি।

হিমায়িত চার্ট সংস্করণগুলি সংখ্যা দ্বারা চিহ্নিত করা হয়, এবং সেগুলি আমাদের অফিসিয়াল রিলিজে বর্ণনা করা হয়েছে৷ একটি হিমায়িত সংস্করণ লোড করতে, হিমায়িত সংস্করণ নম্বর দিয়ে আপনার google.charts.load কলে current বা upcoming প্রতিস্থাপন করুন:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    ...
</script>

আমরা আশা করি যে হিমায়িত সংস্করণগুলি অনির্দিষ্টকালের জন্য উপলব্ধ থাকবে, যদিও আমরা হিমায়িত সংস্করণগুলিকে অবসর দিতে পারি যেগুলির নিরাপত্তা উদ্বেগ রয়েছে৷ আমরা সাধারণত হিমায়িত সংস্করণগুলির জন্য সমর্থন প্রদান করব না, অসহায়ভাবে আপনাকে একটি নতুন সংস্করণে আপগ্রেড করার পরামর্শ দেওয়া ছাড়া৷

লোড সেটিংস

google.charts.load আপনার কলের দ্বিতীয় প্যারামিটারটি সেটিংস নির্দিষ্ট করার জন্য একটি বস্তু। নিম্নলিখিত বৈশিষ্ট্য সেটিংস জন্য সমর্থিত.

প্যাকেজ
শূন্য বা তার বেশি প্যাকেজের একটি অ্যারে। লোড করা প্রতিটি প্যাকেজে কার্যকারিতার একটি সেট সমর্থন করার জন্য প্রয়োজনীয় কোড থাকবে, সাধারণত একটি ধরণের চার্ট। আপনাকে যে প্যাকেজ বা প্যাকেজগুলি লোড করতে হবে তা প্রতিটি ধরণের চার্টের জন্য ডকুমেন্টেশনে তালিকাভুক্ত করা হয়েছে। আপনি কোন প্যাকেজ নির্দিষ্ট করা এড়াতে পারেন যদি আপনি একটি ChartWrapper ব্যবহার করে স্বয়ংক্রিয়ভাবে যা প্রয়োজন হবে তা লোড করতে পারেন।
ভাষা
চার্টের অংশ হতে পারে এমন পাঠ্যকে কাস্টমাইজ করার জন্য ভাষা বা লোকেলের কোড। আরও বিস্তারিত জানার জন্য লোকেল দেখুন।
কলব্যাক
প্যাকেজগুলি লোড হওয়ার পরে একটি ফাংশন বলা হবে। বিকল্পভাবে, উপরের উদাহরণে প্রদর্শিত হিসাবে আপনি google.charts.setOnLoadCallback কল করে এই ফাংশনটি নির্দিষ্ট করতে পারেন। আরও বিস্তারিত জানার জন্য কলব্যাক দেখুন।
  google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });
MapsApiKey
(v45) এই সেটিং আপনাকে একটি কী নির্দিষ্ট করতে দেয় যা আপনি জিওচার্ট এবং ম্যাপ চার্টের সাথে ব্যবহার করতে পারেন। আপনি ডিফল্ট আচরণ ব্যবহার করার পরিবর্তে এটি করতে চাইতে পারেন যার ফলে আপনার ব্যবহারকারীদের জন্য মাঝে মাঝে পরিষেবা থ্রটলিং হতে পারে। এখানে 'Google Maps JavaScript API' পরিষেবা ব্যবহার করার জন্য আপনার নিজের কী সেট আপ করতে শিখুন: একটি কী/প্রমাণিকরণ পান । আপনার কোডটি এরকম কিছু দেখাবে:
  var myMapsApiKey = 'SomeMagicToSetThis';
  google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });
নিরাপদ ভাবে
(v47) সত্য হিসাবে সেট করা হলে, ব্যবহারকারীর সরবরাহকৃত ডেটা থেকে HTML তৈরি করে এমন সমস্ত চার্ট এবং টুলটিপগুলি অনিরাপদ উপাদান এবং বৈশিষ্ট্যগুলিকে সরিয়ে দিয়ে এটিকে স্যানিটাইজ করবে। বিকল্পভাবে (v49+), লাইব্রেরিটিকে একটি শর্টকাট ব্যবহার করে নিরাপদ মোডে লোড করা যেতে পারে যা একই লোডিং সেটিংস গ্রহণ করে, কিন্তু সর্বদা "বর্তমান" সংস্করণ লোড করে:
  google.charts.safeLoad({ packages: ['corechart'] });

লোকেল

লোকেলগুলি একটি দেশ বা ভাষার জন্য পাঠ্য কাস্টমাইজ করতে ব্যবহৃত হয়, মুদ্রা, তারিখ এবং সংখ্যার মতো মানগুলির বিন্যাসকে প্রভাবিত করে।

ডিফল্টরূপে, Google চার্টগুলি "en" লোকেল দিয়ে লোড করা হয়৷ আপনি লোডিং সেটিংসে একটি লোকেল স্পষ্টভাবে উল্লেখ করে এই ডিফল্টটিকে ওভাররাইড করতে পারেন।

একটি নির্দিষ্ট লোকেলের জন্য ফর্ম্যাট করা একটি চার্ট লোড করতে, language সেটিংটি ব্যবহার করুন যেমন:

  // Load Google Charts for the Japanese locale.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

একটি লাইভ উদাহরণের জন্য এই লিঙ্ক অনুসরণ করুন.

কলব্যাক

google.charts.load দ্বারা লোড করা যেকোনো প্যাকেজ ব্যবহার করার আগে আপনাকে লোডিং শেষ হওয়ার জন্য অপেক্ষা করতে হবে। নথিটি লোড করা শেষ হওয়ার জন্য অপেক্ষা করা যথেষ্ট নয়। যেহেতু এই লোডিং শেষ হওয়ার আগে কিছু সময় লাগতে পারে, তাই আপনাকে একটি কলব্যাক ফাংশন নিবন্ধন করতে হবে। তিনটি উপায়ে এটি করা যেতে পারে। হয় আপনার google.charts.load কলে একটি callback সেটিং নির্দিষ্ট করুন, অথবা আর্গুমেন্ট হিসাবে একটি ফাংশন পাস করে setOnLoadCallback কল করুন, অথবা google.charts.load এর কল দ্বারা ফেরত দেওয়া প্রতিশ্রুতিটি ব্যবহার করুন।

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

আপনি যদি একাধিক চার্ট আঁকতে চান, আপনি setOnLoadCallback ব্যবহার করে একাধিক কলব্যাক ফাংশন নিবন্ধন করতে পারেন, অথবা আপনি সেগুলিকে একটি ফাংশনে একত্রিত করতে পারেন। কিভাবে এক পৃষ্ঠায় একাধিক চার্ট আঁকবেন সে সম্পর্কে আরও জানুন।

  google.charts.setOnLoadCallback(drawChart1);
  google.charts.setOnLoadCallback(drawChart2);
  // OR
  google.charts.setOnLoadCallback(
    function() { // Anonymous function that calls drawChart1 and drawChart2
         drawChart1();
         drawChart2();
      });

প্রতিশ্রুতি মাধ্যমে কলব্যাক

আপনার কলব্যাক নিবন্ধন করার আরেকটি উপায় হল প্রতিশ্রুতি ব্যবহার করা যা google.charts.load কল থেকে ফিরে আসে। নিচের মত দেখতে কোড সহ then() পদ্ধতিতে একটি কল যোগ করে আপনি এটি করেন।

  google.charts.load('upcoming', {packages: ['corechart']}).then(drawChart);

প্রতিশ্রুতি ব্যবহার করার একটি সুবিধা হল যে তারপরে আপনি আরও বেশি .then(anotherFunction) কল করে সহজেই আরও চার্ট আঁকতে পারেন। প্রতিশ্রুতি ব্যবহার করা কলব্যাকটিকে সেই কলব্যাকের জন্য প্রয়োজনীয় নির্দিষ্ট প্যাকেজের সাথেও সংযুক্ত করে, যা গুরুত্বপূর্ণ যদি আপনি google.charts.load() এর অন্য একটি কলের সাথে আরও প্যাকেজ লোড করতে চান।

লাইব্রেরি লোডার কোড আপডেট করুন

Google চার্টের পূর্ববর্তী সংস্করণগুলি লাইব্রেরিগুলি লোড করতে বিভিন্ন কোড ব্যবহার করেছিল। নীচের টেবিলটি পুরানো লাইব্রেরি লোডার কোড বনাম নতুন দেখায়।

পুরানো লাইব্রেরি লোডার কোড
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
</script>
নতুন লাইব্রেরি লোডার কোড
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
</script>

আপনার বিদ্যমান চার্ট আপডেট করতে, আপনি নতুন কোড দিয়ে পুরানো লাইব্রেরি লোডার কোড প্রতিস্থাপন করতে পারেন। যাইহোক, উপরে বর্ণিত লাইব্রেরি লোড করার সীমাবদ্ধতাগুলি মনে রাখবেন।