ওভারভিউ
ঐচ্ছিক টীকা সহ একটি ইন্টারেক্টিভ টাইম সিরিজ লাইন চার্ট।
টীকাকৃত টাইমলাইন এখন স্বয়ংক্রিয়ভাবে পরিবর্তে টীকা চার্ট ব্যবহার করে।
উদাহরণ
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>
গুরুত্বপূর্ণ: এই ভিজ্যুয়ালাইজেশন ব্যবহার করার জন্য, আপনাকে অবশ্যই আপনার পৃষ্ঠায় কন্টেইনার উপাদানটির উচ্চতা এবং প্রস্থ স্পষ্টভাবে উল্লেখ করতে হবে। সুতরাং, উদাহরণস্বরূপ: <div id="chart_div" style="width:400; height:250"></div>
লোড হচ্ছে
google.charts.load
প্যাকেজের নাম "annotatedtimeline"
google.charts.load("current", {packages: ['annotatedtimeline']});
ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.visualization.AnnotatedTimeLine
var visualization = new google.visualization.AnnotatedTimeLine(container);
উপাত্ত বিন্যাস
আপনি আপনার চার্টে এক বা একাধিক লাইন প্রদর্শন করতে পারেন। প্রতিটি সারি চার্টে একটি X অবস্থান উপস্থাপন করে--অর্থাৎ একটি নির্দিষ্ট সময়; প্রতিটি লাইন এক থেকে তিনটি কলামের একটি সেট দ্বারা বর্ণনা করা হয়।
- প্রথম কলামটি
date
বাdatetime
টাইপ, এবং চার্টে বিন্দুর X মান নির্দিষ্ট করে। যদি এই কলামটিdate
হয় (এবংdatetime
নয়) তাহলে X অক্ষের সবচেয়ে ছোট সময়ের রেজোলিউশন হবে একদিন। - প্রতিটি ডেটা লাইন তারপর এখানে বর্ণিত হিসাবে এক থেকে তিনটি অতিরিক্ত কলামের একটি সেট দ্বারা বর্ণনা করা হয়:
- Y মান - [ প্রয়োজনীয়, সংখ্যা ] প্রতিটি সেটের প্রথম কলামটি প্রথম কলাম থেকে সংশ্লিষ্ট সময়ে লাইনের মান বর্ণনা করে। কলাম লেবেল চার্টে সেই লাইনের শিরোনাম হিসাবে প্রদর্শিত হয়।
- টীকা শিরোনাম - [ ঐচ্ছিক, স্ট্রিং ] যদি একটি স্ট্রিং কলাম মান কলাম অনুসরণ করে, এবং
displayAnnotations
বিকল্পটি সত্য হয়, এই কলামটি এই পয়েন্টটি বর্ণনা করে একটি ছোট শিরোনাম ধারণ করে। উদাহরণস্বরূপ, যদি এই রেখাটি ব্রাজিলের তাপমাত্রার প্রতিনিধিত্ব করে এবং এই বিন্দুটি একটি খুব বেশি সংখ্যা হয়, তাহলে শিরোনামটি "রেকর্ডে সবচেয়ে উষ্ণ দিন" হতে পারে। - টীকা টেক্সট - [ ঐচ্ছিক স্ট্রিং ] যদি এই সিরিজের জন্য একটি দ্বিতীয় স্ট্রিং কলাম বিদ্যমান থাকে, তাহলে সেল মান এই পয়েন্টের জন্য অতিরিক্ত বর্ণনামূলক পাঠ্য হিসাবে ব্যবহার করা হবে। এই কলামটি ব্যবহার করতে আপনাকে অবশ্যই
displayAnnotations
বিকল্পটি সত্যে সেট করতে হবে। আপনি HTML ট্যাগ ব্যবহার করতে পারেন, যদি আপনিallowHtml
true
সেট করেন; মূলত কোন আকারের সীমা নেই, তবে মনে রাখবেন যে অত্যধিক দীর্ঘ এন্ট্রি ডিসপ্লে বিভাগে উপচে পড়তে পারে। এই পয়েন্টের জন্য আপনার কাছে একটি টীকা শিরোনাম কলাম থাকলেও আপনার এই কলামটি থাকার প্রয়োজন নেই৷ কলাম লেবেল চার্ট দ্বারা ব্যবহার করা হয় না. উদাহরণস্বরূপ, যদি এটি রেকর্ড পয়েন্টে সবচেয়ে উষ্ণতম দিন হয়, তাহলে আপনি কিছু বলতে পারেন "পরের দিনটি 10 ডিগ্রি শীতল ছিল!"।
কনফিগারেশন অপশন
নাম | টাইপ | ডিফল্ট | বর্ণনা |
---|---|---|---|
অনুমতি এইচটিএমএল | বুলিয়ান | মিথ্যা | সত্য হিসাবে সেট করা হলে, HTML ট্যাগ সহ যেকোন টীকা পাঠ HTML হিসাবে রেন্ডার করা হবে। |
অনুমতি পুনরায় আঁকা | বুলিয়ান | মিথ্যা | এই ভিজ্যুয়ালাইজেশনে
|
allValuesSuffix | স্ট্রিং | কোনটি | দাঁড়িপাল্লা এবং কিংবদন্তির সমস্ত মানের সাথে একটি প্রত্যয় যোগ করতে হবে। |
টীকা প্রস্থ | সংখ্যা | 25 | সম্পূর্ণ চার্ট এলাকার বাইরে টীকা ক্ষেত্রটির প্রস্থ (শতাংশে)। 5-80 রেঞ্জের মধ্যে একটি সংখ্যা হতে হবে। |
রং | স্ট্রিং এর অ্যারে | ডিফল্ট রং | চার্ট লাইন এবং লেবেলের জন্য ব্যবহার করা রং। স্ট্রিং একটি অ্যারে. প্রতিটি উপাদান একটি বৈধ HTML রঙ বিন্যাসে একটি স্ট্রিং। যেমন 'লাল' বা '#00cc00'। |
তারিখ বিন্যাস | স্ট্রিং | হয় 'MMMM dd, yyyy' বা 'HH:mm MMMM dd, yyyy', প্রথম কলামের প্রকারের উপর নির্ভর করে (যথাক্রমে তারিখ, বা তারিখ সময়)। | উপরের ডানদিকে কোণায় তারিখের তথ্য প্রদর্শন করতে ব্যবহৃত বিন্যাস। এই ক্ষেত্রের বিন্যাস জাভা SimpleDateFormat ক্লাস দ্বারা নির্দিষ্ট করা হয়েছে। |
টীকা প্রদর্শন | বুলিয়ান | মিথ্যা | সত্য হিসাবে সেট করা হলে, চার্টটি নির্বাচিত মানগুলির উপরে টীকা দেখাবে। যখন এই বিকল্পটি সত্য হিসাবে সেট করা হয়, প্রতিটি সাংখ্যিক কলামের পরে, দুটি ঐচ্ছিক টীকা স্ট্রিং কলাম যোগ করা যেতে পারে, একটি টীকা শিরোনামের জন্য এবং একটি টীকা পাঠের জন্য। |
ডিসপ্লে অ্যানোটেশন ফিল্টার | বুলিয়ান | মিথ্যা | সত্য হিসাবে সেট করা হলে, লেখচিত্রটি টীকা ফিল্টার করার জন্য একটি ফিল্টার নিয়ন্ত্রণ প্রদর্শন করবে। যখন অনেক টীকা থাকে তখন এই বিকল্পটি ব্যবহার করুন৷ |
ডিসপ্লে ডেটবার সেপারেটর | বুলিয়ান | সত্য | কিংবদন্তীতে সিরিজের মান এবং তারিখের মধ্যে একটি ছোট বার বিভাজক ( | ) প্রদর্শন করা হবে কিনা, যেখানে সত্য মানে হ্যাঁ। |
প্রদর্শন সঠিক মান | বুলিয়ান | মিথ্যা | স্থান বাঁচাতে গ্রাফের শীর্ষে মানগুলির একটি সংক্ষিপ্ত, গোলাকার সংস্করণ প্রদর্শন করা হবে কিনা; মিথ্যা নির্দেশ করে যে এটি হতে পারে। উদাহরণস্বরূপ, মিথ্যাতে সেট করা হলে, 56123.45 56.12k হিসাবে প্রদর্শিত হতে পারে। |
ডিসপ্লে লেজেন্ডডটস | বুলিয়ান | সত্য | কিংবদন্তি পাঠ্যের মানের পাশে বিন্দু প্রদর্শন করা হবে কিনা, যেখানে সত্য মানে হ্যাঁ। |
ডিসপ্লেলেজেন্ড ভ্যালুস | বুলিয়ান | সত্য | কিংবদন্তীতে হাইলাইট করা মানগুলি প্রদর্শন করা হবে কিনা, যেখানে সত্য মানে হ্যাঁ। |
প্রদর্শন রেঞ্জ নির্বাচক | বুলিয়ান | সত্য | জুম পরিসর নির্বাচন এলাকা (চার্টের নীচের অংশ) দেখাবেন কিনা, যেখানে মিথ্যা মানে না। জুম নির্বাচকের আউটলাইনটি চার্টের শেষ সিরিজের একটি লগ স্কেল সংস্করণ, যা জুম নির্বাচকের উচ্চতা অনুসারে মাপসই করা হয়েছে। |
ডিসপ্লে জুম বাটন | বুলিয়ান | সত্য | জুম লিঙ্কগুলি দেখাতে হবে কিনা ("1d 5d 1m" ইত্যাদি), যেখানে মিথ্যা মানে নেই৷ |
পূরণ | সংখ্যা | 0 | 0-100 (অন্তর্ভুক্ত) থেকে একটি সংখ্যা লাইন গ্রাফের প্রতিটি লাইনের নীচে পূরণের আলফা নির্দিষ্ট করে। 100 মানে 100% অস্বচ্ছ ভরাট, 0 মানে একেবারেই পূরণ নয়। ভরাট রঙটি উপরের লাইনের মতো একই রঙের। |
হাইলাইট ডট | স্ট্রিং | 'নিকটতম' | হাইলাইট করার জন্য সিরিজে কোন ডট এবং কিংবদন্তীতে দেখানোর জন্য সংশ্লিষ্ট মান। এই মানগুলির মধ্যে একটি থেকে নির্বাচন করুন:
|
কিংবদন্তি অবস্থান | স্ট্রিং | 'একই সারি' | জুম বোতাম এবং তারিখ ('sameRow') বা একটি নতুন সারিতে ('newRow') দিয়ে একই সারিতে রঙিন কিংবদন্তি রাখতে হবে কিনা। |
সর্বোচ্চ | সংখ্যা | স্বয়ংক্রিয় | Y অক্ষে দেখানো সর্বোচ্চ মান। যদি সর্বাধিক ডেটা পয়েন্ট এই মানটিকে অতিক্রম করে, এই সেটিংটি উপেক্ষা করা হবে, এবং সর্বাধিক ডেটা পয়েন্টের উপরে পরবর্তী প্রধান টিক চিহ্ন দেখানোর জন্য চার্টটি সামঞ্জস্য করা হবে৷ এটি scaleType দ্বারা নির্ধারিত Y অক্ষের সর্বাধিক প্রাধান্য পাবে। |
মিনিট | সংখ্যা | স্বয়ংক্রিয় | Y অক্ষে দেখানোর জন্য সর্বনিম্ন মান৷ ন্যূনতম ডেটা পয়েন্ট এই মানের থেকে কম হলে, এই সেটিংটি উপেক্ষা করা হবে, এবং ন্যূনতম ডেটা পয়েন্টের নীচে পরবর্তী প্রধান টিক চিহ্ন দেখানোর জন্য চার্ট সামঞ্জস্য করা হবে। এটি scaleType দ্বারা নির্ধারিত Y অক্ষের ন্যূনতম উপর অগ্রাধিকার নেবে। |
সংখ্যা বিন্যাস | স্ট্রিং, বা সংখ্যার মানচিত্র: স্ট্রিং জোড়া | স্বয়ংক্রিয় | গ্রাফের শীর্ষে মান বিন্যাস করতে ব্যবহার করা সংখ্যা বিন্যাস নিদর্শন নির্দিষ্ট করে। জাভা DecimalFormat ক্লাস দ্বারা নির্দিষ্ট করা বিন্যাসে প্যাটার্ন হওয়া উচিত।
এই বিকল্পটি নির্দিষ্ট করা থাকলে, |
স্কেল কলাম | সংখ্যার অ্যারে | স্বয়ংক্রিয় | গ্রাফে Y অক্ষের টিক চিহ্নগুলিতে কোন মানগুলি দেখাতে হবে তা নির্দিষ্ট করে৷ ডিফল্ট হল ডান দিকে একটি একক স্কেল থাকা, যা উভয় সিরিজে প্রযোজ্য; কিন্তু আপনি গ্রাফের বিভিন্ন দিক বিভিন্ন সিরিজের মানগুলিতে স্কেল করতে পারেন। এই বিকল্পটি স্কেল মান হিসাবে ব্যবহার করার জন্য সিরিজের (শূন্য-ভিত্তিক) সূচক নির্দিষ্ট করে শূন্য থেকে তিনটি সংখ্যার অ্যারে নেয়। এই মানগুলি কোথায় দেখানো হবে তা নির্ভর করে আপনি আপনার অ্যারেতে কতগুলি মান অন্তর্ভুক্ত করবেন তার উপর:
একাধিক স্কেল প্রদর্শন করার সময়, |
স্কেল টাইপ | স্ট্রিং | 'স্থির' | Y অক্ষে দেখানো সর্বোচ্চ এবং সর্বনিম্ন মান সেট করে। নিম্নলিখিত বিকল্পগুলি উপলব্ধ:
আপনি যদি ন্যূনতম এবং/অথবা সর্বোচ্চ বিকল্পগুলি নির্দিষ্ট করেন, তবে তারা আপনার স্কেলের ধরন দ্বারা নির্ধারিত সর্বনিম্ন এবং সর্বাধিক মানগুলির উপর অগ্রাধিকার পাবে। |
বেধ | সংখ্যা | 0 | 0-10 থেকে একটি সংখ্যা (অন্তর্ভুক্ত) রেখার পুরুত্ব নির্দিষ্ট করে, যেখানে 0 হল সবচেয়ে পাতলা। |
wmode | স্ট্রিং | 'জানলা' | ফ্ল্যাশ চার্টের জন্য উইন্ডো মোড (wmode) প্যারামিটার। উপলব্ধ মানগুলি হল: 'অস্বচ্ছ', 'উইন্ডো' বা 'স্বচ্ছ'। |
জুমএন্ডটাইম | তারিখ | কোনটি | নির্বাচিত জুম পরিসরের শেষ তারিখ/সময় সেট করে। |
জুম স্টার্টটাইম | তারিখ | কোনটি | নির্বাচিত জুম পরিসরের শুরুর তারিখ/সময় সেট করে। |
পদ্ধতি
পদ্ধতি | রিটার্ন টাইপ | বর্ণনা |
---|---|---|
draw(data, options) | কোনটি | চার্ট আঁকে। আপনি allowRedraw প্রপার্টি ব্যবহার করে draw() জন্য দ্বিতীয় এবং পরবর্তী কলগুলির জন্য প্রতিক্রিয়ার সময় দ্রুত করতে পারেন। |
getSelection() | নির্বাচন উপাদানের অ্যারে | স্ট্যান্ডার্ড getSelection() বাস্তবায়ন। নির্বাচিত উপাদানগুলি কোষের উপাদান। ব্যবহারকারী দ্বারা একবারে শুধুমাত্র একটি ঘর নির্বাচন করা যেতে পারে। |
getVisibleChartRange() | start এবং end বৈশিষ্ট্য সহ একটি বস্তু | start এবং end বৈশিষ্ট্য সহ একটি অবজেক্ট প্রদান করে, যেগুলির প্রত্যেকটি একটি Date অবজেক্ট, বর্তমান সময় নির্বাচনের প্রতিনিধিত্ব করে। |
hideDataColumns( columnIndexes ) | কোনটি | চার্ট থেকে নির্দিষ্ট ডেটা সিরিজ লুকিয়ে রাখে। একটি প্যারামিটার গ্রহণ করে যা একটি সংখ্যা বা সংখ্যার অ্যারে হতে পারে, যেখানে 0 প্রথম ডেটা সিরিজকে বোঝায় এবং আরও অনেক কিছু। |
setVisibleChartRange( start , end ) | কোনটি | দৃশ্যমান পরিসর (জুম) নির্দিষ্ট পরিসরে সেট করে। টাইপ Date দুটি পরামিতি গ্রহণ করে যা পছন্দসই নির্বাচিত দৃশ্যমান পরিসরের প্রথম এবং শেষ বার প্রতিনিধিত্ব করে। প্রথম তারিখ থেকে শেষ পর্যন্ত সবকিছু অন্তর্ভুক্ত করতে স্টার্ট নাল সেট করুন; শুরু থেকে শেষ তারিখ পর্যন্ত সবকিছু অন্তর্ভুক্ত করতে শেষ থেকে নাল সেট করুন। |
showDataColumns( columnIndexes ) | কোনটি | hideDataColumns পদ্ধতি ব্যবহার করে লুকানোর পরে চার্ট থেকে নির্দিষ্ট ডেটা সিরিজ দেখায়। একটি প্যারামিটার গ্রহণ করে যা একটি সংখ্যা বা সংখ্যার অ্যারে হতে পারে, যেখানে 0 প্রথম ডেটা সিরিজকে বোঝায় এবং আরও অনেক কিছু। |
ঘটনা
নাম | বর্ণনা | বৈশিষ্ট্য |
---|---|---|
পরিসর পরিবর্তন | জুমের পরিসর পরিবর্তিত হয়েছে। ব্যবহারকারী দৃশ্যমান সময়সীমা পরিবর্তন করার পরে বরখাস্ত করা হয়েছে কিন্তু setVisibleChartRange পদ্ধতিতে কল করার পরে নয়।দ্রষ্টব্য: ইভেন্ট বৈশিষ্ট্যগুলি ব্যবহার না করার পরামর্শ দেওয়া হয়, বরং getVisibleChartRange পদ্ধতিতে কল করে সেগুলি পান৷ |
|
প্রস্তুত | চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে draw পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে | কোনোটিই নয় |
নির্বাচন করুন | যখন ব্যবহারকারী একটি টীকা পতাকা (মার্কার) এ ক্লিক করেন, তখন ডেটা টেবিলের সংশ্লিষ্ট ঘরটি নির্বাচন করা হয়। ভিজ্যুয়ালাইজেশন তারপর এই ইভেন্ট ফায়ার. | কোনোটিই নয় |
দ্রষ্টব্য : নির্দিষ্ট সীমাবদ্ধতার কারণে, আপনি যদি আপনার ব্রাউজারে একটি সার্ভার থেকে (যেমন, "http://www") না হয়ে একটি ফাইল (যেমন, "file://") হিসাবে পৃষ্ঠাটি অ্যাক্সেস করেন তবে ইভেন্টগুলি নিক্ষেপ করা নাও হতে পারে। .
ডেটা নীতি
সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।
মন্তব্য
ফ্ল্যাশ নিরাপত্তা সেটিংসের কারণে, ব্রাউজারে একটি ফাইল অবস্থান থেকে অ্যাক্সেস করার সময় এটি (এবং সমস্ত ফ্ল্যাশ-ভিত্তিক ভিজ্যুয়ালাইজেশন) সঠিকভাবে কাজ নাও করতে পারে (যেমন, ফাইল:///c:/webhost/myhost/myviz.html) থেকে একটি ওয়েব সার্ভার URL (যেমন, http://www.myhost.com/myviz.html)। এটি সাধারণত শুধুমাত্র একটি পরীক্ষার সমস্যা। Macromedia ওয়েব সাইটে বর্ণিত হিসাবে আপনি এই সমস্যাটি কাটিয়ে উঠতে পারেন৷