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

अहम जानकारी: 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:["imagelinechart"]});
      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.ImageLineChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

लोड हो रहा है

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

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

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

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

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

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

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

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

तरीके

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

इवेंट

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

डेटा नीति

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