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

अहम जानकारी: 20 अप्रैल, 2012 से Google चार्ट टूल के 'इमेज चार्ट' वाले हिस्से को आधिकारिक तौर पर बंद कर दिया गया है. यह खाता, सुविधा बंद करने की हमारी नीति के हिसाब से काम करता रहेगा.

  1. खास जानकारी
  2. उदाहरण
  3. लोड हो रहा है
  4. डेटा फ़ॉर्मैट
  5. कॉन्फ़िगरेशन के विकल्प
  6. तरीके
  7. इवेंट
  8. डेटा से जुड़ी नीति

खास जानकारी

ऐसा एरिया चार्ट जिसे Google Charts API का इस्तेमाल करके इमेज के तौर पर रेंडर किया जाता है.

उदाहरण

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imageareachart"]});
      google.charts.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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

लोड हो रहा है

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

  google.charts.load('current', {packages: ['imageareachart']});

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

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

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

हर कॉलम, चार्ट में एक लाइन को दिखाता है. इसमें हर एंट्री एक ही X ऐक्सिस पॉइंट पर Y ऐक्सिस की वैल्यू होती है और विज़ुअलाइज़ेशन उन्हें एक सीधी लाइन से जोड़ता है, फिर लाइन के नीचे वाले एरिया में भर जाता है.

डेटा को कॉलम के हिसाब से प्रोसेस किया जाता है. इसकी शुरुआत कॉलम शून्य से होती है और यह बढ़ती जाती है. आपको सबसे पहले सबसे ऊंची लाइनों को लिखना चाहिए, उसके बाद नीचे की लाइनों को. ऐसा करना चाहिए, क्योंकि अगर आप एक निचली लाइन को पहले पेंट करेंगे, तो ऊपर की लाइन पेंट हो जाएगी और निचली लाइन छिप जाएगी. इसलिए, कोशिश करें कि कॉलम 1 के पॉइंट, कॉलम 2 से ज़्यादा हों, कॉलम 2 के कॉलम 3 से ज़्यादा हों वगैरह. अगर आपके दाएं कॉलम पर बाएं कॉलम की तुलना में एक या दो पॉइंट ज़्यादा हैं, तो इससे निचली लाइन कुछ हद तक छिप सकती है, लेकिन यह अब भी दिखनी चाहिए.

सारा डेटा, न्यूमेरिक (संख्या वाला) या ऐसा होना चाहिए जिसमें पहला डेटा न हो. डेटा, न्यूमेरिक या स्ट्रिंग के तौर पर हो सकता है. अगर पहला कॉलम किसी स्ट्रिंग टाइप का है, तो पहले कॉलम की एंट्री X पर लेबल के तौर पर दिखेंगी. अगर पहला कॉलम कोई संख्या है, तो कोई X ऐक्सिस लेबल नहीं दिखाया जाएगा. सभी कॉलम (पहले को छोड़कर) नंबर होने चाहिए. कॉलम की संख्या की कोई सीमा नहीं है.

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

नाम टाइप डिफ़ॉल्ट ब्यौरा
backgroundColor स्ट्रिंग '#FFFFFF' (सफ़ेद) चार्ट एपीआई कलर फ़ॉर्मैट में चार्ट के बैकग्राउंड का रंग.
कलर कलेक्शन<string> ऑटो हर डेटा सीरीज़ को खास रंग असाइन करने के लिए इसका इस्तेमाल करें. कलर, चार्ट एपीआई कलर फ़ॉर्मैट में बताए जाते हैं. अगर कलर से ज़्यादा डेटा कॉलम हैं, तो कलर i का इस्तेमाल डेटा कॉलम i के लिए किया जाता है. यह शुरुआत तक रैप करता है. अगर एक ही रंग के वैरिएशन सभी सीरीज़ के लिए सही हैं, तो color विकल्प का इस्तेमाल करें.
enableEvents boolean false इसकी वजह से, उपयोगकर्ता से ट्रिगर होने वाले इवेंट, जैसे कि क्लिक या माउस ओवर फेंकते हैं. इसका इस्तेमाल सिर्फ़ चुनिंदा चार्ट टाइप के लिए किया जा सकता है. नीचे इवेंट देखें.
ऊंचाई नंबर कंटेनर की ऊंचाई पिक्सल में चार्ट की ऊंचाई.
लेजेंड स्ट्रिंग 'राइट' लेजेंड की जगह और टाइप. इनमें से कोई एक स्थिति हो सकती है:
  • 'दाईं ओर' - चार्ट की दाईं ओर.
  • 'बायां' - चार्ट के बाईं ओर.
  • 'सबसे ऊपर' - चार्ट के ऊपर.
  • 'सबसे नीचे' - चार्ट के नीचे.
  • 'कोई भी नहीं' - कोई लेजेंड नहीं दिखाया गया.
ज़्यादा से ज़्यादा नंबर स्वचालित Y ऐक्सिस में दिखाई जाने वाली सबसे बड़ी वैल्यू.
कम से कम नंबर स्वचालित Y ऐक्सिस में दिखाने के लिए कम से कम वैल्यू.
showCategoryLabels boolean सही अगर नीति को 'गलत है' पर सेट किया जाता है, तो कैटगरी के लेबल (X ऐक्सिस लेबल) हटा दिए जाते हैं.
showValueLabels boolean सही अगर नीति को 'गलत है' पर सेट किया जाता है, तो वैल्यू के लेबल (Y ऐक्सिस लेबल) हटा दिए जाते हैं.
title स्ट्रिंग कोई टाइटल नहीं चार्ट के ऊपर दिखाया जाने वाला टेक्स्ट.
valueLabelsInterval नंबर ऑटो वह इंटरवल जिस पर वैल्यू ऐक्सिस लेबल दिखाना है. उदाहरण के लिए, अगर min 0, max, 100, और valueLabelsInterval 20 है, तो चार्ट में ऐक्सिस लेबल (0, 20, 40, 60, 80 100) दिखेंगे.
चौड़ाई नंबर कंटेनर की चौड़ाई पिक्सल में चार्ट की चौड़ाई.

तरीके

तरीका रिटर्न टाइप ब्यौरा
draw(data, options) कुछ नहीं चार्ट बनाता है.

इवेंट

आप जेनेरिक इमेज चार्ट पेज पर बताए गए इवेंट सुनने के लिए रजिस्टर कर सकते हैं.

डेटा नीति

कृपया Chart API को लॉग करने की नीति देखें.