एनोटेटेड टाइमलाइन

खास जानकारी

वैकल्पिक एनोटेशन वाला इंटरैक्टिव टाइम सीरीज़ लाइन चार्ट.

एनोटेट की गई टाइमलाइन में अब, एनोटेशन चार्ट अपने-आप इस्तेमाल होते हैं.

उदाहरण

<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 डिग्री कूलर था!" जैसा कुछ कह सकते हैं.

कॉन्फ़िगरेशन के विकल्प

नाम टाइप डिफ़ॉल्ट जानकारी
अनुमति है, एचटीएमएल बूलियन false अगर इस नीति को 'सही है' पर सेट किया जाता है, तो एचटीएमएल टैग वाले एनोटेशन टेक्स्ट को एचटीएमएल के तौर पर रेंडर किया जाएगा.
CANNOT TRANSLATE बूलियन false

इस विज़ुअलाइज़ेशन पर draw() को दूसरे और बाद के कॉल के लिए ज़्यादा असरदार रीड्रॉ तकनीक चालू करता है. यह सिर्फ़ चार्ट के एरिया को फिर से दिखाता है. इस विकल्प का इस्तेमाल करने के लिए, आपको नीचे दी गई ज़रूरी शर्तें पूरी करनी होंगी:

  • allowRedraw सही होना चाहिए
  • डिसप्ले एनोटेशन गलत होने चाहिए. इसका मतलब है कि एनोटेशन नहीं दिखाए जा सकते
  • आपको draw() के पहले कॉल में जिन विकल्पों और वैल्यू को अनुमति देनी है (जिनको अनुमति नहीं दी जा सकती है और allowRedraw और एनोटेशन को छोड़कर), उन्हें पास करना होगा.
AllValuesSuffix स्ट्रिंग कुछ नहीं स्केल और लेजेंड की सभी वैल्यू में जोड़ा जाने वाला सफ़िक्स.
एनोटेशन की चौड़ाई संख्या 25 पूरे चार्ट एरिया से, एनोटेशन एरिया की चौड़ाई (प्रतिशत में). 5-80 की रेंज में कोई नंबर होना चाहिए.
कलर स्ट्रिंग का कलेक्शन डिफ़ॉल्ट रंग चार्ट लाइनों और लेबल के लिए इस्तेमाल होने वाले रंग. स्ट्रिंग की श्रेणी. हर एलिमेंट एक मान्य एचटीएमएल कलर फ़ॉर्मैट वाली स्ट्रिंग है. जैसे, 'लाल' या '#00cc00'.
तारीख वाला फ़ॉर्मैट स्ट्रिंग पहले कॉलम के टाइप (तारीख या क्रम के हिसाब से, तारीख) के आधार पर 'MMMM dd, yyyy' या 'HH:mm MMMM dd, yyyy' हो सकते हैं. सबसे ऊपर दाएं कोने में तारीख की जानकारी दिखाने के लिए इस्तेमाल किया जाने वाला फ़ॉर्मैट. इस फ़ील्ड का फ़ॉर्मैट java SimpleDateFormat क्लास से तय है.
डिसप्ले एनोटेशन बूलियन false अगर इस नीति को 'सही है' पर सेट किया जाता है, तो चार्ट में चुनी गई वैल्यू के ऊपर एनोटेशन दिखेंगे. अगर यह विकल्प 'सही है' पर सेट है, तो हर न्यूमेरिक कॉलम के बाद, दो वैकल्पिक एनोटेशन स्ट्रिंग कॉलम जोड़े जा सकते हैं. एक एनोटेशन एनोटेशन के शीर्षक के लिए और एक एनोटेशन टेक्स्ट के लिए.
डिसप्ले एनोटेशन फ़िल्टर बूलियन false अगर इस नीति को 'सही है' पर सेट किया जाता है, तो चार्ट पर एनोटेशन को फ़िल्टर करने के लिए, फ़िल्टर कंट्रोल दिखेगा. कई एनोटेशन उपलब्ध होने पर, इस विकल्प का इस्तेमाल करें.
डिसप्ले तारीख बार सेपरेटर बूलियन true क्या सीरीज़ की वैल्यू और लेजेंड में तारीख के बीच, एक छोटा बार विभाजक ( | ) दिखाना है, जहां सही है, हां.
DisplayExactValues दिखाएं बूलियन false क्या जगह बचाने के लिए, ग्राफ़ के ऊपर मान के छोटे और गोल किए गए वर्शन को दिखाना है; गलत से पता चलता है कि वह गलत है. उदाहरण के लिए, अगर गलत पर सेट किया जाता है, तो 56123.45 को 56.12k के रूप में दिखाया जा सकता है.
लेजेंड लेजेंड बूलियन true लेजेंड टेक्स्ट की वैल्यू के आगे बिंदु दिखाने हैं या नहीं, जहां सही का मतलब हां होता है.
displayLegendValues बूलियन true क्या लेजेंड में हाइलाइट की गई वैल्यू दिखानी हैं, जहां सही का मतलब है हां.
DisplayRangeSelector बूलियन true

