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

बहिष्कृत

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

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

खास जानकारी

यह स्कैटर चार्ट 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:["scatterchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, titleX: 'Age', titleY: 'Weight', legend: 'none', pointSize: 5});
      }
    </script>
  </head>

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

लोड हो रहा है

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

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

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

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

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

दो या ज़्यादा स्तंभ आवश्यक हैं, सभी अंक में होने चाहिए. पहले कॉलम की वैल्यू का इस्तेमाल X-ऐक्सिस के लिए किया जाता है. यहां दिए गए कॉलम में मौजूद वैल्यू का इस्तेमाल, Y-ऐक्सिस के लिए किया जाता है. हर कॉलम को अलग-अलग रंग से दिखाया जाता है.

डेटा टेबल में, X ऐक्सिस पर दिखाई गई कम से कम और ज़्यादा से ज़्यादा संख्या के लिए, कम से कम और ज़्यादा से ज़्यादा X वैल्यू का इस्तेमाल किया जाता है. इन वैल्यू के नीचे या इसके ऊपर ज़्यादा जगह दिखाने के लिए, पंक्ति में कम से कम या ज़्यादा से ज़्यादा वैल्यू के लिए X वैल्यू जोड़ें. इसके बाद, पंक्ति में Y वैल्यू न डालें. इस तरह, कम से कम, ज़्यादा से ज़्यादा या दोनों वैल्यू के लिए एक लाइन जोड़ी जा सकती है.

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

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

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

तरीके

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

इवेंट

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

डेटा नीति

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