खास जानकारी
Google चार्ट तीन प्रकार की ट्रेंडलाइन का समर्थन करता है: लीनियर, पॉलीनोमियल, और एक्सपोनेन्शियल.
लीनियर ट्रेंडलाइन
नीचे दिए गए चार्ट में, आप स्कैटर चार्ट पर एक लीनियर ट्रेंडलाइन देख सकते हैं, जिसमें चीनी मेपल की आयु की तुलना उनके डिक्की के व्यास से की गई है. Google Trends के आधार पर गणित का समीकरण देखने के लिए, आप ट्रेंडलाइन पर माउस घुमा सकते हैं: 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 एट्रिब्यूट से बदला जा सकता है.
यहां हम, कंप्यूटेशनल तरीके से फल देने वाले समय के दौरान, साल के हिसाब से PV के कितने अंकों का हिसाब लगाते हैं, यह चार्ट दिखाते हैं. इसमें घातांकी ट्रेंडलाइन का रंग हरा होता है.
यह रही ट्रेंडलाइन की जानकारी:
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>