क्या ज़ूम रेंज चुनने का इलाका दिखाया जाना चाहिए (चार्ट के नीचे दिया गया इलाका), जहां गलत का मतलब है कि नहीं.

ज़ूम चुनने वाले टूल में आउटलाइन, चार्ट की पिछली सीरीज़ का लॉग स्केल वर्शन है. इसे ज़ूम सिलेक्टर की ऊंचाई के हिसाब से स्केल किया जाता है.

DisplayZoomButtons बूलियन true ज़ूम वाले लिंक दिखाने हैं या नहीं (1d 5d 1m" वगैरह), जहां गलत का मतलब है नहीं.
भरें संख्या 0 0 से 100 तक की कोई भी संख्या (इसमें ये वैल्यू भी शामिल हैं) कि लाइन ग्राफ़ में हर लाइन के नीचे फ़िल के ऐल्फ़ा के बारे में जानकारी दी जाती है. 100 का मतलब है 100% ओपैक फ़िल, 0 का मतलब है बिलकुल नहीं. फ़िल कलर का रंग, इसके ऊपर की लाइन के रंग जैसा होता है.
हाइलाइटबिंदु स्ट्रिंग 'सबसे नज़दीकी'

सीरीज़ के किस बिंदु को हाइलाइट करना है और लेजेंड में दिखाने के लिए उससे जुड़ी वैल्यू. इनमें से किसी एक वैल्यू को चुनें:

  • 'सबसे पास' - X अक्ष के साथ माउस की वैल्यू.
  • 'आखिरी' - माउस के बाईं ओर मानों का अगला सेट.
लेजेंड पोज़िशन स्ट्रिंग 'सेमरो' रंगों वाले लेजेंड को ज़ूम बटन और तारीख के साथ एक ही पंक्ति में रखें ('sameRow') या नई पंक्ति पर ('newRow').
ज़्यादा से ज़्यादा संख्या स्वचालित Y ऐक्सिस पर दिखाया जाने वाला ज़्यादा से ज़्यादा मान. अगर ज़्यादा से ज़्यादा डेटा पॉइंट इस वैल्यू से ज़्यादा हो जाता है, तो इस सेटिंग को अनदेखा कर दिया जाएगा. इसके बाद, चार्ट में इस तरह बदलाव किया जाएगा कि यह तय किए गए ज़्यादा से ज़्यादा डेटा पॉइंट के ऊपर, अगला सही का निशान दिखे. इसे scaleType से तय किए गए ज़्यादा से ज़्यादा Y अक्ष में प्राथमिकता दी जाएगी.
मि संख्या स्वचालित Y ऐक्सिस पर दिखाया जाने वाला कम से कम मान. अगर कम से कम डेटा पॉइंट इस वैल्यू से कम हो, तो इस सेटिंग को अनदेखा कर दिया जाएगा. इसके बाद, चार्ट में बदलाव किया जाएगा, ताकि सबसे कम वैल्यू के नीचे, अगला बड़ा टिक मार्क दिखाया जा सके. इसे scaleType के तय किए गए कम से कम Y अक्ष पर प्राथमिकता दी जाएगी.
नंबर फ़ॉर्मैट स्ट्रिंग या नंबर का मैप:स्ट्रिंग जोड़े स्वचालित

यह ग्राफ़ के ऊपर दी गई वैल्यू को फ़ॉर्मैट करने के लिए, नंबर फ़ॉर्मैट के पैटर्न के बारे में बताता है.

पैटर्न, java DecimalFormat क्लास के बताए गए फ़ॉर्मैट में होने चाहिए.

  • अगर बताया न गया हो, तो डिफ़ॉल्ट फ़ॉर्मैट पैटर्न का इस्तेमाल किया जाता है.
  • अगर सिंगल स्ट्रिंग पैटर्न बताया गया हो, तो इसका इस्तेमाल सभी वैल्यू के लिए किया जाता है.
  • अगर कोई मैप दिया गया हो, तो कुंजियों पर सीरीज़ की इंडेक्स (ज़ीरो आधारित) इंडेक्स होती है और वैल्यू वे पैटर्न होते हैं जिनका इस्तेमाल किसी खास सीरीज़ को फ़ॉर्मैट करने के लिए किया जाता है.
    आपको चार्ट पर, हर सीरीज़ के लिए फ़ॉर्मैट शामिल करने की ज़रूरत नहीं है. किसी भी सीरीज़ के लिए, डिफ़ॉल्ट फ़ॉर्मैट का इस्तेमाल किया जाएगा.

अगर यह विकल्प दिया गया है, तो displayExactValues विकल्प को अनदेखा कर दिया जाता है.

स्केलकॉलम संख्याओं का अरे अपने आप

यह तय करता है कि ग्राफ़ में Y ऐक्सिस के टिक मार्क पर कौनसी वैल्यू दिखानी हैं. डिफ़ॉल्ट रूप से, दाईं ओर एक स्केल होता है, जो दोनों सीरीज़ पर लागू होता है. हालांकि, ग्राफ़ के अलग-अलग हिस्सों को सीरीज़ की अलग-अलग वैल्यू पर स्केल किया जा सकता है.

इस विकल्प को स्केल वैल्यू के रूप में इस्तेमाल करने के लिए, सीरीज़ की शून्य से तीन संख्याओं (शून्य पर आधारित) इंडेक्स की ज़रूरत होती है. आपकी वैल्यू में यहां कितने वैल्यू दिखाई जाती हैं, यह इस बात पर निर्भर करता है कि आपने अपनी रेंज में कितने वैल्यू शामिल की हैं:

  • अगर आप कोई खाली श्रेणी तय करते हैं, तो चार्ट, टिक मार्क के आगे Y वैल्यू नहीं दिखाएगा.
  • अगर आप एक वैल्यू तय करते हैं, तो चार्ट के दाईं ओर बताई गई सीरीज़ का स्केल दिखाया जाएगा.
  • अगर आप दो वैल्यू बताते हैं, तो चार्ट की दाईं ओर, दूसरी सीरीज़ का स्केल जोड़ दिया जाएगा.
  • अगर आप तीन वैल्यू बताते हैं, तो तीसरी सीरीज़ के लिए स्केल, चार्ट के बीच में जोड़ दिया जाएगा.
  • अरे के बाद की किसी भी वैल्यू को अनदेखा कर दिया जाएगा.

एक से ज़्यादा स्केल दिखाते समय, scaleType विकल्प को 'सभी तय' या 'सभी ज़्यादा से ज़्यादा' पर सेट करने की सलाह दी जाती है.

स्केलटाइप स्ट्रिंग 'ठीक कर दिया गया है'

Y ऐक्सिस पर दिखाए गए, ज़्यादा से ज़्यादा और कम से कम वैल्यू सेट करता है. ये विकल्प उपलब्ध हैं:

  • 'बड़ा किया गया' - Y ऐक्सिस पर सीरीज़ की ज़्यादा से ज़्यादा वैल्यू से लेकर सबसे कम वैल्यू तक का इस्तेमाल किया जाएगा. अगर आपके पास एक से ज़्यादा सीरीज़ हैं, तो सभी बड़े अक्षरों का इस्तेमाल करें.
  • 'fixed' [default] - Y अक्ष, डेटा वैल्यू की वैल्यू के आधार पर अलग-अलग होता है:
    • अगर सभी वैल्यू >=0 हैं, तो Y ऐक्सिस शून्य से ज़्यादा से ज़्यादा डेटा वैल्यू तक चलेगा.
    • अगर सभी वैल्यू <=0 हैं, तो Y ऐक्सिस शून्य से कम से कम डेटा वैल्यू तक चलेगा.
    • अगर वैल्यू पॉज़िटिव और नेगेटिव दोनों हैं, तो Y ऐक्सिस पर सीरीज़ की ज़्यादा से ज़्यादा संख्या, सीरीज़ की कम से कम वैल्यू तक हो सकती है.

      एक से ज़्यादा सीरीज़ के लिए, 'सभी शीर्षक' का इस्तेमाल करें.
  • 'allmaximized' - 'बड़ा किया गया' के जैसा ही होता है, लेकिन कई स्केल दिखाए जाने पर इस्तेमाल किया जाता है. दोनों चार्ट को एक ही स्केल पर बड़ा कर दिया जाएगा. इसका मतलब है कि किसी चार्ट को Y ऐक्सिस पर गलत तरीके से पेश किया जाएगा. हालांकि, हर सीरीज़ पर कर्सर घुमाने से, उसकी वैल्यू सही दिखेगी.
  • 'सभी के लिए तय' - 'तय की गई' के समान, लेकिन कई स्केल दिखाए जाने पर इस्तेमाल होता है. यह सेटिंग, हर स्केल को उस सीरीज़ पर लागू करती है जिस पर वह लागू होती है. scaleColumns के साथ इसका इस्तेमाल करें.

अगर आप कम से कम और/या ज़्यादा से ज़्यादा विकल्पों के बारे में बताते हैं, तो उन्हें आपके स्केल टाइप से तय की गई कम से कम और ज़्यादा से ज़्यादा वैल्यू पर प्राथमिकता दी जाएगी.

मोटाई संख्या 0 0 से 10 तक की कोई संख्या (शामिल) जो लाइनों की मोटाई बताती है, जहां पर 0 सबसे छोटा होता है.
CANNOT TRANSLATE स्ट्रिंग 'विंडो' फ़्लैश चार्ट के लिए विंडो मोड (wmode) पैरामीटर. उपलब्ध वैल्यू हैं: 'opaque', 'window' या 'पारदर्शी'.
ZoomEndTime तारीख कुछ नहीं चुनी गई ज़ूम सीमा की खत्म होने की तारीख/समय सेट करता है.
ZoomStartTime तारीख कुछ नहीं चुनी गई ज़ूम रेंज के शुरू होने की तारीख/समय सेट करता है.

तरीके

तरीका रिटर्न टाइप जानकारी
draw(data, options) कुछ नहीं चार्ट ड्रॉ करता है. अनुमति दिए गए Redraw प्रॉपर्टी का इस्तेमाल करके, आप draw() पर जवाब देने में लगने वाला समय कम कर सकते हैं. यह कॉल दूसरे कॉल के लिए जल्दी किया जा सकता है.
getSelection() चुने गए एलिमेंट की कैटगरी मानक getSelection() लागू करना. चुने गए एलिमेंट, सेल एलिमेंट हैं. उपयोगकर्ता एक बार में सिर्फ़ एक सेल चुन सकता है.
getVisibleChartRange() start और end प्रॉपर्टी वाला ऑब्जेक्ट start और end प्रॉपर्टी के साथ एक ऑब्जेक्ट दिखाता है. इनमें से हर एक प्रॉपर्टी एक Date ऑब्जेक्ट है, जो मौजूदा समय के चुनाव को दिखाता है.
hideDataColumns(columnIndexes) कुछ नहीं चार्ट से, बताई गई डेटा सीरीज़ को छिपाता है. इसमें एक ऐसा पैरामीटर स्वीकार किया जाता है जो संख्या या संख्याओं का अरे हो सकता है, जिसमें 0 पहली डेटा सीरीज़ के बारे में बताता है वगैरह.
setVisibleChartRange(start, end) कुछ नहीं दिखाई देने वाली श्रेणी (ज़ूम) को तय सीमा पर सेट करता है. इस तरह के Date के दो पैरामीटर स्वीकार किए जाते हैं जो चुने गए को दिखने वाले रेंज के पहले और आखिरी बार को दिखाते हैं. सबसे शुरू के दिन से लेकर खत्म तक, सभी चीज़ों को शामिल करने के लिए शुरू करें को शून्य पर सेट करें; शुरू से लेकर आखिरी तारीख तक सब कुछ शामिल करने के लिए, end को शून्य पर सेट करें.
showDataColumns(columnIndexes) कुछ नहीं hideDataColumns तरीके का इस्तेमाल करके, चार्ट में दी गई डेटा सीरीज़ छिपाए जाने के बाद, उसे चार्ट में दिखाता है. इसमें एक ऐसा पैरामीटर स्वीकार किया जाता है जो संख्या या संख्याओं का अरे हो सकता है, जिसमें 0 पहली डेटा सीरीज़ के बारे में बताता है वगैरह.

इवेंट

नाम जानकारी प्रॉपर्टी
रेंज में बदलाव ज़ूम रेंज बदली गई. जब उपयोगकर्ता setVisibleChartRange को दिखने की समयसीमा में बदलाव करता है, लेकिन सक्रिय नहीं होता है, तो सक्रिय होता है.
ध्यान दें: यह सलाह दी जाती है कि इवेंट प्रॉपर्टी का इस्तेमाल न करें, बल्कि getVisibleChartRange के तरीके पर कॉल करके ऐसा करें.
  • start: तारीख. ज़ूम रेंज के शुरू होने का समय.
  • end: तारीख. ज़ूम रेंज के खत्म होने का समय.
तैयार चार्ट, मेथड कॉल के लिए तैयार है. अगर आपको चार्ट बनाने के बाद उसके साथ इंटरैक्शन और कॉल के तरीकों की जानकारी चाहिए, तो आपको draw तरीके को कॉल करने से पहले, इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट के सक्रिय होने के बाद ही उन्हें कॉल करना चाहिए कभी नहीं
चुनें जब उपयोगकर्ता किसी एनोटेशन फ़्लैग (मार्कर) पर क्लिक करता है, तो डेटा टेबल में उससे जुड़ा सेल चुना जाता है. इसके बाद विज़ुअलाइज़ेशन इस इवेंट को सक्रिय कर देता है. कभी नहीं

ध्यान दें: अगर आप ब्राउज़र में, पेज को फ़ाइल के तौर पर ऐक्सेस कर रहे हैं, तो हो सकता है कि इवेंट सीमित न हों. उदाहरण के लिए, "file://") का इस्तेमाल कर सकते हैं (उदाहरण, "http://www."

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस किया जाता है और रेंडर किया जाता है. किसी भी सर्वर पर डेटा नहीं भेजा जाता.

ज़रूरी जानकारी

हो सकता है कि फ़्लैश की सुरक्षा सेटिंग की वजह से, यह (और सभी फ़्लैश-आधारित विज़ुअलाइज़ेशन) सही तरीके से काम न करे. ऐसा किसी वेब सर्वर यूआरएल (जैसे, http://www.myhost.com/myviz.html) के बजाय ब्राउज़र में किसी फ़ाइल की जगह (जैसे, file:///c:/webhost/myhost/myviz.html) से ऐक्सेस किए जाने पर हो सकता है. आम तौर पर, यह सिर्फ़ जांच के लिए होती है. MMedia की वेबसाइट पर जाकर, इस समस्या को हल किया जा सकता है.