खास जानकारी
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);
}
आम तौर पर, लीनियर ट्रेंडलाइन, ट्रेंडलाइन होती हैं. हालांकि, कभी-कभी डेटा की जानकारी देने के लिए कर्व सबसे अच्छा होता है. इसके लिए, हमें दूसरी तरह की ट्रेंडलाइन की ज़रूरत होगी.
एक्सपोनेन्शियल ट्रेंडलाइन
अगर आपके डेटा को eax+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>
अपारदर्शिता और लाइन की चौड़ाई बदलना
ट्रेंडलाइन की पारदर्शिता बदलने के लिए, opacity को 0.0 और 1.0 के बीच की वैल्यू और 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,
}
}
जुड़ाव
कोएफ़िशिएंट ऑफ़ डिटरमिनेशन को आंकड़ों में R2 कहा जाता है. इससे पता चलता है कि ट्रेंडलाइन, डेटा से कितनी मिलती-जुलती है. सटीक संबंध 1.0 होता है और बेहतर संबंध 0.0 होता है.
showR2 विकल्प को true पर सेट करके, अपने चार्ट के लेजेंड में R2 को दिखाया जा सकता है.
<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>