ভিজ্যুয়ালাইজেশন: জেনেরিক ইমেজ চার্ট

গুরুত্বপূর্ণ: Google চার্ট টুলের ইমেজ চার্টের অংশটি 20 এপ্রিল, 2012 থেকে আনুষ্ঠানিকভাবে অবমুক্ত করা হয়েছে। এটি আমাদের অবচয় নীতি অনুযায়ী কাজ করতে থাকবে।

  1. ওভারভিউ
  2. উদাহরণ
  3. লোড হচ্ছে
  4. উপাত্ত বিন্যাস
  5. কনফিগারেশন অপশন
  6. পদ্ধতি
  7. ঘটনা
  8. ডেটা নীতি
  9. স্থানীয়করণ

ওভারভিউ

জেনেরিক ইমেজ চার্ট হল গুগল চার্ট API দ্বারা উত্পাদিত সমস্ত চার্টের জন্য একটি সাধারণ মোড়ক। এই ভিজ্যুয়ালাইজেশন ব্যবহার করার চেষ্টা করার আগে চার্ট API ডকুমেন্টেশন পড়ুন. মনে রাখবেন যে আপনি এই ভিজ্যুয়ালাইজেশন ব্যবহার করে 16K পর্যন্ত ডেটা পাঠাতে পারেন, চার্ট API-এ সরাসরি কলের 2K সীমার বিপরীতে।

একটি DataTable বা DataView ব্যবহার করে সমস্ত ডেটা চার্টে পাঠানো হয়। উপরন্তু, কিছু লেবেল ডেটা টেবিলে কলাম হিসাবে পাস করা হয়।

অন্যান্য সমস্ত চার্ট API URL প্যারামিটার ( chd ব্যতীত) বিকল্প হিসাবে পাস করা হয়েছে।

দ্বারা: Google

উদাহরণ

এখানে বিভিন্ন ধরণের চার্টের উদাহরণ রয়েছে।

লাইন চার্ট 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

উল্লম্ব বার চার্ট

মনে রাখবেন যে মোড়ানো বার চার্টে, আপনাকে chxt='x' নির্দিষ্ট করতে হবে না যেভাবে আপনি চার্টটিকে কল করলে; যদি আপনি একটি অক্ষ নির্দিষ্ট না করেন, জেনেরিক ইমেজ চার্ট ডিফল্টরূপে সঠিকভাবে চার্ট সেট আপ করার চেষ্টা করে। 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

পাই চিত্র 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

রাডার চার্ট 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

মানচিত্র চার্ট 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

লোড হচ্ছে

google.charts.load প্যাকেজের নাম হল 'imagechart'

  google.charts.load('current', {'packages': ['imagechart']});

ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.visualization. ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

উপাত্ত বিন্যাস

দুটি সাধারণ তথ্য বিন্যাস রয়েছে: একটি মানচিত্র চার্টের জন্য এবং একটি অন্যান্য সমস্ত চার্টের জন্য। মনে রাখবেন যে ডেটার জন্য সমর্থিত একমাত্র সাংখ্যিক বিন্যাস হল জাভাস্ক্রিপ্ট নম্বর প্রকার।

দ্রষ্টব্য আপনার ডেটা বা বিকল্প হিসাবে পাস করা কোনও স্ট্রিং মান URL-এনকোড করা উচিত নয় ।

মানচিত্র চার্ট

একটি মানচিত্র চার্ট দুটি প্রয়োজনীয় কলাম সহ একটি ডেটা টেবিল নেয়:

আরো তথ্যের জন্য মানচিত্র চার্ট ডকুমেন্টেশন দেখুন.

অ-মানচিত্র চার্ট

