ওভারভিউ
ক
Google চার্ট তিন ধরনের ট্রেন্ডলাইন সমর্থন করে: রৈখিক, বহুপদী এবং সূচকীয়।
লিনিয়ার ট্রেন্ডলাইন
ক
নীচের চার্টে, আপনি একটি স্ক্যাটার চার্টে একটি রৈখিক প্রবণতা দেখতে পারেন যা চিনির ম্যাপেলের বয়সের সাথে তাদের কাণ্ডের ব্যাসের সাথে তুলনা করে। Google চার্ট দ্বারা গণনা করা সমীকরণটি দেখতে আপনি ট্রেন্ডলাইনের উপরে ঘুরতে পারেন: ব্যাসের 4.885 গুণ + 0.730।
একটি চার্টে একটি ট্রেন্ডলাইন আঁকতে, trendlines বিকল্পটি ব্যবহার করুন এবং কোন ডেটা সিরিজ ব্যবহার করবেন তা নির্দিষ্ট করুন:
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Diameter', 'Age'],
[8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);
var options = {
title: 'Age of sugar maples vs. trunk diameter, in inches',
hAxis: {title: 'Diameter'},
vAxis: {title: 'Age'},
legend: 'none',
trendlines: { 0: {} } // Draw a trendline for data series 0.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
লিনিয়ার ট্রেন্ডলাইন হল সবচেয়ে সাধারণ ধরনের ট্রেন্ডলাইন। কিন্তু কখনও কখনও একটি বক্ররেখা ডেটা বর্ণনা করার জন্য সর্বোত্তম, এবং এর জন্য, আমাদের অন্য ধরনের ট্রেন্ডলাইনের প্রয়োজন হবে।
সূচকীয় প্রবণতা
আপনার ডেটা যদি e ax+b ফর্মের একটি সূচক দ্বারা সবচেয়ে ভালোভাবে ব্যাখ্যা করা হয়, তাহলে আপনি একটি নির্দিষ্ট করতে type অ্যাট্রিবিউট ব্যবহার করতে পারেন
দ্রষ্টব্য: লিনিয়ার ট্রেন্ডলাইনগুলির বিপরীতে, সূচকীয় প্রবণতা গণনা করার বিভিন্ন উপায় রয়েছে৷ আমরা এই মুহূর্তে শুধুমাত্র একটি পদ্ধতি প্রদান করি, কিন্তু ভবিষ্যতে আরও সমর্থন করব, এবং তাই এটি সম্ভব যে বর্তমান সূচকীয় ট্রেন্ডলাইনের নাম বা আচরণ পরিবর্তন হবে।
এই চার্টের জন্য, আমরা কিংবদন্তীতে সূচকীয় বক্ররেখা প্রদর্শন করতে visibleInLegend: true ব্যবহার করি।
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Generation', 'Descendants'],
[0, 1], [1, 33], [2, 269], [3, 2013]
]);
var options = {
title: 'Descendants by Generation',
hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
trendlines: {
0: {
type: 'exponential',
visibleInLegend: true,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
রং বদলাচ্ছে
ডিফল্টরূপে, ট্রেন্ডলাইনগুলি ডেটা সিরিজের মতোই রঙিন, তবে হালকা। আপনি color বৈশিষ্ট্য সঙ্গে এটি ওভাররাইড করতে পারেন. এখানে, আমরা একটি গণনাগতভাবে ফলপ্রসূ সময়কালে π-এর কতগুলি সংখ্যা গণনা করা হয়েছে, সূচকীয় প্রবণতাকে সবুজ রঙে রঞ্জিত করি।
এখানে ট্রেন্ডলাইন স্পেসিফিকেশন আছে:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
বহুপদী ট্রেন্ডলাইন
একটি বহুপদী ট্রেন্ডলাইন তৈরি করতে, polynomial এবং একটি degree টাইপ করুন। সতর্কতার সাথে ব্যবহার করুন, কারণ তারা কখনও কখনও বিভ্রান্তিকর ফলাফলের দিকে নিয়ে যেতে পারে। নীচের উদাহরণে, যেখানে একটি মোটামুটি রৈখিক ডেটাসেট একটি ঘন (ডিগ্রী 3) ট্রেন্ডলাইনের সাথে প্লট করা হয়েছে:
মনে রাখবেন যে শেষ ডেটা পয়েন্টের পরে প্লামেট শুধুমাত্র দৃশ্যমান কারণ আমরা কৃত্রিমভাবে অনুভূমিক অক্ষকে 15-এ প্রসারিত করেছি। hAxis.maxValue 15-এ সেট না করে, এটি এইরকম দেখাত:
একই ডেটা, একই বহুপদী, ডেটাতে ভিন্ন উইন্ডো।
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: "both", orientation: "both" },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
<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 = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: 'both', orientation: 'both' },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
</body>
</html>
অস্বচ্ছতা এবং লাইন প্রস্থ পরিবর্তন
আপনি 0.0 এবং 1.0 এর মধ্যে একটি মান opacity সেট করে এবং লাইন প্রস্থ বিকল্পটি সেট করে লাইনের প্রস্থ সেট করে lineWidth স্বচ্ছতা পরিবর্তন করতে পারেন।
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
lineWidth বিকল্পটি বেশিরভাগ ব্যবহারের জন্য যথেষ্ট হবে, তবে আপনি যদি চেহারাটি পছন্দ করেন তবে একটি pointSize বিকল্প রয়েছে যা ট্রেন্ডলাইনের ভিতরে নির্বাচনযোগ্য বিন্দুগুলির আকার কাস্টমাইজ করতে ব্যবহার করা যেতে পারে:
যেমন আলো একটি তরঙ্গ এবং একটি কণা উভয়ই, একটি প্রবণতা একটি লাইন এবং বিন্দুর একটি গুচ্ছ উভয়ই। ব্যবহারকারীরা যা দেখেন তা নির্ভর করে তারা কীভাবে এটির সাথে ইন্টারঅ্যাক্ট করে: সাধারণত একটি লাইন, কিন্তু যখন তারা ট্রেন্ডলাইনের উপর ঘোরায়, তখন একটি নির্দিষ্ট বিন্দু হাইলাইট করা হবে। সেই বিন্দুটির ব্যাস সমান হবে:
- ট্রেন্ডলাইন
pointSizeযদি সংজ্ঞায়িত করা হয়, অন্যথায়... - গ্লোবাল
pointSizeযদি সংজ্ঞায়িত করা হয়, অন্যথায়... - 7
যাইহোক, যদি আপনি গ্লোবাল বা ট্রেন্ডলাইন পয়েন্ট সাইজ বিকল্পটি সেট করেন, তাহলে ট্রেন্ডলাইনের pointSize থেকে স্বাধীনভাবে সমস্ত নির্বাচনযোগ্য পয়েন্ট দেখানো lineWidth ।
var options = {
legend: 'none',
hAxis: { ticks: [] },
vAxis: { ticks: [] },
pointShape: 'diamond',
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
}
};
<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 = google.visualization.arrayToDataTable([
['X', 'Y'],
[0, 4],
[1, 2],
[2, 4],
[3, 6],
[4, 4]
]);
var options = {
legend: 'none',
hAxis: { ticks: [] },
vAxis: { ticks: [] },
colors: ['#703583'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
</body>
</html>
পয়েন্ট দৃশ্যমান করা
চার্টে একগুচ্ছ ডট স্ট্যাম্পিং করে ট্রেন্ডলাইন তৈরি করা হয়। ট্রেন্ডলাইনের pointsVisible বিকল্পটি নির্দিষ্ট ট্রেন্ডলাইনের পয়েন্টগুলি দৃশ্যমান কিনা তা নির্ধারণ করে। সমস্ত ট্রেন্ডলাইনের জন্য ডিফল্ট বিকল্পটি true , কিন্তু আপনি যদি আপনার প্রথম ট্রেন্ডলাইনের জন্য পয়েন্ট দৃশ্যমানতা বন্ধ করতে চান, তাহলে সেট করুন trendlines.0.pointsVisible: false ।
নীচের চার্টটি প্রতি ট্রেন্ডলাইনের ভিত্তিতে পয়েন্টগুলির দৃশ্যমানতা নিয়ন্ত্রণ করে।
var options = {
height: 500,
legend: 'none',
colors: ['#9575cd', '#33ac71'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'exponential',
pointSize: 20,
opacity: 0.6,
pointsVisible: false
},
1: {
type: 'linear',
pointSize: 10,
pointsVisible: true
}
}
};
<html>
<head>
<meta charset="utf-8"/>
<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 = google.visualization.arrayToDataTable([
['X', 'Y', 'Z'],
[0, 4, 5],
[1, 2, 6],
[2, 4, 8],
[3, 6, 10],
[4, 4, 11],
[5, 8, 13],
[6, 12, 15],
[7, 15, 19],
[8, 25, 21],
[9, 34, 23],
[10, 50, 27]
]);
var options = {
height: 500,
legend: 'none',
colors: ['#9575cd', '#33ac71'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'exponential',
pointSize: 20,
opacity: 0.6,
pointsVisible: false
},
1: {
type: 'linear',
pointSize: 10,
pointsVisible: true
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
লেবেল পরিবর্তন
ডিফল্টরূপে, আপনি visibleInLegend নির্বাচন করলে, লেবেলটি ট্রেন্ডলাইনের সমীকরণ প্রকাশ করে। আপনি একটি ভিন্ন লেবেল নির্দিষ্ট করতে labelInLegend ব্যবহার করতে পারেন। এখানে, আমরা দুটি সিরিজের প্রতিটির জন্য একটি ট্রেন্ডলাইন প্রদর্শন করি, লিজেন্ডের লেবেলগুলিকে "বাগ লাইন" (সিরিজ 0 এর জন্য) এবং "টেস্ট লাইন" (সিরিজ 1) এ সেট করি।
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
পারস্পরিক সম্পর্ক
সংকল্পের সহগ , পরিসংখ্যানে R 2 বলা হয়, একটি ট্রেন্ডলাইন ডেটার সাথে কতটা ঘনিষ্ঠভাবে মেলে তা চিহ্নিত করে। একটি নিখুঁত পারস্পরিক সম্পর্ক হল 1.0, এবং একটি নিখুঁত পারস্পরিক সম্পর্ক হল 0.0।
আপনি showR2 বিকল্পটিকে true সেট করে আপনার চার্টের কিংবদন্তীতে R 2 চিত্রিত করতে পারেন।
<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 = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
hAxis: {minValue: 0, maxValue: 15},
vAxis: {minValue: 0, maxValue: 15},
chartArea: {width:'50%'},
trendlines: {
0: {
type: 'linear',
showR2: true,
visibleInLegend: true
}
}
};
var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
chartLinear.draw(data, options);
options.trendlines[0].type = 'exponential';
options.colors = ['#6F9654'];
var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
chartExponential.draw(data, options);
}
</script>
</head>
<body>
<div id="chartLinear" style="height: 350px; width: 800px"></div>
<div id="chartExponential" style="height: 350px; width: 800px"></div>
</body>
</html>