खास जानकारी
एनोटेशन चार्ट, इंटरैक्टिव टाइम सीरीज़ लाइन चार्ट होते हैं. इन पर एनोटेशन काम करते हैं. ध्यान दें कि एनोटेट की गई टाइमलाइन अब अपने-आप एनोटेशन चार्ट का इस्तेमाल करती है.
भ्रम की चेतावनी: फ़िलहाल, Google एनोटेशन चार्ट उन एनोटेशन से अलग है जो 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':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
लोड हो रहा है
google.charts.load
पैकेज का नाम "annotationchart"
है.
google.charts.load("current", {packages: ['annotationchart']});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.AnnotationChart
है.
var visualization = new google.visualization.AnnotationChart(container);
डेटा फ़ॉर्मैट
अपने चार्ट पर एक या उससे ज़्यादा लाइनें दिखाई जा सकती हैं. हर लाइन, चार्ट पर एक X पोज़िशन दिखाती है. इसका मतलब है कि हर लाइन में एक से तीन कॉलम के सेट के ज़रिए जानकारी दी जाती है.
- पहला कॉलम
date
याdatetime
टाइप का होता है. इसमें चार्ट पर पॉइंट की X वैल्यू होती है. अगर यह कॉलमdate
टाइप का है (datetime
नहीं) तो X ऐक्सिस पर सबसे कम टाइम रिज़ॉल्यूशन, एक दिन का होगा. - इसके बाद, हर डेटा लाइन को एक या तीन अतिरिक्त कॉलम के सेट की मदद से बताया गया है,
जैसा कि यहां बताया गया है:
- Y वैल्यू - [ज़रूरी है, संख्या] हर सेट के पहले कॉलम में, पहले कॉलम से जुड़े समय के हिसाब से लाइन की वैल्यू की जानकारी दी जाती है. चार्ट पर कॉलम लेबल, उस लाइन के टाइटल के तौर पर दिखता है.
- एनोटेशन का टाइटल - [ज़रूरी नहीं, स्ट्रिंग] अगर कोई स्ट्रिंग कॉलम, वैल्यू वाले कॉलम के बाद आता है और
displayAnnotations
विकल्प सही है, तो इस कॉलम में इस पॉइंट के बारे में बताने वाला छोटा टाइटल होता है. उदाहरण के लिए, अगर यह रेखा ब्राज़ील का तापमान दिखाती है और यह पॉइंट बहुत ज़्यादा संख्या में है, तो शीर्षक "सबसे ज़्यादा गर्म दिन" हो सकता है. - एनोटेशन टेक्स्ट - [वैकल्पिक स्ट्रिंग] अगर इस सीरीज़ के लिए दूसरी स्ट्रिंग
कॉलम मौजूद है, तो इस पॉइंट के लिए सेल की वैल्यू का इस्तेमाल,
ज़्यादा जानकारी देने वाले टेक्स्ट के तौर पर किया जाएगा. इस कॉलम का इस्तेमाल करने के लिए, आपको
displayAnnotations
विकल्प को 'सही' पर सेट करना होगा. अगर आपallowHtml
कोtrue
पर सेट करते हैं, तो एचटीएमएल टैग का इस्तेमाल किया जा सकता है. हालांकि, साइज़ की कोई सीमा नहीं है, लेकिन ध्यान रखें कि बहुत ज़्यादा लंबी एंट्री करने पर, डिसप्ले सेक्शन ओवरफ़्लो हो सकता है. भले ही, आपके पास इस पॉइंट के लिए, जानकारी देने वाले टाइटल का कॉलम हो, फिर भी आपको इस कॉलम को रखने की ज़रूरत नहीं है. चार्ट में कॉलम लेबल का इस्तेमाल नहीं किया जाता. उदाहरण के लिए, अगर रिकॉर्ड पॉइंट पर इस दिन का सबसे गर्म दिन था, तो आप ऐसा कुछ कह सकते हैं, "अगला नज़दीकी दिन 10 डिग्री ठंडा था!".
कॉन्फ़िगरेशन के विकल्प
नाम | |
---|---|
allowHtml |
अगर नीति को 'सही है' पर सेट किया जाता है, तो एचटीएमएल टैग वाले किसी भी एनोटेशन टेक्स्ट को एचटीएमएल के तौर पर रेंडर किया जाएगा. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
allValuesSuffix |
लेजेंड की सभी वैल्यू में सफ़िक्स और वर्टिकल ऐक्सिस में सही के निशान वाले लेबल को जोड़ना. Type: स्ट्रिंग
डिफ़ॉल्ट: कोई नहीं
|
annotationsWidth |
एनोटेशन एरिया की चौड़ाई (प्रतिशत में), पूरे चार्ट एरिया के बाहर. 5 से 80 के बीच की कोई संख्या होनी चाहिए. टाइप: नंबर
डिफ़ॉल्ट: 25
|
कलर |
चार्ट की लाइनों और लेबल के लिए, इस्तेमाल किए जाने वाले रंग. स्ट्रिंग का कलेक्शन. हर एलिमेंट एक ऐसी स्ट्रिंग है जो मान्य एचटीएमएल कलर फ़ॉर्मैट में होती है. उदाहरण के लिए, 'लाल' या '#00cc00'. टाइप: स्ट्रिंग की कलेक्शन
डिफ़ॉल्ट: डिफ़ॉल्ट रंग
|
dateFormat |
सबसे ऊपर दाएं कोने में तारीख की जानकारी दिखाने के लिए इस्तेमाल किया जाने वाला फ़ॉर्मैट. इस फ़ील्ड का फ़ॉर्मैट java SimpleDateFormat क्लास के मुताबिक तय किया जाता है. Type: स्ट्रिंग
डिफ़ॉल्ट:
पहले कॉलम के टाइप (तारीख या तारीख, दोनों) के आधार पर 'MMMM dd, yyyy' या 'HH:mm MMMM dd, yyyy' विकल्प का इस्तेमाल किया जा सकता है.
|
displayAnnotations |
अगर इसे 'गलत है' पर सेट किया जाता है, तो चार्ट, एनोटेशन टेबल को छिपा देगा. साथ ही, एनोटेशन और एनोटेशन टेक्स्ट नहीं दिखेगा. अगर आपके डेटा में कोई भी एनोटेशन नहीं है, तो एनोटेशन टेबल नहीं दिखेगी. भले ही, यह विकल्प कुछ भी हो. अगर इस विकल्प को 'सही है' पर सेट किया जाता है, तो हर संख्या वाले कॉलम के बाद, दो वैकल्पिक स्ट्रिंग कॉलम जोड़े जा सकते हैं. एक जानकारी के टाइटल के लिए और दूसरा टेक्स्ट के लिए. टाइप: बूलियन
डिफ़ॉल्ट: सही
|
displayAnnotationsFilter |
अगर नीति को 'सही है' पर सेट किया जाता है, तो चार्ट में एनोटेशन फ़िल्टर करने के लिए, फ़िल्टर कंट्रोल दिखेगा. इस विकल्प का इस्तेमाल तब करें, जब बहुत सारे एनोटेशन हों. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
displayDateBarSeparator |
अगर सीरीज़ की वैल्यू और लेजेंड में तारीख के बीच, एक छोटा बार सेपरेटर ( | ) दिखाना है, जहां 'सही' का मतलब हां है. टाइप: बूलियन
डिफ़ॉल्ट: सही
|
displayExactValues |
क्या जगह बचाने के लिए, ग्राफ़ में सबसे ऊपर वैल्यू का छोटा और गोल वर्शन दिखाना है; गलत होने का मतलब है कि ऐसा हो सकता है. उदाहरण के लिए, अगर वैल्यू को गलत पर सेट किया जाता है, तो 56123.45 को 56.12k के तौर पर दिखाया जा सकता है. टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
displayLegendDots |
क्या लेजेंड टेक्स्ट में वैल्यू के बगल में डॉट दिखाने हैं, जहां 'सही' का मतलब हां है. टाइप: बूलियन
डिफ़ॉल्ट: सही
|
displayLegendValues |
क्या लेजेंड में हाइलाइट की गई वैल्यू दिखानी हैं, जहां सही का मतलब हां है. टाइप: बूलियन
डिफ़ॉल्ट: सही
|
displayRangeSelector |
ज़ूम करने के लिए चुनी गई रेंज (चार्ट में सबसे नीचे मौजूद एरिया) दिखाना है या नहीं, जहां 'गलत' का मतलब 'नहीं' है. ज़ूम चुनने वाले टूल में आउटलाइन, चार्ट की पहली सीरीज़ का लॉग स्केल वर्शन है. इसका साइज़, ज़ूम चुनने वाले टूल की ऊंचाई के हिसाब से बढ़ाया जा सकता है. टाइप: बूलियन
डिफ़ॉल्ट: सही
|
displayZoomButtons |
ज़ूम बटन दिखाना है या नहीं ("1d 5d 1m" वगैरह), जहां गलत का मतलब नहीं है. टाइप: बूलियन
डिफ़ॉल्ट: सही
|
भरें |
0 से 100 तक की संख्या, जो लाइन ग्राफ़ की हर लाइन के नीचे मौजूद फ़िल के ऐल्फ़ा के बारे में बताती है. 100 का मतलब है कि 100% ओपेक है और 0 का मतलब है कि कोई फ़िल नहीं है. भरा हुआ रंग वही है जो इसके ऊपर की लाइन का है. टाइप: नंबर
डिफ़ॉल्ट: 0
|
legendPosition |
रंगीन लेजेंड को ज़ूम बटन और तारीख ('sameRow') के साथ एक ही पंक्ति में रखना है या नई पंक्ति ('newRow') पर रखना है. Type: स्ट्रिंग
डिफ़ॉल्ट: 'sameRow'
|
ज़्यादा से ज़्यादा |
Y ऐक्सिस पर दिखाई जाने वाली सबसे बड़ी वैल्यू. अगर डेटा पॉइंट की सबसे बड़ी संख्या इस वैल्यू से ज़्यादा है, तो इस
सेटिंग को अनदेखा कर दिया जाएगा. साथ ही, चार्ट में इस तरह बदलाव किया जाएगा कि वह सबसे बड़े डेटा पॉइंट के ऊपर, अगला बड़ा सही का निशान दिखाए. इसे यह कोर चार्ट में मौजूद टाइप: नंबर
डिफ़ॉल्ट: अपने-आप
|
कम से कम |
Y ऐक्सिस पर दिखाई जाने वाली सबसे कम वैल्यू. अगर सबसे कम डेटा पॉइंट इस वैल्यू से कम है, तो इस सेटिंग को अनदेखा कर दिया जाएगा. साथ ही, कम से कम डेटा पॉइंट के नीचे अगला बड़ा सही का निशान दिखाने के लिए, चार्ट में बदलाव किया जाएगा. इसे यह कोर चार्ट में मौजूद टाइप: नंबर
डिफ़ॉल्ट: अपने-आप
|
numberFormats |
ग्राफ़ पर सबसे ऊपर मौजूद वैल्यू को फ़ॉर्मैट करने के लिए, इस्तेमाल किए जाने वाले नंबर फ़ॉर्मैट के पैटर्न के बारे में बताता है. पैटर्न, उसी फ़ॉर्मैट में होने चाहिए जो java डाला गया फ़ॉर्मैट क्लास में बताया गया है.
अगर यह विकल्प चुना गया है, तो टाइप: स्ट्रिंग या संख्या:स्ट्रिंग पेयर का मैप
डिफ़ॉल्ट: अपने-आप
|
scaleColumns |
इससे पता चलता है कि ग्राफ़ में Y ऐक्सिस के टिक मार्क पर कौनसी वैल्यू दिखानी हैं. डिफ़ॉल्ट तौर पर, दाईं ओर एक स्केल मौजूद होता है, जो दोनों सीरीज़ पर लागू होता है. हालांकि, ग्राफ़ के अलग-अलग हिस्सों को सीरीज़ की अलग-अलग वैल्यू के हिसाब से स्केल किया जा सकता है. इस विकल्प को स्केल वैल्यू के तौर पर इस्तेमाल करने के लिए, कलेक्शन की शून्य से तीन संख्याओं की रेंज लेनी होती है. इस तरह, सीरीज़ के इंडेक्स (शून्य पर आधारित) इंडेक्स को तय किया जाता है. ये वैल्यू कहां दिखेंगी, यह इस बात पर निर्भर करता है कि आपने अपने कलेक्शन में कितनी वैल्यू शामिल की हैं:
एक से ज़्यादा स्केल दिखाते समय, हमारी सलाह है कि टाइप: संख्याओं की कलेक्शन
डिफ़ॉल्ट: अपने-आप
|
scaleFormat |
ऐक्सिस टिक लेबल के लिए, इस्तेमाल किया जाने वाला नंबर फ़ॉर्मैट. Type: स्ट्रिंग
डिफ़ॉल्ट: '#'
|
scaleType |
Y ऐक्सिस पर दिखाई गई ज़्यादा से ज़्यादा और कम से कम वैल्यू सेट करता है. ये विकल्प उपलब्ध हैं:
अगर आपने कम से कम और/या सबसे ज़्यादा वैल्यू की जानकारी दी है, तो आपके स्केल टाइप के हिसाब से तय की गई, सबसे कम और ज़्यादा से ज़्यादा वैल्यू के मुकाबले, उन्हें प्राथमिकता दी जाएगी. Type: स्ट्रिंग
डिफ़ॉल्ट: 'ठीक है'
|
मेज़ |
इसमें एनोटेशन टेबल से जुड़े विकल्प शामिल होते हैं. इस ऑब्जेक्ट की प्रॉपर्टी के बारे में बताने के लिए, ऑब्जेक्ट लिटरल नोटेशन का इस्तेमाल किया जा सकता है: var options: { table: { sortAscending: true, sortColumn: 1 } }; Type: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
|
table.sortAscending |
अगर इसे टाइप: बूलियन
डिफ़ॉल्ट: गलत
|
table.sortColumn |
एनोटेशन टेबल की कॉलम इंडेक्स, जिसके लिए एनोटेशन क्रम से लगाए जाएंगे. जानकारी देने वाले लेबल के कॉलम के लिए, इंडेक्स 0 होना चाहिए या जानकारी देने वाले टेक्स्ट कॉलम के लिए इंडेक्स 1 होना चाहिए. टाइप: नंबर
डिफ़ॉल्ट: 0
|
मोटाई |
0 से 10 तक की संख्या (शामिल है), लाइनों की मोटाई तय करती है, जहां 0 सबसे पतला होता है. टाइप: नंबर
डिफ़ॉल्ट: 0
|
zoomEndTime |
चुनी गई ज़ूम सीमा के खत्म होने की तारीख/समय सेट करता है. टाइप: तारीख
डिफ़ॉल्ट: कोई नहीं
|
zoomStartTime |
चुनी गई ज़ूम सीमा के शुरू होने की तारीख/समय सेट करता है. टाइप: तारीख
डिफ़ॉल्ट: कोई नहीं
|
तरीके
तरीका | |
---|---|
clearChart() |
चार्ट को हटा देता है और उसके लिए तय किए गए सभी संसाधनों को रिलीज़ करता है. सामान लौटाने का तरीका: कोई नहीं
|
draw(data, options, state) |
चार्ट बनाता है. सामान लौटाने का तरीका: कोई नहीं
|
getContainer() |
यह, जानकारी वाले चार्ट वाले कंटेनर एलिमेंट का हैंडल हासिल करता है. रिटर्न टाइप: डीओएम एलिमेंट को हैंडल करना
|
getSelection() |
स्टैंडर्ड रिटर्न टाइप: चुने गए एलिमेंट की कलेक्शन
|
getVisibleChartRange() |
रिटर्न टाइप:
start और end प्रॉपर्टी वाला एक ऑब्जेक्ट
|
hideDataColumns(columnIndexes) |
चार्ट से बताई गई डेटा सीरीज़ को छिपाता है. एक पैरामीटर स्वीकार किया जाता है जो कोई संख्या या संख्याओं का कलेक्शन हो सकता है, जिसमें 0 पहली डेटा सीरीज़ को दिखाता है वगैरह. सामान लौटाने का तरीका: कोई नहीं
|
setVisibleChartRange(start, end) |
दिखाई देने वाली रेंज (ज़ूम) को, तय की गई रेंज पर सेट करता है. सामान लौटाने का तरीका: कोई नहीं
|
showDataColumns(columnIndexes) |
सामान लौटाने का तरीका: कोई नहीं
|
इवेंट
नाम | |
---|---|
rangechange |
तब ट्रिगर होता है, जब उपयोगकर्ता रेंज स्लाइडर में बदलाव करता है. नई रेंज के एंडपॉइंट,
google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } प्रॉपर्टी: शुरू, खत्म
|
ready |
यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट के साथ इंटरैक्ट करने और कॉल के तरीकों को ड्रॉ करने के बाद, उन्हें ड्रॉ करना है, तो प्रॉपर्टी: कोई प्रॉपर्टी नहीं
|
select |
तब ट्रिगर होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. चुनी गई जानकारी के बारे में जानने के लिए, प्रॉपर्टी: कोई प्रॉपर्टी नहीं
|
डेटा नीति
सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.