खास जानकारी
वैकल्पिक एनोटेशन के साथ इंटरैक्टिव टाइम सीरीज़ लाइन चार्ट.
जानकारी देने वाली टाइमलाइन, अब इसके बजाय जानकारी देने वाले चार्ट का अपने-आप इस्तेमाल करती है.
उदाहरण
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>
अहम जानकारी: इस विज़ुअलाइज़ेशन का इस्तेमाल करने के लिए, आपको अपने पेज पर कंटेनर
एलिमेंट की ऊंचाई और चौड़ाई की जानकारी साफ़ तौर पर देनी होगी. इसलिए, उदाहरण के लिए: <div id="chart_div"
style="width:400; height:250"></div>
.
लोड हो रहा है
google.charts.load
के पैकेज का नाम "annotatedtimeline"
है
google.charts.load("current", {packages: ['annotatedtimeline']});
विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.AnnotatedTimeLine
है
var visualization = new google.visualization.AnnotatedTimeLine(container);
डेटा फ़ॉर्मैट
अपने चार्ट पर एक या उससे ज़्यादा लाइनें दिखाई जा सकती हैं. हर लाइन, चार्ट पर एक X पोज़िशन को दिखाती है. इसका मतलब है कि एक खास समय होता है. हर लाइन में एक से तीन कॉलम के सेट के बारे में बताया जाता है.
- पहला कॉलम
date
याdatetime
टाइप का होता है. इसमें चार्ट पर पॉइंट की X वैल्यू होती है. अगर यह कॉलमdate
टाइप का है (datetime
नहीं) तो X ऐक्सिस पर सबसे कम टाइम रिज़ॉल्यूशन, एक दिन का होगा. - इसके बाद, हर डेटा लाइन को एक या तीन अतिरिक्त कॉलम के सेट की मदद से बताया गया है,
जैसा कि यहां बताया गया है:
- Y वैल्यू - [ज़रूरी है, संख्या] हर सेट के पहले कॉलम में, पहले कॉलम से जुड़े समय के हिसाब से लाइन की वैल्यू की जानकारी दी जाती है. चार्ट पर कॉलम लेबल, उस लाइन के टाइटल के तौर पर दिखता है.
- एनोटेशन का टाइटल - [ज़रूरी नहीं, स्ट्रिंग] अगर कोई स्ट्रिंग कॉलम, वैल्यू वाले कॉलम के बाद आता है और
displayAnnotations
विकल्प सही है, तो इस कॉलम में इस पॉइंट के बारे में बताने वाला छोटा टाइटल होता है. उदाहरण के लिए, अगर यह रेखा ब्राज़ील का तापमान दिखाती है और यह पॉइंट बहुत ज़्यादा संख्या में है, तो शीर्षक "सबसे ज़्यादा गर्म दिन" हो सकता है. - एनोटेशन टेक्स्ट - [वैकल्पिक स्ट्रिंग] अगर इस सीरीज़ के लिए दूसरी स्ट्रिंग
कॉलम मौजूद है, तो इस पॉइंट के लिए सेल की वैल्यू का इस्तेमाल,
ज़्यादा जानकारी देने वाले टेक्स्ट के तौर पर किया जाएगा. इस कॉलम का इस्तेमाल करने के लिए, आपको
displayAnnotations
विकल्प को 'सही' पर सेट करना होगा. अगर आपallowHtml
कोtrue
पर सेट करते हैं, तो एचटीएमएल टैग का इस्तेमाल किया जा सकता है. हालांकि, साइज़ की कोई सीमा नहीं है, लेकिन ध्यान रखें कि बहुत ज़्यादा लंबी एंट्री करने पर, डिसप्ले सेक्शन ओवरफ़्लो हो सकता है. भले ही, आपके पास इस पॉइंट के लिए, जानकारी देने वाले टाइटल का कॉलम हो, फिर भी आपको इस कॉलम को रखने की ज़रूरत नहीं है. चार्ट में कॉलम लेबल का इस्तेमाल नहीं किया जाता. उदाहरण के लिए, अगर रिकॉर्ड पॉइंट पर इस दिन का सबसे गर्म दिन था, तो आप ऐसा कुछ कह सकते हैं, "अगला नज़दीकी दिन 10 डिग्री ठंडा था!".
कॉन्फ़िगरेशन के विकल्प
नाम | टाइप | डिफ़ॉल्ट | ब्यौरा |
---|---|---|---|
allowHtml | boolean | false | अगर नीति को 'सही है' पर सेट किया जाता है, तो एचटीएमएल टैग वाले किसी भी एनोटेशन टेक्स्ट को एचटीएमएल के तौर पर रेंडर किया जाएगा. |
allowRedraw | boolean | false | इस विज़ुअलाइज़ेशन पर दूसरे और बाद के कॉल
|
allValuesSuffix | स्ट्रिंग | कुछ नहीं | स्केल और लेजेंड में सभी वैल्यू में जोड़ने के लिए सफ़िक्स. |
annotationsWidth | नंबर | 25 | एनोटेशन एरिया की चौड़ाई (प्रतिशत में), पूरे चार्ट एरिया के बाहर. 5 से 80 के बीच की कोई संख्या होनी चाहिए. |
कलर | स्ट्रिंग का कलेक्शन | डिफ़ॉल्ट रंग | चार्ट की लाइनों और लेबल के लिए, इस्तेमाल किए जाने वाले रंग. स्ट्रिंग का कलेक्शन. हर एलिमेंट, एक मान्य एचटीएमएल कलर फ़ॉर्मैट में एक स्ट्रिंग होती है. उदाहरण के लिए, 'लाल' या '#00cc00'. |
dateFormat | स्ट्रिंग | पहले कॉलम के टाइप (तारीख या तारीख, दोनों) के आधार पर 'MMMM dd, yyyy' या 'HH:mm MMMM dd, yyyy' का इस्तेमाल किया जा सकता है. | सबसे ऊपर दाएं कोने में तारीख की जानकारी दिखाने के लिए इस्तेमाल किया जाने वाला फ़ॉर्मैट. इस फ़ील्ड का फ़ॉर्मैट java SimpleDateFormat क्लास की ओर से तय किया गया है. |
displayAnnotations | boolean | false | अगर नीति को 'सही है' पर सेट किया जाता है, तो चार्ट चुनी गई वैल्यू के ऊपर एनोटेशन दिखाएगा. अगर यह विकल्प 'सही है' पर सेट है, तो हर संख्या वाले कॉलम के बाद, जानकारी देने वाले दो वैकल्पिक स्ट्रिंग कॉलम जोड़े जा सकते हैं. एक कॉलम, जानकारी के टाइटल के लिए और एक टेक्स्ट के लिए होगा. |
displayAnnotationsFilter | boolean | false | अगर नीति को 'सही है' पर सेट किया जाता है, तो चार्ट में एनोटेशन फ़िल्टर करने के लिए, फ़िल्टर लगाने का विकल्प दिखेगा. बहुत सारे एनोटेशन होने पर इस विकल्प का इस्तेमाल करें. |
displayDateBarSeparator | boolean | सही | क्या सीरीज़ की वैल्यू और लेजेंड में तारीख के बीच, एक छोटा बार सेपरेटर ( | ) दिखाना है, जहां 'सही' का मतलब हां है. |
displayExactValues | boolean | false | क्या जगह बचाने के लिए, ग्राफ़ के ऊपर वैल्यू के छोटे और गोल वर्शन को दिखाना है; गलत का मतलब है कि ऐसा हो सकता है. उदाहरण के लिए, अगर इसे गलत पर सेट किया जाता है, तो 56123.45 को 56.12k के तौर पर दिखाया जा सकता है. |
displayLegendDots | boolean | सही | क्या लेजेंड टेक्स्ट में वैल्यू के बगल में डॉट दिखाने हैं, जहां 'सही' का मतलब हां है. |
displayLegendValues | boolean | सही | क्या लेजेंड में हाइलाइट की गई वैल्यू दिखानी हैं, जहां सही का मतलब हां है. |
displayRangeSelector | boolean | सही | ज़ूम करने के लिए चुनी गई रेंज (चार्ट में सबसे नीचे की जगह) दिखाना है या नहीं, जहां 'गलत' का मतलब नहीं है. ज़ूम चुनने वाले टूल में आउटलाइन, चार्ट की पिछली सीरीज़ का लॉग स्केल वर्शन है. इसे ज़ूम चुनने वाले टूल की ऊंचाई के हिसाब से बढ़ाया जा सकता है. |
displayZoomButtons | boolean | सही | ज़ूम के लिंक दिखाने हैं या नहीं ("1d 5d 1m" वगैरह), जहां गलत का मतलब है नहीं. |
भरें | नंबर | 0 | 0 से 100 तक की संख्या, जो लाइन ग्राफ़ की हर लाइन के नीचे मौजूद फ़िल के ऐल्फ़ा के बारे में बताती है. 100 का मतलब है कि 100% ओपेक फ़िल है. 0 का मतलब है कि कोई फ़िल नहीं है. भरा हुआ रंग वही है जो इसके ऊपर की लाइन का है. |
highlightDot | स्ट्रिंग | 'सबसे नज़दीकी' | सीरीज़ पर किस बिंदु को हाइलाइट करना है और उससे जुड़ी वैल्यू लेजेंड में. इनमें से कोई एक वैल्यू चुनें:
|
legendPosition | स्ट्रिंग | 'समलाइन' | रंगीन लेजेंड को ज़ूम बटन और तारीख ('sameRow') के साथ एक ही पंक्ति में रखना है या नई पंक्ति ('newRow') पर रखना है. |
ज़्यादा से ज़्यादा | नंबर | स्वचालित | Y ऐक्सिस पर दिखाई जाने वाली सबसे बड़ी वैल्यू. अगर डेटा पॉइंट की सबसे बड़ी संख्या
इस वैल्यू से ज़्यादा है, तो इस सेटिंग को अनदेखा कर दिया जाएगा. साथ ही,
चार्ट में इस तरह बदलाव किया जाएगा कि वह सबसे बड़े डेटा पॉइंट के ऊपर, अगला बड़ा सही का निशान दिखाए. इसे
scaleType के तय किए गए ज़्यादा से ज़्यादा Y ऐक्सिस पर प्राथमिकता दी जाएगी. |
कम से कम | नंबर | स्वचालित | Y ऐक्सिस पर दिखाई जाने वाली सबसे कम वैल्यू. अगर सबसे कम डेटा पॉइंट इस वैल्यू से कम है, तो इस सेटिंग को अनदेखा कर दिया जाएगा. साथ ही, कम से कम डेटा पॉइंट के नीचे अगला मुख्य सही का निशान दिखाने के लिए चार्ट में बदलाव किया जाएगा. इसे
scaleType के तय किए गए कम से कम Y ऐक्सिस पर प्राथमिकता दी जाएगी. |
numberFormats | स्ट्रिंग या संख्या का मैप:स्ट्रिंग जोड़े | स्वचालित | ग्राफ़ में सबसे ऊपर मौजूद वैल्यू को फ़ॉर्मैट करने के लिए, इस्तेमाल किए जाने वाले नंबर फ़ॉर्मैट पैटर्न के बारे में बताता है. पैटर्न उस फ़ॉर्मैट में होने चाहिए जैसा java decimalFormat क्लास में बताया गया है.
अगर यह विकल्प चुना गया है, तो |
scaleColumns | नंबर का कलेक्शन | ऑटोमैटिक मोड | इससे पता चलता है कि ग्राफ़ में Y ऐक्सिस के टिक मार्क पर कौनसी वैल्यू दिखानी हैं. डिफ़ॉल्ट तौर पर, दाईं ओर एक स्केल होता है, जो दोनों सीरीज़ पर लागू होता है. हालांकि, ग्राफ़ के अलग-अलग हिस्सों को सीरीज़ की अलग-अलग वैल्यू के हिसाब से स्केल किया जा सकता है. इस विकल्प को स्केल वैल्यू के तौर पर इस्तेमाल करने के लिए, सीरीज़ के शून्य से तीन नंबर वाले इंडेक्स (शून्य-आधारित) इंडेक्स के बारे में बताया जाता है. ये वैल्यू कहां दिखेंगी, यह इस बात पर निर्भर करता है कि आपने अपने कलेक्शन में कितनी वैल्यू शामिल की हैं:
एक से ज़्यादा स्केल दिखाते समय, हमारी सलाह है कि आप |
scaleType | स्ट्रिंग | 'ठीक की गई' | Y ऐक्सिस पर दिखाई गई ज़्यादा से ज़्यादा और कम से कम वैल्यू सेट करता है. ये विकल्प उपलब्ध हैं:
अगर आपने कम से कम और/या सबसे ज़्यादा वैल्यू की जानकारी दी है, तो उन्हें आपके स्केल टाइप के हिसाब से तय की गई, कम से कम और ज़्यादा से ज़्यादा वैल्यू के मुकाबले प्राथमिकता दी जाएगी. |
मोटाई | नंबर | 0 | 0 से 10 तक की संख्या (शामिल है) जो लाइनों की मोटाई दिखाती है. यहां 0 सबसे पतला होता है. |
wmode | स्ट्रिंग | 'विंडो' | फ़्लैश चार्ट के लिए विंडो मोड (wmode) पैरामीटर. उपलब्ध वैल्यू हैं: 'ओपेक', 'विंडो' या 'ट्रांसपैरंट'. |
zoomEndTime | तारीख | कुछ नहीं | चुनी गई ज़ूम सीमा के खत्म होने की तारीख/समय सेट करता है. |
zoomStartTime | तारीख | कुछ नहीं | चुनी गई ज़ूम सीमा के शुरू होने की तारीख/समय सेट करता है. |
तरीके
तरीका | रिटर्न टाइप | ब्यौरा |
---|---|---|
draw(data, options) |
कुछ नहीं | चार्ट बनाता है. preventraw प्रॉपर्टी का इस्तेमाल करके, draw() पर दूसरी बार और बाद में किए जाने वाले कॉल का तेज़ी से जवाब दिया जा सकता है. |
getSelection() |
चुने गए एलिमेंट की कलेक्शन | स्टैंडर्ड getSelection() लागू करना. चुने गए एलिमेंट,
सेल एलिमेंट हैं. उपयोगकर्ता एक बार में सिर्फ़ एक ही सेल चुन सकता है. |
getVisibleChartRange() |
start और end प्रॉपर्टी वाला एक ऑब्जेक्ट |
start और end प्रॉपर्टी वाला कोई ऑब्जेक्ट दिखाता है.
इनमें से हर एक Date ऑब्जेक्ट है,
जो मौजूदा समय को दिखाता है. |
hideDataColumns(columnIndexes) |
कुछ नहीं | चार्ट से बताई गई डेटा सीरीज़ को छिपाता है. एक पैरामीटर स्वीकार किया जाता है जो कोई संख्या या संख्याओं का कलेक्शन हो सकता है, जिसमें 0 पहली डेटा सीरीज़ को दिखाता है वगैरह. |
setVisibleChartRange(start, end) |
कुछ नहीं | दिखाई देने वाली रेंज (ज़ूम) को, तय की गई रेंज पर सेट करता है.
Date टाइप के दो पैरामीटर स्वीकार किए जाते हैं. ये पैरामीटर, चुनी गई चुनी गई रेंज की पहली और आखिरी अवधि दिखाते हैं. सबसे पहली तारीख से लेकर end तक सब कुछ शामिल करने के लिए, start को शून्य पर सेट करें; start से लेकर आखिरी तारीख तक, सब कुछ शामिल करने के लिए end को शून्य पर सेट करें. |
showDataColumns(columnIndexes) |
कुछ नहीं | hideDataColumns तरीके का इस्तेमाल करके, छिपाए जाने के बाद
चार्ट से तय की गई डेटा सीरीज़ दिखाता है.
एक पैरामीटर स्वीकार किया जाता है जो कोई संख्या या संख्याओं का कलेक्शन हो सकता है,
जिसमें 0 पहली डेटा सीरीज़ को दिखाता है वगैरह. |
इवेंट
नाम | ब्यौरा | प्रॉपर्टी |
---|---|---|
रेंज में बदलाव | ज़ूम की रेंज बदली गई. यह सूचना तब ट्रिगर होती है, जब उपयोगकर्ता दिखने वाली समयसीमा में बदलाव करता है,
लेकिन setVisibleChartRange तरीके को कॉल करने के बाद ट्रिगर नहीं होता.ध्यान दें: हमारा सुझाव है कि इवेंट प्रॉपर्टी का इस्तेमाल न करें. इसके बजाय, getVisibleChartRange तरीके को कॉल करके
इवेंट पाएं. |
|
तैयार | यह चार्ट, बाहरी तरीके से कॉल करने के लिए तैयार है. अगर आपको चार्ट के साथ इंटरैक्ट करने के साथ-साथ, उसे ड्रॉ करने के बाद कॉल करने के तरीके की जानकारी देनी है, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना होगा. साथ ही, इवेंट के सक्रिय होने के बाद ही उन्हें कॉल करना होगा |
कोई नहीं |
चुनें | जब कोई उपयोगकर्ता, जानकारी देने वाले किसी फ़्लैग (मार्कर) पर क्लिक करता है, तो डेटा टेबल में उससे जुड़ी सेल चुन ली जाती है. इसके बाद, विज़ुअलाइज़ेशन इस इवेंट को ट्रिगर करता है. | कोई नहीं |
ध्यान दें: कुछ सीमाओं की वजह से, हो सकता है कि इवेंट ट्रिगर न हों. ऐसा तब होता है, जब ब्राउज़र में पेज को फ़ाइल के तौर पर ऐक्सेस किया जा रहा हो (जैसे, "file://") शामिल करें (जैसे कि "http://www").
डेटा नीति
सभी कोड और डेटा को ब्राउज़र में प्रोसेस और रेंडर किया जाता है. किसी भी सर्वर पर कोई भी डेटा नहीं भेजा जाता.
ज़रूरी जानकारी
फ़्लैश सुरक्षा सेटिंग की वजह से, यह (और सभी फ़्लैश-आधारित विज़ुअलाइज़ेशन) किसी वेब सर्वर यूआरएल (जैसे, http://www.myhost.com/myviz.html) के बजाय ब्राउज़र में किसी फ़ाइल स्थान से (जैसे, file:///c:/webhost/myhost/myviz.html) ऐक्सेस करने पर ठीक से काम नहीं कर सकते हैं. आम तौर पर, यह आम तौर पर सिर्फ़ टेस्टिंग से जुड़ी समस्या है. इस समस्या को हल करने के लिए, Macromedia की वेबसाइट पर बताया गया तरीका अपनाएं.