নন-ম্যাপ চার্ট দুটি ঐচ্ছিক কলাম (একটি শুরুতে, একটি শেষে) এবং এর মধ্যে এক বা একাধিক ডেটা কলাম সহ একটি ডেটা টেবিল নেয়:

  • প্রথম কলাম - [ ঐচ্ছিক, স্ট্রিং ] প্রতিটি এন্ট্রি X অক্ষে ব্যবহৃত একটি লেবেলকে প্রতিনিধিত্ব করে ( chl বা chxl প্যারামিটারের সমতুল্য) চার্টের জন্য যা এটি সমর্থন করে।
  • পরবর্তী কলাম - যেকোন সংখ্যক সাংখ্যিক কলাম, প্রতিটি একটি ডেটা সিরিজ প্রতিনিধিত্ব করে।
  • শেষ কলাম - [ ঐচ্ছিক, স্ট্রিং ] ডেটা কলামের পরে যে কোনো সংখ্যক স্ট্রিং কলাম, যেখানে প্রতিটি এন্ট্রি এটিকে সমর্থন করে এমন চার্টের জন্য একটি ডেটা পয়েন্ট লেবেল উপস্থাপন করে। আপনি যদি এই কলামটি ব্যবহার করতে চান তবে আপনাকে annotationColumns বিকল্পটি উল্লেখ করতে হবে।

চার্টের প্রকারের উপর নির্ভর করে ডেটা বিভিন্ন উপায়ে প্রদর্শিত হবে। আপনার চার্টের জন্য ডকুমেন্টেশন দেখুন।

কলাম সূচী সম্পর্কে একটি নোট: জেনেরিক ইমেজ চার্ট ভিজ্যুয়ালাইজেশন টেবিলটি চার্ট API পরিষেবাতে পাঠানোর আগে ডেটা টেবিল থেকে স্ট্রিং কলামগুলি বের করে দেয়। অতএব, এই পৃষ্ঠায় সংজ্ঞায়িত বিকল্প, পদ্ধতি এবং ইভেন্টের কলামের সূচীগুলি সূচী গণনার স্ট্রিং কলামগুলিকে অন্তর্ভুক্ত করে; কিন্তু চার্ট API পরিষেবা দ্বারা পরিচালিত যে কোনও বিকল্পের কলাম সূচী (উদাহরণস্বরূপ, chm বিকল্প) সূচী গণনার স্ট্রিং কলামগুলিকে উপেক্ষা করে।

কনফিগারেশন অপশন

এই ভিজ্যুয়ালাইজেশনের জন্য নিম্নলিখিত বিকল্পগুলি সংজ্ঞায়িত করা হয়েছে। ভিজ্যুয়ালাইজেশনের draw() পদ্ধতিতে পাস করা অপশন অবজেক্টে তাদের সংজ্ঞায়িত করুন। নিম্নলিখিত সমস্ত বিকল্প সমস্ত চার্ট প্রকারের জন্য সমর্থিত নয়; আপনার স্ট্যাটিক ইমেজ চার্ট টাইপ জন্য ডকুমেন্টেশন দেখুন. আপনি বিকল্প হিসাবে যেকোনো চার্ট API URL প্যারামিটার পাস করতে পারেন। উদাহরণস্বরূপ, একটি চার্ট ভিজ্যুয়ালাইজেশন থেকে URL প্যারামিটার chg=50,50 এইভাবে নির্দিষ্ট করা হবে: options['chg'] = '50,50'

রঙ সম্পর্কে একটি নোট: রঙের বিকল্পগুলি যেমন colors , color এবং backgroundColor চার্ট API রঙ বিন্যাসে নির্দিষ্ট করা হয়েছে। এই ফরম্যাটটি #RRGGBB ফরম্যাটের অনুরূপ তবে এটিতে স্বচ্ছতা নির্দেশ করার জন্য একটি ঐচ্ছিক চতুর্থ হেক্সাডেসিমেল সংখ্যা অন্তর্ভুক্ত। মানুষের পাঠযোগ্য রং, যেমন 'লাল', 'সবুজ', 'নীল' ইত্যাদি সমর্থিত নয়। চার্ট API রঙ বিন্যাসে অগ্রণী # চিহ্ন অন্তর্ভুক্ত করা হয় না, তবে সাধারণ চিত্র চার্ট ভিজ্যুয়ালাইজেশন বিকল্পগুলি # সহ বা ছাড়া রঙের কোড গ্রহণ করবে।

নাম টাইপ ডিফল্ট বর্ণনা
টীকা কলাম অ্যারে<object> কোনটি

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

