ক্যালেন্ডার চার্ট

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

ওভারভিউ

দ্রষ্টব্য: জাভাস্ক্রিপ্ট শূন্য থেকে শুরু করে মাস গণনা করে: জানুয়ারী হল 0, ফেব্রুয়ারি হল 1 এবং ডিসেম্বর হল 11৷ যদি আপনার ক্যালেন্ডার চার্ট এক মাস বন্ধ বলে মনে হয়, তাহলে এই কারণে৷

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

ভবিষ্যতে Google চার্ট রিলিজগুলিতে ক্যালেন্ডার চার্টটি উল্লেখযোগ্য সংশোধনের মধ্য দিয়ে যেতে পারে।

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

একটি সহজ উদাহরণ

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

অন্তর্নিহিত ডেটা মানগুলি দেখতে আপনি পৃথক দিনে মাউস করতে পারেন।

একটি ক্যালেন্ডার চার্ট তৈরি করতে, calendar প্যাকেজটি লোড করুন এবং তারপরে দুটি কলাম তৈরি করুন, একটি তারিখের জন্য এবং একটি মানগুলির জন্য৷ (কাস্টমাইজড স্টাইলিংয়ের জন্য একটি ঐচ্ছিক তৃতীয় কলাম ভবিষ্যতের 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:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

দিন

একটি ক্যালেন্ডার চার্টের প্রতিটি বর্গক্ষেত্র একটি দিনের প্রতিনিধিত্ব করে। বর্তমানে, ডেটা সেলগুলির রঙ কাস্টমাইজ করা যাবে না, যদিও এটি Google চার্টের পরবর্তী প্রকাশে পরিবর্তিত হবে৷

যদি ডেটা মানগুলি সমস্ত ইতিবাচক হয়, রঙগুলি সাদা থেকে নীল পর্যন্ত হবে, গভীরতম নীলগুলি সর্বোচ্চ মান নির্দেশ করে৷ যদি নেতিবাচক ডেটা মান থাকে তবে সেগুলি কমলা রঙের দেখাবে, যেমনটি নীচে দেখানো হয়েছে।

এই ক্যালেন্ডারের কোডটি প্রথমটির মতোই, ব্যতীত সারিগুলি এইরকম দেখাচ্ছে:

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

আপনি calendar.cellSize বিকল্পের সাথে দিনের আকার ("কোষ") পরিবর্তন করতে পারেন:

এখানে, আমরা calendar.cellSize 10 এ পরিবর্তন করেছি, দিন এবং তাই সামগ্রিকভাবে চার্ট সঙ্কুচিত করেছি।

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

কোন ডেটা মানহীন দিনগুলি noDataPattern বিকল্পের সাথে কাস্টমাইজ করা যেতে পারে:

এখানে, আমরা color হালকা নীল এবং backgroundColor কিছুটা গাঢ় শেডে সেট করেছি:

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

আপনি calendar.cellColor দিয়ে সেল সীমানার রঙ, সীমানা প্রস্থ এবং অস্বচ্ছতা নিয়ন্ত্রণ করতে পারেন:

আপনাকে একটি স্ট্রোক রঙ চয়ন করতে সতর্কতা অবলম্বন করতে হবে যা monthOutlineColor থেকে আলাদা করা হবে, বা একটি কম অস্বচ্ছতা চয়ন করতে হবে৷ উপরের চার্টের জন্য এখানে বিকল্পগুলি রয়েছে:

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

আপনি যদি উপরের চার্টে একটি দিনে ফোকাস করেন, তাহলে বর্ডারটি লাল রঙে হাইলাইট হবে। আপনি calendar.focusedCellColor বিকল্পগুলির সাথে সেই আচরণটি নিয়ন্ত্রণ করতে পারেন:

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

সপ্তাহ

ডিফল্টরূপে, সপ্তাহের দিনগুলি রবিবার থেকে শনিবারের প্রথম অক্ষর দিয়ে লেবেল করা হয়। আপনি দিনের ক্রম পরিবর্তন করতে পারবেন না, তবে আপনি calendar.daysOfWeek বিকল্পের সাথে কোন অক্ষর ব্যবহার করবেন তা পরিবর্তন করতে পারেন। এছাড়াও, আপনি calendar.dayOfWeekRightSpace দিয়ে সপ্তাহের দিন এবং চার্টের মধ্যে প্যাডিং নিয়ন্ত্রণ করতে পারেন, এবং আপনি calendar.dayOfWeekLabel এর মাধ্যমে পাঠ্য শৈলী কাস্টমাইজ করতে পারেন:

এখানে, আমরা সপ্তাহের লেবেলের ফন্ট পরিবর্তন করি, লেবেল এবং চার্ট ডেটার মধ্যে 10 পিক্সেলের একটি প্যাডিং রাখি এবং সোমবার সপ্তাহ শুরু করি।

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

মাস

ডিফল্টরূপে, মাসগুলি গাঢ় ধূসর রেখা দ্বারা চিহ্নিত করা হয়। আপনি সীমানা নিয়ন্ত্রণ করতে calendar.monthOutlineColor বিকল্প, লেবেল ফন্ট কাস্টমাইজ করতে calendar.monthLabel এবং লেবেল প্যাডিং সামঞ্জস্য করতে calendar.underMonthSpace ব্যবহার করতে পারেন:

আমরা লেবেল ফন্টটিকে একটি গভীর লাল 12pt Times-Roman বোল্ড ইটালিকে সেট করেছি, রূপরেখাগুলিকে একই রঙে সেট করেছি এবং 16 পিক্সেলের প্যাডিং দিয়েছি। অব্যবহৃত মাসের রূপরেখা একই রঙের একটি ক্ষীণ রঙে সেট করা হয়েছে।

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

বছর

ক্যালেন্ডার চার্টের বছরগুলি সবসময় চার্টের বাম প্রান্তে থাকে এবং calendar.yearLabel এবং calendar.underYearSpace দিয়ে কাস্টমাইজ করা যেতে পারে :

আমরা বছরের ফন্টটিকে একটি গাঢ় সবুজ 32pt টাইমস-রোমান বোল্ড ইটালিকে সেট করেছি এবং বছরের লেবেল এবং চার্টের নীচের মধ্যে দশটি পিক্সেল যুক্ত করেছি:

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

লোড হচ্ছে

google.charts.load প্যাকেজের নাম হল "calendar" :

  google.charts.load("current", {packages: ["calendar"]});

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

  var visualization = new google.visualization.Calendar(container);

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

সারি: টেবিলের প্রতিটি সারি একটি তারিখ প্রতিনিধিত্ব করে।

কলাম:

কলাম 0 কলাম 1 ... কলাম N (ঐচ্ছিক)
উদ্দেশ্য: তারিখগুলি মূল্যবোধ ... ঐচ্ছিক ভূমিকা
ডেটা টাইপ: তারিখ, তারিখ সময়, বা দিনের সময় সংখ্যা ...
ভূমিকা: ডোমেইন তথ্য ...
ঐচ্ছিক কলাম ভূমিকা :

কোনোটিই নয়

কোনোটিই নয়

 ...

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

নাম
calendar.cellColor

calendar.cellColor বিকল্পটি আপনাকে ক্যালেন্ডার দিনের স্কোয়ারের সীমানা কাস্টমাইজ করতে দেয়:

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
প্রকার: বস্তু
ডিফল্ট: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

ক্যালেন্ডার দিনের বর্গক্ষেত্রের আকার:

var options = { calendar: { cellSize: 10 } };
প্রকার: পূর্ণসংখ্যা
ডিফল্ট: 16
calendar.dayOfWeekLabel

চার্টের শীর্ষে সপ্তাহের লেবেলের ফন্ট শৈলী নিয়ন্ত্রণ করে:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
প্রকার: বস্তু
ডিফল্ট: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

সপ্তাহের লেবেলের ডান প্রান্ত এবং চার্ট দিনের বর্গক্ষেত্রের বাম প্রান্তের মধ্যে দূরত্ব৷

প্রকার: পূর্ণসংখ্যা
ডিফল্ট: 4
calendar.daysOfWeek

রবিবার থেকে শনিবার পর্যন্ত ব্যবহার করা একক-অক্ষরের লেবেল।

প্রকার: স্ট্রিং
ডিফল্ট: 'SMTWTFS'
calendar.focusedCellColor

যখন ব্যবহারকারী একটি দিনের বর্গক্ষেত্রে ফোকাস করে (বলুন, হোভার করে), ক্যালেন্ডার চার্টগুলি বর্গটিকে হাইলাইট করবে।

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
প্রকার: বস্তু
ডিফল্ট: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

মাসের লেবেলের জন্য শৈলী, যেমন:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
প্রকার: বস্তু
ডিফল্ট: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

এই শৈলীতে একটি সীমানা ব্যবহার করে ডেটা মান সহ মাসগুলি অন্যদের থেকে চিত্রিত করা হয়।

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(এছাড়াও calendar.unusedMonthOutlineColor দেখুন।)
প্রকার: বস্তু
ডিফল্ট: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

মাসের লেবেলের নীচে এবং দিনের স্কোয়ারের শীর্ষের মধ্যে পিক্সেলের সংখ্যা:

var options = { calendar: { underMonthSpace: 12 } };
প্রকার: পূর্ণসংখ্যা
ডিফল্ট: 6
calendar.underYearSpace

নিচের-সবচেয়ে বছরের লেবেল এবং চার্টের নীচের মধ্যে পিক্সেলের সংখ্যা:

var options = { calendar: { underYearSpace: 2 } };
প্রকার: পূর্ণসংখ্যা
ডিফল্ট: 0
calendar.unusedMonthOutlineColor

এই শৈলীতে একটি সীমানা ব্যবহার করে ডেটা মান ছাড়া মাসগুলি অন্যদের থেকে চিত্রিত করা হয়।

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(এছাড়াও calendar.monthOutlineColor দেখুন।)
প্রকার: বস্তু
ডিফল্ট: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
রঙের অক্ষ

একটি বস্তু যা রঙের কলামের মান এবং রং বা গ্রেডিয়েন্ট স্কেলের মধ্যে একটি ম্যাপিং নির্দিষ্ট করে। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
প্রকার: বস্তু
ডিফল্ট: নাল
colorAxis.colors

ভিজ্যুয়ালাইজেশনে মান নির্ধারণের জন্য রং। স্ট্রিংগুলির একটি অ্যারে, যেখানে প্রতিটি উপাদান একটি HTML রঙের স্ট্রিং, উদাহরণস্বরূপ: colorAxis: {colors:['red','#004411']} । আপনার কমপক্ষে দুটি মান থাকতে হবে; গ্রেডিয়েন্ট আপনার সমস্ত মান অন্তর্ভুক্ত করবে, সাথে গণনা করা মধ্যস্থতামূলক মান, প্রথম রঙটি সবচেয়ে ছোট মান হিসাবে এবং শেষ রঙটি সর্বোচ্চ হিসাবে।

প্রকার: রঙের স্ট্রিং এর অ্যারে
ডিফল্ট: নাল
colorAxis.maxValue

উপস্থিত থাকলে, চার্ট রঙের ডেটার জন্য সর্বোচ্চ মান নির্দিষ্ট করে। এই মান এবং উচ্চতর রঙের ডেটা মানগুলি colorAxis.colors পরিসরে শেষ রঙ হিসাবে রেন্ডার করা হবে।

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে রঙের কলামের সর্বাধিক মান
colorAxis.minValue

উপস্থিত থাকলে, চার্ট রঙের ডেটার জন্য একটি ন্যূনতম মান নির্দিষ্ট করে। এই মান এবং কম রঙের ডেটা মানগুলি colorAxis.colors পরিসরে প্রথম রঙ হিসাবে রেন্ডার করা হবে।

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে রঙের কলামের ন্যূনতম মান
colorAxis.values

উপস্থিত থাকলে, মানগুলি কীভাবে রঙের সাথে যুক্ত হয় তা নিয়ন্ত্রণ করে। প্রতিটি মান colorAxis.colors অ্যারেতে সংশ্লিষ্ট রঙের সাথে যুক্ত। এই মানগুলি চার্টের রঙের ডেটাতে প্রযোজ্য। এখানে উল্লিখিত মানগুলির একটি গ্রেডিয়েন্ট অনুযায়ী রঙ করা হয়। এই বিকল্পের জন্য একটি মান নির্দিষ্ট না করা [minValue, maxValue] নির্দিষ্ট করার সমতুল্য।

প্রকার: সংখ্যার অ্যারে
ডিফল্ট: নাল
forceIFrame

একটি ইনলাইন ফ্রেমের ভিতরে চার্ট আঁকে। (উল্লেখ্য যে IE8 এ, এই বিকল্পটি উপেক্ষা করা হয়েছে; সমস্ত IE8 চার্ট আই-ফ্রেমে আঁকা হয়েছে।)

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
উচ্চতা

চার্টের উচ্চতা, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: ধারণকারী উপাদানের উচ্চতা
noDataPattern

ক্যালেন্ডার চার্ট একটি ডোরাকাটা তির্যক প্যাটার্ন ব্যবহার করে নির্দেশ করে যে একটি নির্দিষ্ট দিনের জন্য কোন ডেটা নেই। গ্রেস্কেল ডিফল্ট ওভাররাইড করতে noDataPattern.backgroundColor এবং noDataPattern.color বিকল্পগুলি ব্যবহার করুন, যেমন:

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
প্রকার: বস্তু
ডিফল্ট: নাল
tooltip.isHtml

SVG-রেন্ডার করা (HTML-রেন্ডারের পরিবর্তে) টুলটিপ ব্যবহার করতে false সেট করুন। আরও বিস্তারিত জানার জন্য টুলটিপ সামগ্রী কাস্টমাইজ করা দেখুন।

দ্রষ্টব্য: টুলটিপ কলাম ডেটা ভূমিকার মাধ্যমে HTML টুলটিপ সামগ্রীর কাস্টমাইজেশন পাই চার্ট এবং বাবল চার্ট ভিজ্যুয়ালাইজেশন দ্বারা সমর্থিত নয় ৷

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
প্রস্থ

চার্টের প্রস্থ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: ধারণকারী উপাদানের প্রস্থ

পদ্ধতি

পদ্ধতি
draw(data, options)

চার্ট আঁকে। ready ইভেন্ট ফায়ার হওয়ার পরেই চার্টটি আরও মেথড কল গ্রহণ করে। Extended description .

রিটার্ন টাইপ: কোনোটিই নয়
getBoundingBox(id)

চার্ট এলিমেন্ট id বাম, উপরে, প্রস্থ এবং উচ্চতা সম্বলিত একটি বস্তু প্রদান করে। id বিন্যাসটি এখনও নথিভুক্ত করা হয়নি (এগুলি ইভেন্ট হ্যান্ডলারের রিটার্ন মান), তবে এখানে কিছু উদাহরণ রয়েছে:

var cli = chart.getChartLayoutInterface();

চার্ট এলাকার উচ্চতা
cli.getBoundingBox('chartarea').height
একটি বার বা কলাম চার্টের প্রথম সিরিজের তৃতীয় বারের প্রস্থ
cli.getBoundingBox('bar#0#2').width
পাই চার্টের পঞ্চম ওয়েজের বাউন্ডিং বক্স
cli.getBoundingBox('slice#4')
একটি উল্লম্ব (যেমন, কলাম) চার্টের চার্ট ডেটার বাউন্ডিং বক্স:
cli.getBoundingBox('vAxis#0#gridline')
একটি অনুভূমিক (যেমন, বার) চার্টের চার্ট ডেটার বাউন্ডিং বক্স:
cli.getBoundingBox('hAxis#0#gridline')

মানগুলি চার্টের কন্টেইনারের সাথে আপেক্ষিক। চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: অবজেক্ট
getSelection()

নির্বাচিত চার্ট সত্তাগুলির একটি অ্যারে প্রদান করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। একটি বার ডেটা টেবিলের একটি কক্ষের সাথে, একটি কলামে একটি লিজেন্ড এন্ট্রি (সারি সূচকটি শূন্য) এবং একটি সারির একটি বিভাগ (কলাম সূচকটি নাল)। এই চার্টের জন্য, যে কোনো মুহূর্তে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। Extended description .

রিটার্ন টাইপ: নির্বাচন উপাদানের অ্যারে
setSelection()

নির্দিষ্ট চার্ট সত্তা নির্বাচন করে। আগের যেকোনো নির্বাচন বাতিল করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। একটি বার ডেটা টেবিলের একটি কক্ষের সাথে, একটি কলামে একটি লিজেন্ড এন্ট্রি (সারি সূচকটি শূন্য) এবং একটি সারির একটি বিভাগ (কলাম সূচকটি নাল)। এই চার্টের জন্য, একবারে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। Extended description .

রিটার্ন টাইপ: কোনোটিই নয়
clearChart()

চার্টটি সাফ করে এবং এর সমস্ত বরাদ্দকৃত সংস্থান প্রকাশ করে।

রিটার্ন টাইপ: কোনোটিই নয়

ঘটনা

নাম
error

চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়।

বৈশিষ্ট্য: আইডি, বার্তা
onmouseover

যখন ব্যবহারকারী একটি ভিজ্যুয়াল সত্তার উপর মাউস দেয় তখন বহিস্কার করা হয়। সত্তার সারি সূচক এবং তারিখের মান পাস করে। সত্তার জন্য কোনো ডেটা টেবিল উপাদান না থাকলে, সারি সূচকের জন্য ফেরত দেওয়া মান undefined ।

বৈশিষ্ট্য: সারি, তারিখ
onmouseout

ব্যবহারকারী মাউস একটি ভিজ্যুয়াল সত্তা থেকে দূরে থাকলে বহিস্কার করা হয়। সত্তার সারি সূচক এবং তারিখের মান পাস করে। সত্তার জন্য কোনো ডেটা টেবিল উপাদান না থাকলে, সারি সূচকের জন্য ফেরত দেওয়া মান undefined ।

বৈশিষ্ট্য সারি, তারিখ
ready

চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে draw পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে।

বৈশিষ্ট্য: কোনোটিই নয়
select

ব্যবহারকারী একটি ভিজ্যুয়াল সত্তা ক্লিক করলে বহিস্কার করা হয়। কি নির্বাচন করা হয়েছে তা জানতে, getSelection() কল করুন।

বৈশিষ্ট্য: কোনোটিই নয়

ডেটা নীতি

সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।