ওভারভিউ
একটি Gantt চার্ট হল এক ধরণের চার্ট যা একটি প্রকল্পের তার উপাদান কার্যগুলির মধ্যে ভাঙ্গনকে চিত্রিত করে। Google Gantt চার্টগুলি একটি প্রকল্পের মধ্যে কাজগুলির শুরু, সমাপ্তি এবং সময়কাল, সেইসাথে একটি টাস্ক থাকতে পারে এমন কোনো নির্ভরতাকে চিত্রিত করে। Google Gantt চার্ট SVG ব্যবহার করে ব্রাউজারে রেন্ডার করা হয়। সমস্ত Google চার্টের মত, ব্যবহারকারী যখন ডেটার উপর ঘোরায় তখন গ্যান্ট চার্ট টুলটিপগুলি প্রদর্শন করে।
দ্রষ্টব্য: Gantt চার্ট ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণে কাজ করবে না । (IE8 এবং পূর্ববর্তী সংস্করণগুলি SVG সমর্থন করে না, যা গ্যান্ট চার্টের প্রয়োজন।)
একটি সহজ উদাহরণ
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
কোন নির্ভরতা নেই
কোনো নির্ভরতা নেই এমন একটি Gantt চার্ট তৈরি করতে, নিশ্চিত করুন যে আপনার DataTable-এর প্রতিটি সারির শেষ মানটি null এ সেট করা আছে।
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
গ্রুপিং সংস্থান
যে কাজগুলো একই প্রকৃতির সেগুলোকে সম্পদ ব্যবহার করে একত্রিত করা যেতে পারে। আপনার ডেটাতে টাইপ string একটি কলাম যোগ করুন ( Task ID এবং Task Name কলামের পরে), এবং নিশ্চিত করুন যে কোনও কাজ যেগুলিকে একটি সংস্থানে গোষ্ঠীভুক্ত করা উচিত তাদের একই সংস্থান আইডি রয়েছে৷ সম্পদ রঙ দ্বারা গোষ্ঠীবদ্ধ করা হবে.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources', null,
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper', 'write',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography', 'write',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper', 'complete',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper', 'write',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
কম্পিউটিং শুরু/শেষ/সময়কাল
গ্যান্ট চার্ট টাস্কের সময়কাল সম্পর্কিত তিনটি মান গ্রহণ করে: একটি শুরুর তারিখ, একটি শেষের তারিখ এবং একটি সময়কাল (মিলিসেকেন্ডে)। যদি, উদাহরণস্বরূপ, কোন শুরুর তারিখ না থাকে, চার্ট শেষ তারিখ এবং সময়কালের উপর ভিত্তি করে অনুপস্থিত সময় গণনা করতে পারে। শেষ তারিখ গণনার জন্য একই যায়। যদি শুরু এবং শেষের তারিখ উভয়ই দেওয়া হয়, তাহলে উভয়ের মধ্যে সময়কাল গণনা করা যেতে পারে।
Gantt বিভিন্ন পরিস্থিতিতে শুরু, শেষ এবং সময়কালের উপস্থিতি কীভাবে পরিচালনা করে তার একটি তালিকার জন্য নীচের টেবিলটি দেখুন।
| শুরু করুন | শেষ | সময়কাল | ফলাফল |
|---|---|---|---|
| বর্তমান | বর্তমান | বর্তমান | সময়কাল শুরু/শেষ সময়ের সাথে সামঞ্জস্যপূর্ণ কিনা তা পরীক্ষা করুন। অসামঞ্জস্যপূর্ণ হলে ত্রুটি নিক্ষেপ. |
| বর্তমান | বর্তমান | শূন্য | শুরু এবং শেষ সময় থেকে সময়কাল গণনা করে। |
| বর্তমান | শূন্য | বর্তমান | শেষ সময় গণনা. |
| বর্তমান | শূন্য | শূন্য | সময়কাল বা শেষ সময় গণনা করতে অক্ষম হিসাবে ত্রুটি নিক্ষেপ করে। |
| শূন্য | বর্তমান | বর্তমান | গণনা শুরুর সময়। |
| শূন্য | শূন্য | বর্তমান | নির্ভরতার উপর ভিত্তি করে শুরুর সময় গণনা করে। defaultStartDate এর সাথে একত্রে, শুধুমাত্র সময়কাল ব্যবহার করে চার্ট আঁকতে সক্ষম করে। |
| শূন্য | বর্তমান | শূন্য | শুরুর সময় বা সময়কাল গণনা করতে অক্ষম হিসাবে ত্রুটি নিক্ষেপ করে। |
| শূন্য | শূন্য | শূন্য | শুরুর সময়, শেষ সময়, বা সময়কাল গণনা করতে অক্ষম হিসাবে ত্রুটি নিক্ষেপ করে। |
উপরেরটি মাথায় রেখে, আপনি প্রতিটি কাজের সময়কাল ব্যবহার করে কাজ করার জন্য একটি সাধারণ যাতায়াতের জন্য একটি চার্ট তৈরি করতে পারেন।
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", { packages: ["gantt"] });
google.charts.setOnLoadCallback(drawChart);
function toMilliseconds(minutes) {
return minutes * 60 * 1000;
}
function drawChart() {
var otherData = new google.visualization.DataTable();
otherData.addColumn("string", "Task ID");
otherData.addColumn("string", "Task Name");
otherData.addColumn("string", "Resource");
otherData.addColumn("date", "Start");
otherData.addColumn("date", "End");
otherData.addColumn("number", "Duration");
otherData.addColumn("number", "Percent Complete");
otherData.addColumn("string", "Dependencies");
otherData.addRows([
[
"toTrain",
"Walk to train stop",
"walk",
null,
null,
toMilliseconds(5),
100,
null,
],
[
"music",
"Listen to music",
"music",
null,
null,
toMilliseconds(70),
100,
null,
],
[
"wait",
"Wait for train",
"wait",
null,
null,
toMilliseconds(10),
100,
"toTrain",
],
[
"train",
"Train ride",
"train",
null,
null,
toMilliseconds(45),
75,
"wait",
],
[
"toWork",
"Walk to work",
"walk",
null,
null,
toMilliseconds(10),
0,
"train",
],
[
"work",
"Sit down at desk",
null,
null,
null,
toMilliseconds(2),
0,
"toWork",
],
]);
var options = {
height: 275,
gantt: {
defaultStartDate: new Date(2015, 3, 28),
},
};
var chart = new google.visualization.Gantt(
document.getElementById("chart_div")
);
chart.draw(otherData, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
জটিল পথ
একটি গ্যান্ট চার্টের সমালোচনামূলক পথ হল পাথ বা পাথ, যা সরাসরি সমাপ্তির তারিখকে প্রভাবিত করে। Google Gantt চার্টের সমালোচনামূলক পথটি ডিফল্টভাবে লাল রঙের হয়, এবং criticalPathStyle বিকল্পগুলি ব্যবহার করে কাস্টমাইজ করা যেতে পারে। এছাড়াও আপনি criticalPathEnabled কে false সেট করে সমালোচনামূলক পথটি বন্ধ করতে পারেন।
var options = {
height: 275,
gantt: {
criticalPathEnabled: true,
criticalPathStyle: {
stroke: '#e64a19',
strokeWidth: 5
}
}
};
স্টাইলিং তীর
আপনি gantt.arrow বিকল্পের সাহায্যে কাজের মধ্যে নির্ভরতা তীর স্টাইল করতে পারেন:
var options = {
height: 275,
gantt: {
criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
arrow: {
angle: 100,
width: 5,
color: 'green',
radius: 0
}
}
};
স্টাইলিং ট্র্যাক
গ্রিড স্টাইলিং innerGridHorizLine , innerGridTrack , এবং innerGridDarkTrack এর সংমিশ্রণ দ্বারা পরিচালিত হয়। শুধুমাত্র innerGridTrack সেট করার মাধ্যমে, চার্ট innerGridDarkTrack-এর জন্য একটি গাঢ় রঙ গণনা করবে, কিন্তু শুধুমাত্র innerGridDarkTrack সেট করার innerGridDarkTrack , innerGridTrack তার ডিফল্ট রঙ ব্যবহার করবে এবং একটি হালকা রঙ গণনা করবে না।
var options = {
height: 275,
gantt: {
criticalPathEnabled: false,
innerGridHorizLine: {
stroke: '#ffe0b2',
strokeWidth: 2
},
innerGridTrack: {fill: '#fff3e0'},
innerGridDarkTrack: {fill: '#ffcc80'}
}
};
লোড হচ্ছে
google.charts.load প্যাকেজের নাম "gantt" ।
google.charts.load("current", {packages: ["gantt"]});
ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.visualization.Gantt ।
var chart = new google.visualization.Gantt(container);
উপাত্ত বিন্যাস
সারি: টেবিলের প্রতিটি সারি একটি টাস্ক প্রতিনিধিত্ব করে।
কলাম:
| কলাম 0 | কলাম 1 | কলাম 2 | কলাম 3 | কলাম 4 | কলাম 5 | কলাম 6 | কলাম 7 | |
|---|---|---|---|---|---|---|---|---|
| উদ্দেশ্য: | টাস্ক আইডি | টাস্কের নাম | রিসোর্স আইডি (ঐচ্ছিক) | শুরু করুন | শেষ | সময়কাল (মিলিসেকেন্ডে) | শতকরা সম্পূর্ণ | নির্ভরতা |
| ডেটা টাইপ: | স্ট্রিং | স্ট্রিং | স্ট্রিং | তারিখ | তারিখ | সংখ্যা | সংখ্যা | স্ট্রিং |
| ভূমিকা: | ডোমেইন | তথ্য | তথ্য | তথ্য | তথ্য | তথ্য | তথ্য | তথ্য |
কনফিগারেশন অপশন
| নাম | টাইপ | ডিফল্ট | বর্ণনা |
|---|---|---|---|
| backgroundColor.fill | স্ট্রিং | 'সাদা' | চার্ট ফিল কালার, একটি HTML কালার স্ট্রিং হিসেবে। |
| gantt.তীর | বস্তু | শূন্য | Gantt চার্টের জন্য, gantt.arrow তীর সংযোগকারী কাজগুলির বিভিন্ন বৈশিষ্ট্য নিয়ন্ত্রণ করে। |
| gantt.arrow.angle | সংখ্যা | 45 | তীরের মাথার কোণ। |
| gantt.arrow.color | স্ট্রিং | '#000' | তীরের রঙ। |
| gantt.arrow.length | সংখ্যা | 8 | তীরের মাথার দৈর্ঘ্য। |
| gantt.arrow.radius | সংখ্যা | 15 | দুটি কাজের মধ্যে তীরের বক্ররেখা নির্ধারণের ব্যাসার্ধ। |
| gantt.arrow.spaceAfter | সংখ্যা | 4 | একটি তীরের মাথা এবং এটি যে টাস্কটি নির্দেশ করে তার মধ্যে হোয়াইটস্পেসের পরিমাণ৷ |
| gantt.arrow.width | সংখ্যা | 1.4 | তীরের প্রস্থ। |
| gantt.barCornerRadius | সংখ্যা | 2 | একটি বারের কোণগুলির বক্ররেখা সংজ্ঞায়িত করার জন্য ব্যাসার্ধ। |
| gantt.barHeight | সংখ্যা | শূন্য | কাজের জন্য বারগুলির উচ্চতা। |
| gantt.criticalPathEnabled | বুলিয়ান | সত্য | যদি true হয় সমালোচনামূলক পথের কোনো তীর ভিন্নভাবে স্টাইল করা হবে। |
| gantt.criticalPathStyle | বস্তু | শূন্য | যেকোন সমালোচনামূলক পথ তীরগুলির জন্য শৈলী ধারণকারী একটি বস্তু। |
| gantt.criticalPathStyle.stroke | স্ট্রিং | শূন্য | যেকোন জটিল পথের তীরগুলির রঙ। |
| gantt.criticalPathStyle.strokeWidth | সংখ্যা | 1.4 | যেকোন জটিল পাথ তীরের পুরুত্ব। |
| gantt.defaultStartDate | তারিখ/সংখ্যা | শূন্য | যদি ডেটা টেবিলের মানগুলি থেকে শুরুর তারিখ গণনা করা না যায়, তাহলে শুরুর তারিখটি এতে সেট করা হবে। একটি date মান ( new Date(YYYY, M, D) ) বা একটি সংখ্যা গ্রহণ করে, যা ব্যবহার করার জন্য মিলিসেকেন্ডের সংখ্যা৷ |
| gantt.innerGridHorizLine | বস্তু | শূন্য | অভ্যন্তরীণ অনুভূমিক গ্রিড লাইনের শৈলী সংজ্ঞায়িত করে। |
| gantt.innerGridHorizLine.stroke | স্ট্রিং | শূন্য | অভ্যন্তরীণ অনুভূমিক গ্রিড লাইনের রঙ। |
| gantt.innerGridHorizLine.strokeWidth | সংখ্যা | 1 | অভ্যন্তরীণ অনুভূমিক গ্রিড লাইনের প্রস্থ। |
| gantt.innerGridTrack.fill | স্ট্রিং | শূন্য | অভ্যন্তরীণ গ্রিড ট্র্যাকের ভরাট রঙ। যদি কোনো innerGridDarkTrack.fill নির্দিষ্ট করা না থাকে, তাহলে এটি প্রতিটি গ্রিড ট্র্যাকে প্রয়োগ করা হবে। |
| gantt.innerGridDarkTrack.fill | স্ট্রিং | শূন্য | বিকল্প, গাঢ় ভেতরের গ্রিড ট্র্যাকের ভরাট রঙ। |
| gantt.labelMaxWidth | সংখ্যা | 300 | প্রতিটি টাস্ক লেবেলের জন্য অনুমোদিত স্থানের সর্বোচ্চ পরিমাণ। |
| gantt.labelStyle | বস্তু | শূন্য | টাস্ক লেবেলের শৈলী ধারণকারী একটি বস্তু।
labelStyle: {
fontName: Roboto2,
fontSize: 14,
color: '#757575'
},
|
| gantt.percentEnabled | বুলিয়ান | সত্য | টাস্কের জন্য সম্পূর্ণ শতাংশের উপর ভিত্তি করে টাস্ক বার পূরণ করে। |
| gantt.percentStyle.fill | স্ট্রিং | শূন্য | একটি টাস্ক বারের সম্পূর্ণ অংশের শতাংশের রঙ। |
| gantt.shadow সক্ষম | বুলিয়ান | সত্য | true হিসাবে সেট করা হলে, প্রতিটি টাস্ক বারের নীচে একটি ছায়া আঁকে যার নির্ভরতা রয়েছে। |
| gantt.shadowcolor | স্ট্রিং | '#000' | নির্ভরশীলতা আছে এমন যেকোনো টাস্ক বারের অধীনে ছায়ার রঙ নির্ধারণ করে। |
| gantt.shadowOffset | সংখ্যা | 1 | নির্ভরতা আছে এমন যেকোন টাস্ক বারের অধীনে ছায়াগুলির অফসেট, পিক্সেলে সংজ্ঞায়িত করে। |
| gantt.sortTasks | বুলিয়ান | সত্য | নির্দিষ্ট করে যে কাজগুলি টপোলজিক্যালভাবে সাজানো উচিত, যদি সত্য হয়; অন্যথায় ডেটা টেবিলের সংশ্লিষ্ট সারিগুলির মতো একই ক্রম ব্যবহার করুন। |
| gantt.trackHeight | সংখ্যা | শূন্য | ট্র্যাক উচ্চতা. |
| প্রস্থ | সংখ্যা | ধারণকারী উপাদানের প্রস্থ | চার্টের প্রস্থ, পিক্সেলে। |
| উচ্চতা | সংখ্যা | ধারণকারী উপাদানের উচ্চতা | চার্টের উচ্চতা, পিক্সেলে। |
পদ্ধতি
| পদ্ধতি | বর্ণনা |
|---|---|
draw(data, options) | চার্ট আঁকে। রিটার্ন টাইপ: কোনোটিই নয় |
getSelection() | নির্বাচিত চার্ট সত্তাগুলির একটি অ্যারে প্রদান করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। এই চার্টের জন্য, যে কোনো মুহূর্তে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। রিটার্ন টাইপ: নির্বাচন উপাদানের অ্যারে |
setSelection() | নির্দিষ্ট চার্ট সত্তা নির্বাচন করে। আগের যেকোনো নির্বাচন বাতিল করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। এই চার্টের জন্য, একবারে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। রিটার্ন টাইপ: কোনোটিই নয় |
clearChart() | চার্টটি সাফ করে এবং এর সমস্ত বরাদ্দকৃত সংস্থান প্রকাশ করে। রিটার্ন টাইপ: কোনোটিই নয় |
ঘটনা
| ঘটনা | বর্ণনা |
|---|---|
click | ব্যবহারকারী চার্টের ভিতরে ক্লিক করলে বহিস্কার হয়। শিরোনাম, ডেটা উপাদান, কিংবদন্তি এন্ট্রি, অক্ষ, গ্রিডলাইন বা লেবেলগুলি ক্লিক করা হলে সনাক্ত করতে ব্যবহার করা যেতে পারে। বৈশিষ্ট্য: টার্গেটআইডি |
error | চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়। বৈশিষ্ট্য: আইডি, বার্তা |
ready | চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে বৈশিষ্ট্য: কোনোটিই নয় |
select | ব্যবহারকারী একটি ভিজ্যুয়াল সত্তা ক্লিক করলে বহিস্কার করা হয়। কি নির্বাচন করা হয়েছে তা জানতে, বৈশিষ্ট্য: কোনোটিই নয় |
ডেটা নীতি
সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।