অ্যারের প্রতিটি বস্তুর নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

  • column [ সংখ্যা ] - কলামের শূন্য-ভিত্তিক সূচক যা টীকাতে ব্যবহৃত পাঠ্যটিকে ধারণ করে। এই কলামের প্রতিটি সারিতে আপনার একটি মান প্রয়োজন নেই।
  • positionColumn [ সংখ্যা ] - কলামের শূন্য-ভিত্তিক সূচক যা লেবেল করা ডেটা পয়েন্ট ধরে রাখে। ডিফল্ট হল প্রথম ডেটা কলাম।
  • color [ স্ট্রিং ] - চার্ট API রঙ বিন্যাসে টীকা পাঠের রঙ। ডিফল্ট হল '#000000' (কালো)।
  • size [ সংখ্যা ] - টীকাটির ফন্টের আকার, পিক্সেলে।
  • priority [ স্ট্রিং ] - হয় 'নিম্ন', 'মাঝারি', বা 'উচ্চ', লেবেলটি যে স্তরে আঁকতে হবে তা নির্দিষ্ট করে। ডিফল্ট হল 'মাঝারি', যা নির্দিষ্ট করে যে লেবেলটি বার এবং লাইনের পরে আঁকা হয়েছে, কিন্তু অন্যান্য লেবেলের আগে।
  • type [ স্ট্রিং ] - হয় 'টেক্সট' বা 'পতাকা'। 'টেক্সট' একটি প্লেইন টেক্সট টীকা তৈরি করে, এবং 'পতাকা' একটি স্পিচ-বেলুন টীকা তৈরি করে।

উদাহরণ - এই স্নিপেটটি একটি কালো, 12 পিক্সেল টেক্সট লেবেলকে সংজ্ঞায়িত করে, যেখানে 0 কলাম থেকে টেক্সট নেওয়া হয়েছে এবং একই সারির কলাম 2-এর ডেটা পয়েন্টে বরাদ্দ করা হয়েছে: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];

পেছনের রং স্ট্রিং '#FFFFFF' (সাদা) চার্ট API রঙ বিন্যাসে চার্টের জন্য পটভূমির রঙ।
রঙ স্ট্রিং অটো সমস্ত সিরিজের জন্য ব্যবহার করার জন্য একটি বেস রঙ নির্দিষ্ট করে; প্রতিটি সিরিজ নির্দিষ্ট রঙের একটি গ্রেডেশন হবে। রঙগুলি চার্ট API রঙ বিন্যাসে নির্দিষ্ট করা হয়েছে। colors নির্দিষ্ট করা থাকলে উপেক্ষা করা হয়।
রং অ্যারে<string> অটো প্রতিটি ডেটা সিরিজে নির্দিষ্ট রং বরাদ্দ করতে এটি ব্যবহার করুন। রঙগুলি চার্ট API রঙ বিন্যাসে নির্দিষ্ট করা হয়েছে। ডাটা কলাম i এর জন্য কালার i ব্যবহার করা হয়, যদি রঙের চেয়ে বেশি ডাটা কলাম থাকে তাহলে শুরুতে মোড়ানো। যদি একটি একক রঙের বৈচিত্র সব সিরিজের জন্য গ্রহণযোগ্য হয়, তবে পরিবর্তে color বিকল্পটি ব্যবহার করুন।
ইভেন্ট সক্রিয় করুন বুলিয়ান মিথ্যা চার্টগুলি ব্যবহারকারীর দ্বারা ট্রিগার করা ইভেন্টগুলি যেমন ক্লিক বা মাউস ওভার ছুঁড়ে দেয়। শুধুমাত্র নির্দিষ্ট চার্ট ধরনের জন্য সমর্থিত. নীচে ইভেন্ট দেখুন.
পূরণ বুলিয়ান মিথ্যা সত্য হলে, প্রতিটি লাইনের নিচের অংশ পূরণ করে। শুধুমাত্র লাইন চার্ট জন্য উপলব্ধ.
প্রথম লুকানো কলাম সংখ্যা কোনটি

