ওভারভিউ
টীকা চার্ট হল ইন্টারেক্টিভ টাইম সিরিজ লাইন চার্ট যা টীকা সমর্থন করে। নোট করুন যে টীকাকৃত টাইমলাইন এখন স্বয়ংক্রিয়ভাবে টীকা চার্ট ব্যবহার করে।
বিভ্রান্তি সতর্কতা: বর্তমানে, Google টীকা চার্ট অন্যান্য 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':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
লোড হচ্ছে
google.charts.load
প্যাকেজের নাম "annotationchart"
।
google.charts.load("current", {packages: ['annotationchart']});
ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.visualization.AnnotationChart
।
var visualization = new google.visualization.AnnotationChart(container);
উপাত্ত বিন্যাস
আপনি আপনার চার্টে এক বা একাধিক লাইন প্রদর্শন করতে পারেন। প্রতিটি সারি চার্টে একটি X অবস্থানের প্রতিনিধিত্ব করে—অর্থাৎ একটি নির্দিষ্ট সময়; প্রতিটি লাইন এক থেকে তিনটি কলামের একটি সেট দ্বারা বর্ণনা করা হয়।
- প্রথম কলামটি
date
বাdatetime
টাইপ, এবং চার্টে বিন্দুর X মান নির্দিষ্ট করে। যদি এই কলামটিdate
হয় (এবংdatetime
নয়) তাহলে X অক্ষের সবচেয়ে ছোট সময়ের রেজোলিউশন হবে একদিন। - প্রতিটি ডেটা লাইন তারপর এখানে বর্ণিত হিসাবে এক থেকে তিনটি অতিরিক্ত কলামের একটি সেট দ্বারা বর্ণনা করা হয়:
- Y মান - [ প্রয়োজনীয়, সংখ্যা ] প্রতিটি সেটের প্রথম কলামটি প্রথম কলাম থেকে সংশ্লিষ্ট সময়ে লাইনের মান বর্ণনা করে। কলাম লেবেল চার্টে সেই লাইনের শিরোনাম হিসাবে প্রদর্শিত হয়।
- টীকা শিরোনাম - [ ঐচ্ছিক, স্ট্রিং ] যদি একটি স্ট্রিং কলাম মান কলাম অনুসরণ করে, এবং
displayAnnotations
বিকল্পটি সত্য হয়, এই কলামটি এই পয়েন্টটি বর্ণনা করে একটি ছোট শিরোনাম ধারণ করে। উদাহরণস্বরূপ, যদি এই রেখাটি ব্রাজিলের তাপমাত্রার প্রতিনিধিত্ব করে এবং এই বিন্দুটি একটি খুব বেশি সংখ্যা হয়, তাহলে শিরোনামটি "রেকর্ডে সবচেয়ে উষ্ণ দিন" হতে পারে। - টীকা টেক্সট - [ ঐচ্ছিক স্ট্রিং ] যদি এই সিরিজের জন্য একটি দ্বিতীয় স্ট্রিং কলাম বিদ্যমান থাকে, তাহলে সেল মান এই পয়েন্টের জন্য অতিরিক্ত বর্ণনামূলক পাঠ্য হিসাবে ব্যবহার করা হবে। এই কলামটি ব্যবহার করতে আপনাকে অবশ্যই
displayAnnotations
বিকল্পটি সত্যে সেট করতে হবে। আপনি HTML ট্যাগ ব্যবহার করতে পারেন, যদি আপনিallowHtml
true
সেট করেন; মূলত কোন আকারের সীমা নেই, তবে মনে রাখবেন যে অত্যধিক দীর্ঘ এন্ট্রি ডিসপ্লে বিভাগে উপচে পড়তে পারে। এই পয়েন্টের জন্য আপনার কাছে একটি টীকা শিরোনাম কলাম থাকলেও আপনার এই কলামটি থাকার প্রয়োজন নেই৷ কলাম লেবেল চার্ট দ্বারা ব্যবহার করা হয় না. উদাহরণস্বরূপ, যদি এটি রেকর্ড পয়েন্টে সবচেয়ে উষ্ণতম দিন হয়, তাহলে আপনি কিছু বলতে পারেন "পরের দিনটি 10 ডিগ্রি শীতল ছিল!"।
কনফিগারেশন অপশন
নাম | |
---|---|
অনুমতি এইচটিএমএল | সত্য হিসাবে সেট করা হলে, HTML ট্যাগ সহ যেকোন টীকা পাঠ HTML হিসাবে রেন্ডার করা হবে। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
allValuesSuffix | লেজেন্ডের সমস্ত মানগুলিতে একটি প্রত্যয় যোগ করতে হবে এবং উল্লম্ব অক্ষগুলিতে লেবেলে টিক দিন। প্রকার: স্ট্রিং ডিফল্ট: কোনোটিই নয় |
টীকা প্রস্থ | সম্পূর্ণ চার্ট এলাকার বাইরে টীকা ক্ষেত্রটির প্রস্থ (শতাংশে)। 5-80 রেঞ্জের মধ্যে একটি সংখ্যা হতে হবে। প্রকার: সংখ্যা ডিফল্ট: 25 |
রং | চার্ট লাইন এবং লেবেলের জন্য ব্যবহার করা রং। স্ট্রিং একটি অ্যারে. প্রতিটি উপাদান একটি বৈধ HTML রঙ বিন্যাসে একটি স্ট্রিং। যেমন 'লাল' বা '#00cc00'। প্রকার: স্ট্রিং এর অ্যারে ডিফল্ট: ডিফল্ট রং |
তারিখ বিন্যাস | উপরের ডানদিকে কোণায় তারিখের তথ্য প্রদর্শন করতে ব্যবহৃত বিন্যাস। এই ক্ষেত্রের বিন্যাস জাভা SimpleDateFormat ক্লাস দ্বারা নির্দিষ্ট করা হয়েছে। প্রকার: স্ট্রিং ডিফল্ট: হয় 'MMMM dd, yyyy' বা 'HH:mm MMMM dd, yyyy', প্রথম কলামের প্রকারের উপর নির্ভর করে (যথাক্রমে তারিখ, বা তারিখ সময়)। |
টীকা প্রদর্শন | মিথ্যাতে সেট করা থাকলে, চার্টটি টীকা সারণী লুকিয়ে রাখবে এবং টীকা এবং টীকা পাঠ্য দৃশ্যমান হবে না (এই বিকল্পটি নির্বিশেষে আপনার ডেটাতে কোনো টীকা না থাকলে টীকা টেবিলটিও প্রদর্শিত হবে না)। যখন এই বিকল্পটি সত্য হিসাবে সেট করা হয়, প্রতিটি সাংখ্যিক কলামের পরে, দুটি ঐচ্ছিক টীকা স্ট্রিং কলাম যোগ করা যেতে পারে, একটি টীকা শিরোনামের জন্য এবং একটি টীকা পাঠের জন্য। প্রকার: বুলিয়ান ডিফল্ট: সত্য |
ডিসপ্লে অ্যানোটেশন ফিল্টার | সত্য হিসাবে সেট করা হলে, লেখচিত্রটি টীকা ফিল্টার করার জন্য একটি ফিল্টার নিয়ন্ত্রণ প্রদর্শন করবে। যখন অনেক টীকা থাকে তখন এই বিকল্পটি ব্যবহার করুন৷ প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
ডিসপ্লে ডেটবার সেপারেটর | কিংবদন্তীতে সিরিজের মান এবং তারিখের মধ্যে একটি ছোট বার বিভাজক ( | ) প্রদর্শন করা হবে কিনা, যেখানে সত্য মানে হ্যাঁ। প্রকার: বুলিয়ান ডিফল্ট: সত্য |
প্রদর্শন সঠিক মান | স্থান বাঁচাতে গ্রাফের শীর্ষে মানগুলির একটি সংক্ষিপ্ত, গোলাকার সংস্করণ প্রদর্শন করা হবে কিনা; মিথ্যা নির্দেশ করে যে এটি হতে পারে। উদাহরণস্বরূপ, মিথ্যাতে সেট করা হলে, 56123.45 56.12k হিসাবে প্রদর্শিত হতে পারে। প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
ডিসপ্লে লেজেন্ডডটস | কিংবদন্তি পাঠ্যের মানের পাশে বিন্দু প্রদর্শন করা হবে কিনা, যেখানে সত্য মানে হ্যাঁ। প্রকার: বুলিয়ান ডিফল্ট: সত্য |
ডিসপ্লেলেজেন্ড ভ্যালুস | কিংবদন্তীতে হাইলাইট করা মানগুলি প্রদর্শন করা হবে কিনা, যেখানে সত্য মানে হ্যাঁ। প্রকার: বুলিয়ান ডিফল্ট: সত্য |
প্রদর্শন রেঞ্জ নির্বাচক | জুম পরিসর নির্বাচন এলাকা (চার্টের নীচের অংশ) দেখাবেন কিনা, যেখানে মিথ্যা মানে না। জুম নির্বাচকের রূপরেখা হল চার্টের প্রথম সিরিজের একটি লগ স্কেল সংস্করণ, যা জুম নির্বাচকের উচ্চতার সাথে মানানসই করা হয়েছে। প্রকার: বুলিয়ান ডিফল্ট: সত্য |
ডিসপ্লে জুম বাটন | জুম বোতামগুলি দেখাতে হবে কিনা ("1d 5d 1m" ইত্যাদি), যেখানে মিথ্যা মানে নেই৷ প্রকার: বুলিয়ান ডিফল্ট: সত্য |
পূরণ | 0-100 (অন্তর্ভুক্ত) থেকে একটি সংখ্যা লাইন গ্রাফের প্রতিটি লাইনের নীচে পূরণের আলফা নির্দিষ্ট করে। 100 মানে 100% অস্বচ্ছ, এবং 0 মানে মোটেও ফিল না। ভরাট রঙটি উপরের লাইনের মতো একই রঙের। প্রকার: সংখ্যা ডিফল্ট: 0 |
কিংবদন্তি অবস্থান | জুম বোতাম এবং তারিখ ('sameRow') বা একটি নতুন সারিতে ('newRow') দিয়ে একই সারিতে রঙিন কিংবদন্তি রাখতে হবে কিনা। প্রকার: স্ট্রিং ডিফল্ট: 'sameRow' |
সর্বোচ্চ | Y অক্ষে দেখানো সর্বোচ্চ মান। যদি সর্বাধিক ডেটা পয়েন্ট এই মানটিকে অতিক্রম করে, এই সেটিংটি উপেক্ষা করা হবে, এবং সর্বাধিক ডেটা পয়েন্টের উপরে পরবর্তী প্রধান টিক চিহ্ন দেখানোর জন্য চার্টটি সামঞ্জস্য করা হবে৷ এটি এটি মূল চার্টে প্রকার: সংখ্যা ডিফল্ট: স্বয়ংক্রিয় |
মিনিট | Y অক্ষে দেখানোর জন্য সর্বনিম্ন মান৷ ন্যূনতম ডেটা পয়েন্ট এই মানের থেকে কম হলে, এই সেটিংটি উপেক্ষা করা হবে, এবং ন্যূনতম ডেটা পয়েন্টের নীচে পরবর্তী প্রধান টিক চিহ্ন দেখানোর জন্য চার্ট সামঞ্জস্য করা হবে। এটি এটি মূল চার্টে প্রকার: সংখ্যা ডিফল্ট: স্বয়ংক্রিয় |
সংখ্যা বিন্যাস | গ্রাফের শীর্ষে মান বিন্যাস করতে ব্যবহার করা সংখ্যা বিন্যাস নিদর্শন নির্দিষ্ট করে। জাভা DecimalFormat ক্লাস দ্বারা নির্দিষ্ট করা বিন্যাসে প্যাটার্ন হওয়া উচিত।
এই বিকল্পটি নির্দিষ্ট করা থাকলে, প্রকার: স্ট্রিং, বা সংখ্যার মানচিত্র: স্ট্রিং জোড়া ডিফল্ট: স্বয়ংক্রিয় |
স্কেল কলাম | গ্রাফে Y অক্ষের টিক চিহ্নগুলিতে কোন মানগুলি দেখাতে হবে তা নির্দিষ্ট করে৷ ডিফল্ট হল ডান দিকে একটি একক স্কেল থাকা, যা উভয় সিরিজে প্রযোজ্য; কিন্তু আপনি গ্রাফের বিভিন্ন দিক বিভিন্ন সিরিজের মানগুলিতে স্কেল করতে পারেন। এই বিকল্পটি স্কেল মান হিসাবে ব্যবহার করার জন্য সিরিজের (শূন্য-ভিত্তিক) সূচক নির্দিষ্ট করে শূন্য থেকে তিনটি সংখ্যার অ্যারে নেয়। এই মানগুলি কোথায় দেখানো হবে তা নির্ভর করে আপনি আপনার অ্যারেতে কতগুলি মান অন্তর্ভুক্ত করবেন তার উপর:
একাধিক স্কেল প্রদর্শন করার সময়, প্রকার: সংখ্যার অ্যারে ডিফল্ট: স্বয়ংক্রিয় |
স্কেল ফরম্যাট | অক্ষ টিক লেবেলগুলির জন্য ব্যবহার করা সংখ্যা বিন্যাস৷ প্রকার: স্ট্রিং ডিফল্ট: '#' |
স্কেল টাইপ | Y অক্ষে দেখানো সর্বোচ্চ এবং সর্বনিম্ন মান সেট করে। নিম্নলিখিত বিকল্পগুলি উপলব্ধ:
আপনি যদি ন্যূনতম এবং/অথবা সর্বাধিক বিকল্পগুলি নির্দিষ্ট করেন, তবে সেগুলি আপনার স্কেলের প্রকার দ্বারা নির্ধারিত সর্বনিম্ন এবং সর্বাধিক মানগুলির উপর অগ্রাধিকার পাবে৷ প্রকার: স্ট্রিং ডিফল্ট: 'স্থির' |
টেবিল | টীকা সারণী সম্পর্কিত বিকল্পগুলি রয়েছে৷ এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি বস্তুর আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন: var options: { table: { sortAscending: true, sortColumn: 1 } }; প্রকার: বস্তু ডিফল্ট: নাল |
table.sortAscending | প্রকার: বুলিয়ান ডিফল্ট: মিথ্যা |
table.sortColumn | টীকা সারণীর কলাম সূচী যার জন্য টীকাগুলি সাজানো হবে৷ টীকা লেবেল কলামের জন্য সূচকটি অবশ্যই 0 হতে হবে অথবা টীকা পাঠ কলামের জন্য 1 হতে হবে। প্রকার: সংখ্যা ডিফল্ট: 0 |
বেধ | 0-10 থেকে একটি সংখ্যা (অন্তর্ভুক্ত) রেখার পুরুত্ব নির্দিষ্ট করে, যেখানে 0 হল সবচেয়ে পাতলা। প্রকার: সংখ্যা ডিফল্ট: 0 |
জুমএন্ডটাইম | নির্বাচিত জুম পরিসরের শেষ তারিখ/সময় সেট করে। প্রকার: তারিখ ডিফল্ট: কোনোটিই নয় |
জুম স্টার্টটাইম | নির্বাচিত জুম পরিসরের শুরুর তারিখ/সময় সেট করে। প্রকার: তারিখ ডিফল্ট: কোনোটিই নয় |
পদ্ধতি
পদ্ধতি | |
---|---|
clearChart() | চার্টটি সাফ করে এবং এর সমস্ত বরাদ্দকৃত সংস্থান প্রকাশ করে। রিটার্ন টাইপ: কোনোটিই নয় |
draw(data, options, state) | চার্ট আঁকে। রিটার্ন টাইপ: কোনোটিই নয় |
getContainer() | টীকা চার্ট ধারণকারী কন্টেইনার উপাদানের একটি হ্যান্ডেল পুনরুদ্ধার করে। রিটার্ন টাইপ: একটি DOM এলিমেন্টে হ্যান্ডেল করুন |
getSelection() | স্ট্যান্ডার্ড রিটার্ন টাইপ: নির্বাচন উপাদানের অ্যারে |
getVisibleChartRange() | রিটার্ন টাইপ: start এবং end বৈশিষ্ট্য সহ একটি বস্তু |
hideDataColumns( columnIndexes ) | চার্ট থেকে নির্দিষ্ট ডেটা সিরিজ লুকিয়ে রাখে। একটি প্যারামিটার গ্রহণ করে যা একটি সংখ্যা বা সংখ্যার অ্যারে হতে পারে, যেখানে 0 প্রথম ডেটা সিরিজকে বোঝায় এবং আরও অনেক কিছু। রিটার্ন টাইপ: কোনোটিই নয় |
setVisibleChartRange( start , end ) | দৃশ্যমান পরিসর (জুম) নির্দিষ্ট পরিসরে সেট করে। টাইপ রিটার্ন টাইপ: কোনোটিই নয় |
showDataColumns( columnIndexes ) | রিটার্ন টাইপ: কোনোটিই নয় |
ঘটনা
নাম | |
---|---|
rangechange | ব্যবহারকারী যখন পরিসীমা স্লাইডার পরিবর্তন করে তখন বহিস্কার করা হয়। নতুন রেঞ্জ এন্ডপয়েন্ট google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } বৈশিষ্ট্য: শুরু, শেষ |
ready | চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে বৈশিষ্ট্য: কোনোটিই নয় |
select | ব্যবহারকারী একটি ভিজ্যুয়াল সত্তা ক্লিক করলে বহিস্কার করা হয়। কি নির্বাচন করা হয়েছে তা জানতে, বৈশিষ্ট্য: কোনোটিই নয় |
ডেটা নীতি
সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।