खास जानकारी
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',
};
आठ बजे यह कैसा दिखता है:
एरिया इंटरवल
क्षेत्र का इंटरवल, नेस्ट किए गए क्षेत्र के सेट के तौर पर इंटरवल डेटा रेंडर करता है. कॉलम के जोड़ों को नेस्ट करना, बॉक्स इंटरवल की तरह ही होता है, सिवाय इसके कि कॉलम की संख्या बराबर होने की ज़रूरत होती है.
ऐसा करने के लिए, style को 'area' पर सेट करें:
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);
}