একটি ডেটা কলাম সূচক। তালিকাভুক্ত কলাম, সেইসাথে নিম্নলিখিত কলামগুলি, মূল চার্ট সিরিজের উপাদানগুলি আঁকতে ব্যবহার করা হবে না (যেমন একটি লাইন চার্টে লাইন, বা বার চার্টে বার), তবে পরিবর্তে চিহ্নিতকারী এবং অন্যান্য টীকাগুলির জন্য ডেটা হিসাবে ব্যবহৃত হয় . মনে রাখবেন যে স্ট্রিং কলামগুলি এই সূচক গণনায় অন্তর্ভুক্ত করা হয়েছে।

উচ্চতা সংখ্যা 200 চার্টের উচ্চতা, পিক্সেলে। অনুপস্থিত বা গ্রহণযোগ্য পরিসরে না থাকলে, উপাদানটির উচ্চতা ব্যবহার করা হয়। যদি এটি গ্রহণযোগ্য পরিসরের বাইরেও হয়, তবে ডিফল্ট উচ্চতা ব্যবহার করা হবে।
লেবেল স্ট্রিং 'কেউ না'

[ শুধুমাত্র পাই চার্ট ] প্রতিটি স্লাইসের জন্য কি লেবেল, যদি থাকে, দেখাতে হবে। নিম্নলিখিত মান থেকে চয়ন করুন:

  • 'কোনোটি' - কোনো লেবেল নেই।
  • 'মান' - একটি লেবেল হিসাবে স্লাইস মান দেখান।
  • 'নাম' - একটি লেবেল হিসাবে স্লাইস নাম (কলামের নাম) দেখান।
কিংবদন্তি স্ট্রিং 'ঠিক' চার্টের সাপেক্ষে একটি চার্ট লিজেন্ড কোথায় প্রদর্শন করবেন। নিম্নলিখিতগুলির মধ্যে একটি নির্দিষ্ট করুন: 'শীর্ষ', 'নিচে', 'বাম', 'ডান', 'কোনোটি নয়'। লেজেন্ড অন্তর্ভুক্ত করে না এমন তালিকায় উপেক্ষা করা হয়েছে (যেমন মানচিত্র চার্ট)।
সর্বোচ্চ সংখ্যা সর্বাধিক ডেটা মান স্কেলে দেখানো সর্বোচ্চ মান। পাই চার্টের জন্য উপেক্ষা করা হয়েছে। ডিফল্ট হল সর্বাধিক ডেটা মান, বার চার্ট ব্যতীত, যেখানে ডিফল্ট হল সর্বাধিক ডেটা মান। টেবিলে একাধিক ডেটা কলাম থাকলে বার চার্টের জন্য এটি উপেক্ষা করা হয়।
মিনিট সংখ্যা ন্যূনতম ডেটা মান স্কেলে দেখানো ন্যূনতম মান। পাই চার্টের জন্য উপেক্ষা করা হয়েছে। ডিফল্ট হল ন্যূনতম ডেটা মান, বার চার্ট ব্যতীত, যেখানে ডিফল্ট শূন্য। টেবিলে একাধিক ডেটা কলাম থাকলে বার চার্টের জন্য এটি উপেক্ষা করা হয়।
ক্যাটাগরি লেবেল দেখান বুলিয়ান সত্য লেবেল শ্রেণীতে (অর্থাৎ সারি) অক্ষে প্রদর্শিত হবে কিনা। শুধুমাত্র লাইন এবং বার চার্টের জন্য উপলব্ধ।
শোভ্যালু লেবেল বুলিয়ান সত্য True মান অক্ষের উপর একটি লেবেল প্রদর্শন করে। শুধুমাত্র লাইন এবং বার চার্টের জন্য উপলব্ধ।
একক কলাম প্রদর্শন সংখ্যা কোনটি শুধুমাত্র নির্দিষ্ট ডেটা কলাম রেন্ডার করে। এই সংখ্যাটি টেবিলের একটি শূন্য-ভিত্তিক সূচক, যেখানে শূন্য প্রথম ডেটা কলাম। একক কলামে বরাদ্দ করা রঙ একই হয় যখন সমস্ত কলাম রেন্ডার করা হয়। পাই বা মানচিত্রের চার্টের সাথে ব্যবহার করা যাবে না।
শিরোনাম স্ট্রিং খালি স্ট্রিং চার্ট শিরোনাম. নির্দিষ্ট না থাকলে, কোন শিরোনাম প্রদর্শিত হবে না। সমতুল্য চার্ট প্যারামিটার হল chtt ।
valueLabelsInterval সংখ্যা অটো যে ব্যবধানে মান অক্ষ লেবেল দেখাতে হবে৷ উদাহরণস্বরূপ, যদি min 0 হয়, max 100 হয় এবং valueLabelsInterval 20 হয়, চার্টটি (0, 20, 40, 60, 80 100) এ অক্ষ লেবেল দেখাবে।
প্রস্থ সংখ্যা 400 চার্টের প্রস্থ, পিক্সেলে। অনুপস্থিত বা গ্রহণযোগ্য পরিসরে না থাকলে, উপাদানটির প্রস্থ ব্যবহার করা হয়। যদি এটি গ্রহণযোগ্য পরিসরের বাইরেও হয় তবে ডিফল্ট প্রস্থ ব্যবহার করা হবে।

