ওভারভিউ
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':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'values');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addRows([
[1, 100, 90, 110, 85, 96, 104, 120],
[2, 120, 95, 130, 90, 113, 124, 140],
[3, 130, 105, 140, 100, 117, 133, 139],
[4, 90, 85, 95, 85, 88, 92, 95],
[5, 70, 74, 63, 67, 69, 70, 72],
[6, 30, 39, 22, 21, 28, 34, 40],
[7, 80, 77, 83, 70, 77, 85, 90],
[8, 100, 90, 110, 85, 95, 102, 110]]);
// The intervals data as narrow lines (useful for showing raw source data)
var options_lines = {
title: 'Line intervals, default',
curveType: 'function',
lineWidth: 4,
intervals: { 'style':'line' },
legend: 'none'
};
var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
chart_lines.draw(data, options_lines);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপরের ডেটাতে, আপনি দেখতে পাচ্ছেন যে আমরা সম্পূরক সিরিজে তিনটি ভিন্ন শনাক্তকারী সংযুক্ত করেছি: i0 , i2 , এবং i3 । আমরা সেই সিরিজগুলোকে ভিন্নভাবে স্টাইল করতে ব্যবহার করতে পারি; নীচে, আমরা তাদের বিভিন্ন রং এবং বেধ দিতে.
দ্রষ্টব্য: সাধারণভাবে, i2 চারবার ব্যবহার করা হয়েছে, যেমনটি আমরা উপরে বলেছি আইডি পুনরায় ব্যবহার করার জন্য এটি খারাপ ফর্ম। এটি কাজ করে, কিন্তু আমরা ভবিষ্যতে এই আচরণ পরিবর্তন করতে পারি।
একমাত্র পার্থক্য হল বিকল্পগুলির মধ্যে:
var options_lines = {
title: 'Line intervals, tailored',
lineWidth: 4,
curveType:'function',
interval: {
'i0': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
'i1': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
'i2': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
},
legend: 'none',
};
বার অন্তর
বার অন্তর আপনার ডেটার চারপাশে ত্রুটি বার তৈরি করে। ব্যবধানের প্রথম এবং শেষ কলামগুলি ডোমেন-অক্ষের সমান্তরাল প্রশস্ত বার হিসাবে আঁকা হয় এবং ভিতরের কলামগুলি ছোট "টিকস" হিসাবে আঁকা হয়। প্রশস্ত বারগুলিতে যোগদানের জন্য একটি "স্টিক" যোগ করা হয় (যদি এই দুটি বারের মান একই থাকে তবে পয়েন্ট সাইজ বিকল্পটি শূন্য না হলে pointSize একটি বিন্দু হিসাবে রেন্ডার করা হয়)।
প্রথম এবং শেষ কলামগুলির সাথে সম্পর্কিত অনুভূমিক বারগুলির প্রস্থ intervals.barWidth দিয়ে নিয়ন্ত্রিত হয়, এবং ভিতরের কলামগুলির সাথে সম্পর্কিত অনুভূমিক বারগুলির প্রস্থ intervals.shortBarWidth দিয়ে নিয়ন্ত্রিত হয়৷ যখন সেগুলি বাদ দেওয়া হয়, আপনি নীচের বিকল্পগুলির সাথে উপরেরটির মতো একটি চার্ট পাবেন:
var options_bars = {
title: 'Bars, default',
curveType: 'function',
series: [{'color': '#D9544C'}],
intervals: { style: 'bars' },
legend: 'none',
};
বক্স অন্তর
বাক্সের ব্যবধানগুলি আপনার ডেটা টেবিলে কলামগুলিকে নেস্টেড আয়তক্ষেত্রগুলির একটি সেট হিসাবে রেন্ডার করে: প্রথম এবং শেষ কলামগুলি বাইরেরতম আয়তক্ষেত্র তৈরি করে এবং ভিতরের কলামগুলি তাদের থাকা বাক্সের মধ্যে গাঢ় আয়তক্ষেত্র হিসাবে রেন্ডার করে৷
বাক্সের ব্যবধানগুলি কীভাবে নির্দিষ্ট করবেন তা এখানে:
var options = {
series: [{'color': '#1A8763'}],
intervals: { style: 'boxes' },
legend: 'none',
};
আপনি intervals.lineWidth এবং intervals.barWidth বিকল্পগুলির সাথে বাক্সগুলিকে আরও বিশিষ্ট করতে পারেন:
প্রাসঙ্গিক বিকল্প:
var options = {
title:'Boxes, thick',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
legend: 'none',
};
স্টিক অন্তর
স্টিক ব্যবধান লক্ষ্য অক্ষের সমান্তরাল স্টিকগুলির একটি সেট হিসাবে কলামের জোড়া প্রদর্শন করে। শূন্য উচ্চতার একটি স্টিক একটি বিন্দু হিসাবে রেন্ডার করা হয়, যা পয়েন্ট সাইজ বিকল্পটিকে pointSize সেট করে দমন করা যেতে পারে।
আপনি 'sticks' style দিয়ে এগুলি তৈরি করতে পারেন:
var options_sticks = {
title:'Sticks, default',
curveType:'function',
series: [{'color': '#E7711B'}],
intervals: { style: 'sticks' },
legend: 'none',
};
বিন্দু অন্তর
পয়েন্ট ব্যবধান ছোট বৃত্ত হিসাবে ব্যবধান ডেটা প্রদর্শন করে:
পয়েন্ট সাইজ intervals.pointSize অপশন দিয়ে নিয়ন্ত্রণ করা যায়। এখানে, এটা 2:
var options_points = {
title:'Points, default',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'style':'points', pointSize: 2 },
legend: 'none',
};
8 এ এটি দেখতে কেমন তা এখানে:
এলাকার ব্যবধান
একটি এলাকা ব্যবধান নেস্টেড ছায়াযুক্ত এলাকার একটি সেট হিসাবে ব্যবধান ডেটা রেন্ডার করে। কলামের জোড়ার নেস্টিং বাক্সের ব্যবধানের মতোই, ব্যতীত একটি জোড় সংখ্যার কলাম প্রয়োজন।
এটি 'area' ক্ষেত্র'-এ style সেট করার মাধ্যমে সম্পন্ন করা হয় :
var options = {
title:'Area, default',
curveType:'function',
series: [{'color': '#F1CA3A'}],
intervals: { 'style':'area' },
legend: 'none',
};
ব্যবধান শৈলী সমন্বয়
আরও বৃহত্তর কাস্টমাইজেশনের জন্য, আপনি একটি চার্টের মধ্যে ব্যবধান শৈলী একত্রিত করতে পারেন।
এখানে একটি চার্ট রয়েছে যা এলাকা এবং বার ব্যবধানকে একত্রিত করে:
উপরের চার্টে, আমরা i0 এবং i1 দিয়ে ট্যাগ করা ব্যবধানের জন্য 'bars' বার'-এর একটি style এবং i2 এর জন্য একটি 'area' শৈলী নির্দিষ্ট করি। তারপরে pointSize ক্যাপ করতে আমরা পয়েন্ট সাইজ ব্যবহার করি:
var options = {
title:'Bar/area interval chart',
curveType:'function',
intervals: { 'color':'series-color' },
interval: {
'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }},
legend: 'none',
};
এখানে i2 ব্যবধান সহ একটি বার অন্তর লাইন চার্ট রয়েছে যা স্টিক হিসাবে উপস্থাপিত হয়েছে:
var options = {
title:'Sticks, horizontal',
curveType:'function',
lineWidth: 4,
series: [{'color': '#E7711B'}],
intervals: { 'lineWidth': 4, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'sticks', 'color':'grey', 'boxWidth': 2.5,
'lineWidth': 1 }
},
legend: 'none',
};
এখানে একটি ব্যবধান লাইন চার্ট যা পটভূমিতে নির্বাচিত ব্যবধান স্থাপন করতে কম অপাসিটি বাক্স ব্যবহার করে:
// Focus is the error bars, but boxes are visible in the background.
var options_boxes_background = {
title:'Background boxes',
curveType:'function',
lineWidth: 4,
series: [{'color': '#1A8763'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 2.5,
'lineWidth': 0, 'fillOpacity': 0.2 }
},
legend: 'none',
};
আমরা একটি boxWidth সহ একটি ব্যবধানের জন্য একটি কম অপাসিটি 'points' শৈলী নির্দিষ্ট করে একটি "পয়েন্ট এবং হুইস্কার্স" ইন্টারভাল চার্ট তৈরি করতে পারি:
var options = {
title:'Points and whiskers',
curveType:'function',
lineWidth: 4,
series: [{'color': '#D3362D'}],
intervals: { 'lineWidth':2, 'barWidth': 0.5 },
interval: {
'i2': { 'style':'points', 'color':'grey', 'pointSize': 10,
'lineWidth': 0, 'fillOpacity': 0.3 }
},
legend: 'none',
};
বক্স চক্রান্ত
অবশেষে, উপরের "পয়েন্ট এবং হুইস্কার্স" চার্টের উপর ভিত্তি করে, আমরা একটি মৌলিক বক্স প্লট চার্ট তৈরি করতে বক্স এবং বার অন্তর ব্যবহার করতে পারি।
var options = {
title:'Box Plot',
height: 500,
legend: {position: 'none'},
hAxis: {
gridlines: {color: '#fff'}
},
lineWidth: 0,
series: [{'color': '#D3362D'}],
intervals: {
barWidth: 1,
boxWidth: 1,
lineWidth: 2,
style: 'boxes'
},
interval: {
max: {
style: 'bars',
fillOpacity: 1,
color: '#777'
},
min: {
style: 'bars',
fillOpacity: 1,
color: '#777'
}
}
};
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBoxPlot);
function drawBoxPlot() {
var array = [
['a', 100, 90, 110, 85, 96, 104, 120],
['b', 120, 95, 130, 90, 113, 124, 140],
['c', 130, 105, 140, 100, 117, 133, 139],
['d', 90, 85, 95, 85, 88, 92, 95],
['e', 70, 74, 63, 67, 69, 70, 72],
['f', 30, 39, 22, 21, 28, 34, 40],
['g', 80, 77, 83, 70, 77, 85, 90],
['h', 100, 90, 110, 85, 95, 102, 110]
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'series0');
data.addColumn('number', 'series1');
data.addColumn('number', 'series2');
data.addColumn('number', 'series3');
data.addColumn('number', 'series4');
data.addColumn('number', 'series5');
data.addColumn('number', 'series6');
data.addColumn({id:'max', type:'number', role:'interval'});
data.addColumn({id:'min', type:'number', role:'interval'});
data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
data.addColumn({id:'median', type:'number', role:'interval'});
data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});
data.addRows(getBoxPlotValues(array));
/**
* Takes an array of input data and returns an
* array of the input data with the box plot
* interval data appended to each row.
*/
function getBoxPlotValues(array) {
for (var i = 0; i < array.length; i++) {
var arr = array[i].slice(1).sort(function (a, b) {
return a - b;
});
var max = arr[arr.length - 1];
var min = arr[0];
var median = getMedian(arr);
// First Quartile is the median from lowest to overall median.
var firstQuartile = getMedian(arr.slice(0, 4));
// Third Quartile is the median from the overall median to the highest.
var thirdQuartile = getMedian(arr.slice(3));
array[i][8] = max;
array[i][9] = min
array[i][10] = firstQuartile;
array[i][11] = median;
array[i][12] = thirdQuartile;
}
return array;
}
/*
* Takes an array and returns
* the median value.
*/
function getMedian(array) {
var length = array.length;
/* If the array is an even length the
* median is the average of the two
* middle-most values. Otherwise the
* median is the middle-most value.
*/
if (length % 2 === 0) {
var midUpper = length / 2;
var midLower = midUpper - 1;
return (array[midUpper] + array[midLower]) / 2;
} else {
return array[Math.floor(length / 2)];
}
}
var options = {
title:'Box Plot',
height: 500,
legend: {position: 'none'},
hAxis: {
gridlines: {color: '#fff'}
},
lineWidth: 0,
series: [{'color': '#D3362D'}],
intervals: {
barWidth: 1,
boxWidth: 1,
lineWidth: 2,
style: 'boxes'
},
interval: {
max: {
style: 'bars',
fillOpacity: 1,
color: '#777'
},
min: {
style: 'bars',
fillOpacity: 1,
color: '#777'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('box_plot'));
chart.draw(data, options);
}