विज़ुअलाइज़ेशन: एरिया चार्ट (पुराना वर्शन)

बहिष्कृत

इस विज़ुअलाइज़ेशन को नए वर्शन से बदल दिया गया है; कृपया इसके बजाय, इसका इस्तेमाल करें. डेटा को आसानी से दूसरी जगह भेजने के लिए, कृपया प्रॉडक्ट की जानकारी देखें.

खास जानकारी

SVG या VML का इस्तेमाल करके, ब्राउज़र में रेंडर किया जाने वाला एरिया चार्ट. बिंदुओं पर क्लिक करने से जुड़ी सलाह दिखाता है. लेजेंड एंट्री पर क्लिक करते समय लाइनें ऐनिमेट करता है.

Google ने:

उदाहरण

इसे विज़ुअलाइज़ेशन प्लेग्राउंड पर कोड करें

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

लोड हो रहा है

google.load पैकेज का नाम "areachart". है

  google.load("visualization", "1", {packages: ["areachart"]});

विज़ुअलाइज़ेशन की कक्षा का नाम google.visualization.AreaChart है 

  var visualization = new google.visualization.AreaChart(container);

डेटा फ़ॉर्मैट

पहला स्तंभ एक स्ट्रिंग होना चाहिए और उसमें श्रेणी लेबल होना चाहिए. इसके बाद भी कितने ही कॉलम आ सकते हैं, सभी कॉलम अंकों में होने चाहिए. हर कॉलम को एक अलग लाइन के तौर पर दिखाया जाता है.

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

नाम टाइप डिफ़ॉल्ट जानकारी
ऐक्सिस रंग स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग ऐक्सिस का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
ऐक्सिस पृष्ठभूमिरंग स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग ऐक्सिस के बैकग्राउंड के चारों ओर बॉर्डर. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
ऐक्सिसफ़ॉन्ट साइज़ संख्या स्वचालित चार्ट ऐक्सिस टेक्स्ट का फ़ॉन्ट साइज़, पिक्सल में.
बैकग्राउंड का रंग स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के मुख्य हिस्से का बैकग्राउंड कलर. इनमें से कोई एक विकल्प हो सकता है:
  • एचटीएमएल में इस्तेमाल किए जा सकने वाले रंग वाली स्ट्रिंग, जैसे कि 'लाल' या '#00cc00'
  • stroke fill और strokeSize प्रॉपर्टी वाला एक ऑब्जेक्ट. stroke और fill रंग की स्ट्रिंग होनी चाहिए. स्ट्रोकसाइज़ एक संख्या है. उदाहरण के लिए: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. स्ट्रोक के बिना, बस फ़िल का इस्तेमाल करने के लिए stroke:null, strokeSize: 0 का इस्तेमाल करें.
बॉर्डर का रंग स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट एलिमेंट के चारों ओर बॉर्डर. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
कलर स्ट्रिंग का कलेक्शन डिफ़ॉल्ट रंग चार्ट एलिमेंट के लिए इस्तेमाल किए जाने वाले रंग. स्ट्रिंग की श्रेणी. हर एलिमेंट एक ऐसी स्ट्रिंग होती है जो एचटीएमएल में काम करने वाला रंग होता है. उदाहरण के लिए, 'लाल' या '#00cc00'.
चालू करें टूलटिप बूलियन true अगर नीति को 'सही है' पर सेट किया जाता है, तो उपयोगकर्ता को डेटा पॉइंट पर क्लिक करने पर टूलटिप दिखते हैं.
फ़ोकसबॉर्डररंग स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के उन एलिमेंट के चारों ओर बॉर्डर जो फ़ोकस में हैं (माउस से बताए गए). संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
ऊंचाई संख्या कंटेनर की ऊंचाई चार्ट की ऊंचाई पिक्सल में.
स्टैक स्टैक किया गया बूलियन false अगर इस वैल्यू को 'सही है' पर सेट किया जाता है, तो लाइन वैल्यू स्टैक हो जाती हैं (इकट्ठा हो जाती हैं).
लेजेंड स्ट्रिंग 'दाएं' लीजेंड की स्थिति और प्रकार. इनमें से कोई एक स्थिति हो सकती है:
  • 'right' - चार्ट के दाईं ओर.
  • 'left' - चार्ट के बाईं ओर.
  • 'ऊपर' - चार्ट के ऊपर.
  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'कोई नहीं' - कोई लेजेंड नहीं दिखाया गया है.
