खास जानकारी
सनकी डायग्राम, एक ऐसा विज़ुअलाइज़ेशन है जिसका इस्तेमाल वैल्यू के एक सेट से दूसरे सेट पर फ़्लो को दिखाने के लिए किया जाता है. कनेक्ट हो रही चीज़ों को नोड कहा जाता है और कनेक्शन को लिंक कहा जाता है. साकी का सबसे अच्छा इस्तेमाल तब होता है, जब आप दो डोमेन (उदाहरण के लिए, विश्वविद्यालय या मेजर) या कई चरणों के बीच कई पाथ दिखाना चाहते हैं. उदाहरण के लिए Google Analytics, सैनकी का इस्तेमाल करके दिखाता है कि ट्रैफ़िक आपकी वेबसाइट के दूसरे पेजों पर कैसे जाता है.
इन सवालों के जवाब देने के लिए, इन लोगों के नाम कप्तान सैनकी के नाम पर रखा गया. कैप्टन ने भाप इंजन की क्षमता का डायग्राम बनाया. इसमें, गर्मी के नुकसान के बराबर अनुपात वाले ऐरो का इस्तेमाल किया गया था.
ध्यान दें: आने वाले समय में Google चार्ट के रिलीज़ में सैनकी चार्ट में काफ़ी बदलाव किए जा सकते हैं.
साकी डायग्राम, SVG या VML का इस्तेमाल करके, ब्राउज़र में रेंडर किए जाते हैं. इनमें से जो भी उपयोगकर्ता के ब्राउज़र के लिए सही हो. Google का सैनकी लेआउट कोड, D3 के सैनकी लेआउट कोड से लिया जाता है.
ध्यान दें: Google सैनकी चार्ट, Microsoft Internet Explorer 8 और उससे पहले के वर्शन में उपलब्ध नहीं हैं.
एक आसान उदाहरण
मान लें कि आपके पास दो कैटगरी A और B हैं, जो तीन अन्य कैटगरी X, Y, और Z से कनेक्ट होती हैं. उनमें से कुछ कनेक्शन दूसरों की तुलना में ज़्यादा भारी हैं. उदाहरण के लिए, B का X से पतला कनेक्शन है और Y का बहुत गहरा कनेक्शन है.
कनेक्शन को हाइलाइट करने के लिए, किसी एक लिंक पर कर्सर घुमाएं.
संकी चार्ट बनाने के लिए, पंक्तियों का एक सेट दें. इसमें एक कनेक्शन के बारे में जानकारी होनी चाहिए. जैसे, भेजने वाला, पाने वाला, और वज़न. इसके बाद, चार्ट शुरू करने के लिए google.visualization.Sankey() मैथड का इस्तेमाल करें. इसके बाद, इसे रेंडर करने के लिए draw() का तरीका इस्तेमाल करें:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'A', 'X', 5 ],
[ 'A', 'Y', 7 ],
[ 'A', 'Z', 6 ],
[ 'B', 'X', 2 ],
[ 'B', 'Y', 9 ],
[ 'B', 'Z', 4 ]
]);
// Sets chart options.
var options = {
width: 600,
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="sankey_basic" style="width: 900px; height: 300px;"></div>
</body>
</html>
ध्यान दें: अपने डेटा में अलग-अलग साइकल बनाने से बचें: अगर खुद को किसी A से लिंक किया जाता है या B से किसी ऐसी वेबसाइट पर ले जाया जाता है जो C को A से भी जोड़ती है, तो आपका चार्ट उसे रेंडर नहीं करेगा.
मल्टीलेवल सैनकी
कई लेवल के कनेक्शन की मदद से, संकी चार्ट बनाया जा सकता है:
सैनकी चार्ट ज़रूरत के मुताबिक और लेवल जोड़ देंगे, जो उन्हें अपने-आप डाल देंगे. यहां ऊपर दिए गए चार्ट का पूरा कोड दिया गया है:
<html>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>
<script type="text/javascript">
google.charts.load("current", {packages:["sankey"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
[ 'Brazil', 'Portugal', 5 ],
[ 'Brazil', 'France', 1 ],
[ 'Brazil', 'Spain', 1 ],
[ 'Brazil', 'England', 1 ],
[ 'Canada', 'Portugal', 1 ],
[ 'Canada', 'France', 5 ],
[ 'Canada', 'England', 1 ],
[ 'Mexico', 'Portugal', 1 ],
[ 'Mexico', 'France', 1 ],
[ 'Mexico', 'Spain', 5 ],
[ 'Mexico', 'England', 1 ],
[ 'USA', 'Portugal', 1 ],
[ 'USA', 'France', 1 ],
[ 'USA', 'Spain', 1 ],
[ 'USA', 'England', 5 ],
[ 'Portugal', 'Angola', 2 ],
[ 'Portugal', 'Senegal', 1 ],
[ 'Portugal', 'Morocco', 1 ],
[ 'Portugal', 'South Africa', 3 ],
[ 'France', 'Angola', 1 ],
[ 'France', 'Senegal', 3 ],
[ 'France', 'Mali', 3 ],
[ 'France', 'Morocco', 3 ],
[ 'France', 'South Africa', 1 ],
[ 'Spain', 'Senegal', 1 ],
[ 'Spain', 'Morocco', 3 ],
[ 'Spain', 'South Africa', 1 ],
[ 'England', 'Angola', 1 ],
[ 'England', 'Senegal', 1 ],
[ 'England', 'Morocco', 2 ],
[ 'England', 'South Africa', 7 ],
[ 'South Africa', 'China', 5 ],
[ 'South Africa', 'India', 1 ],
[ 'South Africa', 'Japan', 3 ],
[ 'Angola', 'China', 5 ],
[ 'Angola', 'India', 1 ],
[ 'Angola', 'Japan', 3 ],
[ 'Senegal', 'China', 5 ],
[ 'Senegal', 'India', 1 ],
[ 'Senegal', 'Japan', 3 ],
[ 'Mali', 'China', 5 ],
[ 'Mali', 'India', 1 ],
[ 'Mali', 'Japan', 3 ],
[ 'Morocco', 'China', 5 ],
[ 'Morocco', 'India', 1 ],
[ 'Morocco', 'Japan', 3 ]
]);
// Set chart options
var options = {
width: 600,
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple'));
chart.draw(data, options);
}
</script>
</body>
</html>
रंगों को कंट्रोल करना
साकी चार्ट में, नोड और
लिंक के लिए पसंद के मुताबिक रंग सेट करने की सुविधा होती है. नोड और लिंक, दोनों को दिए गए colors विकल्पों (sankey.node.colors और sankey.link.colors) का इस्तेमाल करके, अपनी पसंद के मुताबिक रंग पटल बनाए जा सकते हैं. colorMode
विकल्प का इस्तेमाल करके, इन्हें अलग-अलग रंग के मोड भी दिए जा सकते हैं.
अगर रंग कस्टमाइज़ नहीं किए गए हैं, तो वे डिफ़ॉल्ट रूप से मानक सामग्री पटल में बदल जाते हैं.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
'#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
var options = {
height: 400,
sankey: {
node: {
colors: colors
},
link: {
colorMode: 'gradient',
colors: colors
}
}
};
कॉन्फ़िगरेशन के विकल्पों की मदद से, लिंक, नोड, और लेबल के रंग को कंट्रोल किया जा सकता है. यहां, एक ही रंग की तीन इमेज चुनी जाती हैं, और इनमें अलग-अलग चमक होती है:
यहां बताया गया है कि वे विकल्प कैसे दिखते हैं:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae' } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
आप sankey.link.color.fillOpacity विकल्प से लिंक की पारदर्शिता भी नियंत्रित कर सकते हैं:
var options = {
width: 600,
sankey: {
link: { color: { fill: '#d799ae', fillOpacity: 0.8 } },
node: { colors: [ '#a61d4c' ],
label: { color: '#871b47' } },
}
};
लिंक के चारों ओर बॉर्डर बनाने के लिए, sankey.link.color.strokeऔर sankey.link.color.strokeWidth विकल्पों का इस्तेमाल करें:
स्ट्रोक के रंग को आरजीबी फ़ॉर्मैट में या अंग्रेज़ी के नाम के हिसाब से बताया जा सकता है.
var options = {
width: 750,
height: 400,
sankey: {
node: { colors: [ '#a61d4c' ] },
link: { color: { stroke: 'black', strokeWidth: 1 } },
}
};
लेबल को पसंद के मुताबिक बनाना
सैन्की चार्ट के टेक्स्ट को sankey.node.label.fontName और मित्रों का उपयोग करके कस्टमाइज़ किया जा सकता है:
यहां ऊपर दिए गए चार्ट के लिए विकल्प तैयार किया गया है:
var options = {
width: 600,
sankey: {
node: { label: { fontName: 'Times-Roman',
fontSize: 14,
color: '#871b47',
bold: true,
italic: true } } },
};
sankey.node.labelPadding विकल्प का इस्तेमाल करके, नोड से मिलते-जुलते लेबल की जगह बदली जा सकती है:
ऊपर दिए गए चार्ट में, हमने लेबल और नोड के बीच 30 पिक्सल की पैडिंग (जगह) जोड़ी है.
var options = {
width: 600,
sankey: { node: { labelPadding: 30 } },
};
नोड में बदलाव करना
sankey.node.width की मदद से नोड की चौड़ाई को कंट्रोल किया जा सकता है.
ऊपर, हम नोड की चौड़ाई 2 पर सेट करते हैं.
var options = {
width: 600,
sankey: { node: { width: 2 } },
};
sankey.node.nodePadding के ज़रिए, आप नोड के बीच की दूरी में बदलाव कर सकते हैं:
ऊपर दिए गए चार्ट में, हमने sankey.node.nodePadding को 80 पर सेट किया है.
var options = {
width: 900,
sankey: { node: { nodePadding: 80 } },
};
लोड हो रहा है
google.charts.load पैकेज का नाम "sankey" है:
google.charts.load("current" {packages: ["sankey"]});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.Sankey है:
var visualization = new google.visualization.Sankey(container);
डेटा फ़ॉर्मैट
पंक्तियां: टेबल की हर पंक्ति दो लेबल के बीच का कनेक्शन दिखाती है. तीसरा कॉलम उस कनेक्शन की मज़बूती दिखाता है और इसे लेबल के बीच पाथ की चौड़ाई में दिखाया जाएगा.
कॉलम:
| कॉलम 0 | स्तंभ 1 | दूसरा कॉलम | ... | कॉलम N (ज़रूरी नहीं) | |
|---|---|---|---|---|---|
| मकसद: | सोर्स | डेस्टिनेशन | वैल्यू | ... | वैकल्पिक भूमिकाएं |
| डेटा टाइप: | स्ट्रिंग | स्ट्रिंग | नंबर | ... | |
| भूमिका: | डोमेन | डोमेन | डेटा | ... | |
| कॉलम की वैकल्पिक भूमिकाएं: | कोई नहीं |
कोई नहीं |
कोई नहीं |
... |
कॉन्फ़िगरेशन के विकल्प
| नाम | |
|---|---|
| forceIFrame |
चार्ट को इनलाइन फ़्रेम में बनाता है. (ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा कर दिया जाता है; सभी IE8 चार्ट, i-frame में खींचे जाते हैं.) टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
| ऊंचाई |
चार्ट की लंबाई, पिक्सल में. टाइप: नंबर
डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
|
| sankey.itations |
कई लेवल की सैनकी के साथ, कभी-कभी यह साफ़ तौर पर नहीं पता चलता कि नोड को पढ़ने में आसानी हो सकती है या नहीं. D3 लेआउट इंजन प्रयोग, अलग-अलग नोड लेआउट के साथ तब काम करता है, जब टाइप: पूर्णांक
डिफ़ॉल्ट: 32
|
| sankey.link |
नोड के बीच मौजूद कनेक्शन की विशेषताएं कंट्रोल करता है. फ़िलहाल, सभी एट्रिब्यूट रंग से जुड़े हैं:
sankey: {
link: {
color: {
fill: '#efd', // Color of the link.
fillOpacity: 0.8, // Transparency of the link.
stroke: 'black', // Color of the link border.
strokeWidth: 1 // Thickness of the link border (default 0).
},
colors: [
'#a6cee3', // Custom color palette for sankey links.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving the links for that node the color.
'#33a02c'
]
}
}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
| sankey.link.colorMode |
नोड के बीच मौजूद लिंक के लिए कलरिंग मोड सेट करता है. जितनी तरह के साइटमैप हो सकते हैं उनकी जानकारी यहां दी गई है:
यह विकल्प, sankey.link.color को बदल देता है. टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'कोई नहीं'
|
| sankey.node |
नोड के एट्रिब्यूट को कंट्रोल करता है (लिंक के बीच मौजूद वर्टिकल बार):
sankey: {
node: {
label: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#000',
bold: true,
italic: false
},
interactivity: true, // Allows you to select nodes.
labelPadding: 6, // Horizontal distance between the label and the node.
nodePadding: 10, // Vertical distance between nodes.
width: 5, // Thickness of the node.
colors: [
'#a6cee3', // Custom color palette for sankey nodes.
'#1f78b4', // Nodes will cycle through this palette
'#b2df8a', // giving each node its own color.
'#33a02c'
]
}
}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
| sankey.node.colorMode |
सांकी नोड के लिए कलरिंग मोड सेट करता है. जितनी तरह के साइटमैप हो सकते हैं उनकी जानकारी यहां दी गई है:
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'यूनीक'
|
| टूलटिप |
अलग-अलग टूलटिप एलिमेंट को कॉन्फ़िगर करने के लिए, सदस्यों के साथ एक ऑब्जेक्ट. इस ऑब्जेक्ट की प्रॉपर्टी बताने के लिए, आप ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल कर सकते हैं, जैसा कि यहां दिखाया गया है: {textStyle: {color: '#FF0000'}, showColorCode: true}
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
| टूलटिप.isHtml |
अगर सही पर सेट है, तो एचटीएमएल-रेंडर किया गया (SVG-रेंडर किया गया) टूल टूलटिप का इस्तेमाल न करें. ज़्यादा जानकारी के लिए, टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाना देखें. ध्यान दें: टूलटिप कॉलम की डेटा भूमिका की मदद से एचटीएमएल टूलटिप कॉन्टेंट को पसंद के मुताबिक बनाने की सुविधा, बबल चार्ट विज़ुअलाइज़ेशन के साथ काम नहीं करती है. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
| टूलटिप.टेक्स्ट स्टाइल |
टूलटिप टेक्स्ट की स्टाइल के बारे में बताने वाला ऑब्जेक्ट. ऑब्जेक्ट का फ़ॉर्मैट ऐसा है:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
टाइप: ऑब्जेक्ट
डिफ़ॉल्ट:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| width |
चार्ट की चौड़ाई पिक्सल में है. टाइप: नंबर
डिफ़ॉल्ट: शामिल किए गए एलिमेंट की चौड़ाई
|
तरीका
| तरीका | |
|---|---|
draw(data, options) |
चार्ट ड्रॉ करता है. चार्ट, लौटाने का तरीका: कोई नहीं
|
getBoundingBox(id) |
चार्ट एलिमेंट की बाईं, सबसे ऊपर, चौड़ाई, और ऊंचाई वाले ऑब्जेक्ट को दिखाता है.
वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. चार्ट ड्रॉ किए जाने के बाद, इसे कॉल करें. सामान लौटाने का टाइप: ऑब्जेक्ट
|
getSelection() |
इससे, चार्ट की चुनी गई इकाइयों का ऐरे मिलता है.
चुनने लायक इकाइयां हैं बार, लेजेंड एंट्री और कैटगरी.
इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई चुनी जा सकती है.
लौटाए जाने का तरीका: चुने गए एलिमेंट की कैटगरी
|
setSelection() |
चार्ट की खास इकाइयों को चुनता है. पिछला कोई भी चुनाव रद्द कर देता है.
चुनने लायक इकाइयां हैं बार, लेजेंड एंट्री और कैटगरी.
इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई चुनी जा सकती है.
लौटाने का तरीका: कोई नहीं
|
clearChart() |
चार्ट साफ़ करता है और इससे मिलने वाले सभी संसाधनों को रिलीज़ करता है. लौटाने का तरीका: कोई नहीं
|
इवेंट
| नाम | |
|---|---|
error |
तब सक्रिय होता है, जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है. प्रॉपर्टी: आईडी, मैसेज
|
onmouseover |
तब सक्रिय होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर माउस ले जाता है. इससे, डेटा टेबल के एलिमेंट की लाइन और कॉलम के इंडेक्स दिखते हैं. बार, डेटा टेबल के किसी सेल से जुड़ा होता है. साथ ही, यह कॉलम (पंक्ति इंडेक्स शून्य होता है) में मौजूद किसी कैटगरी और पंक्ति की कैटगरी (कॉलम इंडेक्स शून्य होता है) के बारे में बताता है. प्रॉपर्टी: पंक्ति, कॉलम
|
onmouseout |
तब सक्रिय होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई से दूर जाता है. इससे, डेटा टेबल के एलिमेंट की लाइन और कॉलम के इंडेक्स दिखते हैं. बार, डेटा टेबल के किसी सेल से जुड़ा होता है. साथ ही, यह कॉलम (पंक्ति इंडेक्स शून्य होता है) में मौजूद किसी कैटगरी और पंक्ति की कैटगरी (कॉलम इंडेक्स शून्य होता है) के बारे में बताता है. प्रॉपर्टी: पंक्ति, कॉलम
|
ready |
यह चार्ट, बाहरी मेथड कॉल के लिए तैयार है. अगर चार्ट बनाने के बाद, आप चार्ट के साथ इंटरैक्ट करना और कॉल करने के तरीके इस्तेमाल करना चाहते हैं, तो आपको प्रॉपर्टी: कोई नहीं
|
select |
तब सक्रिय होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. जो चुना गया है उसे जानने के लिए, प्रॉपर्टी: कोई नहीं
|
डेटा की नीति
सभी कोड और डेटा, ब्राउज़र में प्रोसेस और रेंडर किए जाते हैं. किसी भी सर्वर पर कोई डेटा नहीं भेजा जाता है.