চার্ট আঁকুন 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
//Div that will hold the pie chart
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

শেষ ধাপ হল চার্ট আঁকা। প্রথমে আপনাকে অবশ্যই চার্ট ক্লাসের একটি ইনস্ট্যান্স ইনস্ট্যান্সিয়েট করতে হবে যা আপনি ব্যবহার করতে চান এবং তারপর আপনাকে অবশ্যই এটিতে draw() কল করতে হবে।

আপনার চার্ট তাত্ক্ষণিক

প্রতিটি চার্টের ধরন চার্টের ডকুমেন্টেশনে তালিকাভুক্ত একটি ভিন্ন শ্রেণীর উপর ভিত্তি করে। উদাহরণস্বরূপ, পাই চার্টটি google.visualization.PieChart ক্লাসের উপর ভিত্তি করে, বার চার্টটি google.visualization.BarChart ক্লাসের উপর ভিত্তি করে এবং আরও অনেক কিছু। এই টিউটোরিয়ালের শুরুতে আপনি লোড করা কোরচার্ট প্যাকেজে পাই এবং বার চার্ট উভয়ই অন্তর্ভুক্ত করা হয়েছে। যাইহোক, আপনি যদি আপনার পৃষ্ঠায় একটি ট্রিম্যাপ বা জিও চার্ট চান, তাহলে আপনাকে অবশ্যই 'ট্রিম্যাপ' বা 'জিওম্যাপ' প্যাকেজগুলি লোড করতে হবে।

Google চার্ট কনস্ট্রাক্টররা একটি একক প্যারামিটার নেয়: DOM উপাদানের একটি রেফারেন্স যেখানে ভিজ্যুয়ালাইজেশন আঁকতে হয়।

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

আপনার চার্ট আঁকুন

আপনি আপনার ডেটা এবং বিকল্পগুলি প্রস্তুত করার পরে, আপনি আপনার চার্ট আঁকার জন্য প্রস্তুত।

আপনার চার্ট ধরে রাখতে আপনার পৃষ্ঠায় একটি HTML উপাদান (সাধারণত একটি <div> ) থাকতে হবে। আপনাকে অবশ্যই আপনার চার্টটি এই উপাদানটির একটি রেফারেন্স পাস করতে হবে, তাই এটিকে একটি আইডি বরাদ্দ করুন যা আপনি document.getElementById() ব্যবহার করে একটি রেফারেন্স পুনরুদ্ধার করতে ব্যবহার করতে পারেন। এই উপাদানের ভিতরের যেকোন কিছু আঁকলে চার্ট দ্বারা প্রতিস্থাপিত হবে। আপনার এই <div> উপাদানটিকে স্পষ্টভাবে আকার দেওয়া উচিত কিনা তা বিবেচনা করুন, কিন্তু আপাতত, <div> HTML-এ চার্টের আকার নির্দিষ্ট করুন।

প্রতিটি চার্ট একটি draw() পদ্ধতি সমর্থন করে যা দুটি মান নেয়: একটি DataTable (বা একটি DataView ) অবজেক্ট যা আপনার ডেটা ধারণ করে এবং একটি ঐচ্ছিক চার্ট অপশন অবজেক্ট। অপশন অবজেক্টের প্রয়োজন নেই, এবং আপনি চার্টের ডিফল্ট বিকল্পগুলি ব্যবহার করতে এটিকে উপেক্ষা করতে পারেন বা নাল পাস করতে পারেন।

আপনি draw() কল করার পরে, আপনার চার্ট পৃষ্ঠায় আঁকা হবে। আপনি যখনই ডেটা বা বিকল্পগুলি পরিবর্তন করবেন এবং চার্ট আপডেট করতে চান তখন আপনাকে draw() পদ্ধতিতে কল করা উচিত।

draw() পদ্ধতিটি অ্যাসিঙ্ক্রোনাস: অর্থাৎ, এটি অবিলম্বে ফিরে আসে, তবে এটি যে উদাহরণটি ফেরত দেয় তা অবিলম্বে উপলব্ধ নাও হতে পারে। অনেক ক্ষেত্রে এটা ঠিক আছে; চার্ট শেষ পর্যন্ত আঁকা হবে. যাইহোক, আপনি draw() কল করার পরে যদি আপনি একটি চার্টে মান সেট করতে বা পুনরুদ্ধার করতে চান, তাহলে আপনাকে অবশ্যই প্রস্তুত ইভেন্টটি ফেলে দেওয়ার জন্য অপেক্ষা করতে হবে, যা নির্দেশ করে যে এটি জনবহুল। আমরা পরবর্তী পৃষ্ঠায় ইভেন্টগুলির জন্য শোনার কভার করব৷

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

যদি আপনার চার্ট পৃষ্ঠায় আঁকে না, তাহলে এখানে কিছু পন্থা রয়েছে যা আপনাকে আপনার সমস্যার সমাধান করতে সাহায্য করতে পারে:

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

অধিক তথ্য