लेजेंडबैकग्राउंडरंग स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के लेजेंड एरिया का बैकग्राउंड कलर. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
लेजेंड फ़ॉन्ट का साइज़ संख्या स्वचालित लेजेंड फ़ॉन्ट का साइज़, पिक्सल में.
लेजेंडटेक्स्ट का रंग स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग लेजेंड के टेक्स्ट का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
लाइन का साइज़ संख्या 2 लाइन की चौड़ाई पिक्सल में. सभी लाइनें छिपाने और सिर्फ़ पॉइंट दिखाने के लिए, शून्य का इस्तेमाल करें.
लॉगस्केल बूलियन false सही होने पर, मुख्य ऐक्सिस को लॉगारिद्मिक के तौर पर स्केल किया जाना चाहिए.
ज़्यादा से ज़्यादा संख्या स्वचालित सबसे ऊंची Y ऐक्सिस ग्रिड लाइन के बारे में बताता है. असल ग्रिड लाइन दो वैल्यू से ज़्यादा होगी: ज़्यादा से ज़्यादा विकल्प वैल्यू या सबसे ज़्यादा डेटा वैल्यू, जिसे अगले ज़्यादा ग्रिड मार्क तक राउंड किया जाएगा.
मि संख्या स्वचालित कम से कम Y अक्ष वाली ग्रिड लाइन की जानकारी देता है. असल ग्रिड लाइन इन दो वैल्यू में से सबसे कम होगी: कम से कम विकल्प वैल्यू या सबसे कम डेटा वैल्यू, नीचे के अगले ग्रिड मार्क तक नीचे दी गई होगी.
पॉइंट का साइज़ संख्या 3 पिक्सल में दिखाए गए पॉइंट का साइज़. सभी बिंदुओं को छिपाने के लिए शून्य का इस्तेमाल करें.
रिवर्स ऐक्सिस बूलियन false अगर इस नीति को 'सही है' पर सेट किया जाता है, तो दाईं से बाईं ओर कैटगरी आ जाएंगी. डिफ़ॉल्ट बाएं-से-दाएं बनाना है.
शो की कैटगरी बूलियन true अगर सही है, तो कैटगरी लेबल दिखेंगे. गलत होने पर, ऐसा नहीं होगा.
शीर्षक स्ट्रिंग कोई शीर्षक नहीं चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.
शीर्षकX स्ट्रिंग कोई शीर्षक नहीं हॉरिज़ॉन्टल ऐक्सिस के नीचे दिखाने के लिए टेक्स्ट.
शीर्षकY स्ट्रिंग कोई शीर्षक नहीं वर्टिकल ऐक्सिस से टेक्स्ट दिखाया जाता है.
शीर्षक का रंग स्ट्रिंग या ऑब्जेक्ट डिफ़ॉल्ट रंग चार्ट के शीर्षक का रंग. संभावित वैल्यू, backgroundColor कॉन्फ़िगरेशन के विकल्प के बराबर हैं.
शीर्षक फ़ॉन्ट का आकार संख्या स्वचालित चार्ट के शीर्षक के लिए फ़ॉन्ट का साइज़, पिक्सल में.

टूलटिपसलाह का साइज़		 संख्या 11 टूलटिप टेक्स्ट के फ़ॉन्ट का साइज़. अगर टूलटिप बहुत छोटा है, तो टेक्स्ट को तय किए गए फ़ॉन्ट में रखने से इसमें कमी आ सकती है.
टूलटिप की ऊंचाई
 संख्या 60 टूलटिप की ऊंचाई, पिक्सल में. टूलटिप की ऊंचाई तय कर दी गई है. यह कभी भी बड़ी या छोटी नहीं होगी, ताकि टेक्स्ट की लंबाई या फ़ॉन्ट के साइज़ के मुताबिक फ़िट हो सके. हालांकि, चार्ट की ऊंचाई 1/3 से ज़्यादा होने पर उसे काट दिया जाएगा.
टूलटिप संख्या 120 टूलटिप की चौड़ाई, पिक्सल में. टूलटिप की चौड़ाई तय कर दी गई है. यह कभी भी बड़ी या छोटी नहीं होगी, ताकि टेक्स्ट की लंबाई या फ़ॉन्ट के साइज़ के मुताबिक फ़िट हो सके. हालांकि, चार्ट की चौड़ाई से ज़्यादा किसी भी चीज़ को काट दिया जाएगा.
width संख्या कंटेनर की चौड़ाई चार्ट की चौड़ाई पिक्सल में.

तरीके

तरीका रिटर्न टाइप जानकारी
draw(data, options) कोई नहीं चार्ट ड्रॉ करता है.
getSelection() चुने गए एलिमेंट की कैटगरी स्टैंडर्ड getSelection() को लागू करना. चुने गए एलिमेंट कॉलम और सेल एलिमेंट हैं. उपयोगकर्ता एक बार में सिर्फ़ एक कॉलम या सेल चुन सकता है.
setSelection() कोई नहीं स्टैंडर्ड setSelection() लागू किया जाता है, लेकिन सिर्फ़ एक एलिमेंट चुना जा सकता है. हर चुनी गई एंट्री को कॉलम या सेल चुनने के तौर पर मानता है. ध्यान दें कि लेबल कॉलम को चुना नहीं जा सकता.

इवेंट

नाम जानकारी प्रॉपर्टी
onmouseover तब सक्रिय होता है, जब उपयोगकर्ता किसी पॉइंट पर माउस ले जाता है. साथ ही, संबंधित सेल की पंक्ति और कॉलम इंडेक्स में पास हो जाता है. पंक्ति, कॉलम
onmouseout तब सक्रिय होता है, जब उपयोगकर्ता किसी बिंदु पर से माउस ले जाता है और संबंधित सेल की पंक्ति और कॉलम इंडेक्स में पास होता है. पंक्ति, कॉलम
ready चार्ट, मेथड कॉल के लिए तैयार है. अगर किसी चार्ट को बनाने के बाद उसके साथ इंटरैक्शन और कॉल के तरीके इस्तेमाल करने हैं, तो draw तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट चालू होने के बाद ही उन्हें कॉल करना चाहिए कभी नहीं
select तब सक्रिय होता है, जब उपयोगकर्ता किसी बिंदु या लेजेंड पर क्लिक करता है. जब कोई पॉइंट चुना जाता है, तब डेटा टेबल में मौजूद सेल को चुना जाता है; जब कोई लेजेंड चुना जाता है, तब डेटा टेबल में मौजूद कॉलम को चुना जाता है. क्या चुना गया है, यह जानने के लिए, getSelection() पर कॉल करें. कभी नहीं

डेटा नीति

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