পদ্ধতি

পদ্ধতি রিটার্ন টাইপ বর্ণনা
draw(data, options) কোনোটিই নয় মানচিত্র আঁকে।
getImageUrl() স্ট্রিং চার্টের অনুরোধ করতে ব্যবহৃত Google চার্ট API URL প্রদান করে। মনে রাখবেন যে এটি 2,000 অক্ষরের বেশি দীর্ঘ হতে পারে। আরো বিস্তারিত জানার জন্য Google Chart API দেখুন।

ঘটনা

যদি আপনি enableEvents প্রপার্টিটিকে সত্য হিসাবে সেট করেন, তাহলে সমর্থনকারী চার্টগুলি নীচের সারণীতে তালিকাভুক্ত ব্যবহারকারীর ইভেন্টগুলির জন্য ইভেন্টগুলি নিক্ষেপ করবে৷ এই সমস্ত ইভেন্টগুলি নিম্নলিখিত বৈশিষ্ট্য সহ একটি event অবজেক্ট ফিরিয়ে দেয়:

  • type - একটি স্ট্রিং ইভেন্টের ধরনকে প্রতিনিধিত্ব করে।
  • region - প্রভাবিত অঞ্চলের জন্য একটি আইডি। উপলব্ধ নামের তালিকা দেখতে কাঁচা চার্টের ধরনে chof=json প্যারামিটার যোগ করুন। আরো বিস্তারিত জানার জন্য chof=json দেখুন।
নাম বর্ণনা মান টাইপ করুন
error চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়। আইডি, বার্তা
onmouseover চার্ট এলিমেন্টের উপর ব্যবহারকারী মাউস মাউস করলে বরখাস্ত হয়। "মাউসওভার"
onmouseout ব্যবহারকারী চার্ট উপাদান থেকে দূরে মাউস যখন বহিস্কার. "মাউসআউট"
onclick একজন ব্যবহারকারী চার্ট এলিমেন্টে ক্লিক করলে বরখাস্ত হয়।

"ক্লিক"

কোন চার্ট ইভেন্ট সমর্থন করে?

যে কোনো চার্ট যা chof=json প্যারামিটার সমর্থন করে থ্রোয়িং ইভেন্ট সমর্থন করে (অর্থাৎ বিশেষ চার্ট ছাড়া সব চার্ট, যেমন QR কোড)।

ইভেন্ট হ্যান্ডলিং উদাহরণ

এখানে একটি উদাহরণ দেখানো হয়েছে একটি বার যা মাউস ক্লিক রেকর্ড করে। 

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

ডেটা নীতি

ডেটা Google চার্ট API পরিষেবাতে পাঠানো হয়।

স্থানীয়করণ

এই ভিজ্যুয়ালাইজেশন Google চার্ট পরিষেবা দ্বারা সমর্থিত যেকোনো স্থানীয়করণকে সমর্থন করে।