इस पेज का अनुवाद Cloud Translation API से किया गया है.

विज़ुअलाइज़ेशन: गेज

खास जानकारी
उदाहरण
लोड हो रहा है
डेटा फ़ॉर्मैट
कॉन्फ़िगरेशन के विकल्प
तरीके
इवेंट
डेटा नीति

खास जानकारी

डायल के साथ एक गेज, जो SVG या VML का इस्तेमाल करके ब्राउज़र में रेंडर किया जाता है.

उदाहरण

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

function drawChart() {

var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

chart.draw(data, options);

setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

फ़िलहाल, दूसरे चार्ट की तरह गेज चार्ट का शीर्षक बताने का कोई तरीका नहीं है. ऊपर दिए गए उदाहरण में, शीर्षक को दिखाने के लिए आसान एचटीएमएल का इस्तेमाल किया गया है.

साथ ही, कई अन्य Google चार्ट के लिए उपलब्ध animation.startup विकल्प, गॉज चार्ट के लिए उपलब्ध नहीं है. अगर आपको स्टार्टअप एनिमेशन पसंद है, तो चार्ट को शुरुआत में शून्य पर सेट मानों के साथ बनाएं, और फिर उस मान के साथ फिर से बनाएं जिसे आप ऐनिमेट करना चाहते हैं.

लोड हो रहा है

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

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

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

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

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

हर संख्या वाली वैल्यू को गॉज के तौर पर दिखाया जाता है. डेटा के दो वैकल्पिक फ़ॉर्मैट काम करते हैं:

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

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

नाम
एनिमेशन.अवधि	ऐनिमेशन का कुल समय (मिलीसेकंड में). ज़्यादा जानकारी के लिए, ऐनिमेशन का दस्तावेज़ देखें. टाइप: नंबर डिफ़ॉल्ट: 400
एनिमेशन	ईज़िंग फ़ंक्शन ऐनिमेशन पर लागू किया गया. फ़िल्टर के लिए, यहां दिए गए विकल्प उपलब्ध होते हैं: 'लीनियर' - स्थिर गति. 'in' - ईज़ी-इन - धीमी गति से और गति से शुरू करें. 'out' - Ease - जल्दी से शुरू करो और धीमा करो. 'inAndOut' - ईज़ इन और आउट - धीमी गति से शुरू करें, गति बढ़ाएं, फिर धीमा करें. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'लीनियर'
फ़ोर्सआईफ़्रेम	चार्ट को इनलाइन फ़्रेम के अंदर दिखाता है. (ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है; सभी IE8 चार्ट को i-frame में बनाया गया है.) टाइप: बूलियन डिफ़ॉल्ट: गलत
हरा रंग	एचटीएमएल सेक्शन में नोटेशन के लिए, हरे सेक्शन के लिए इस्तेमाल किया जाने वाला रंग. टाइप: स्ट्रिंग डिफ़ॉल्ट: '#109618'
हरा	किसी हरे रंग से चिह्नित श्रेणी के लिए सबसे कम मान. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
हरा	किसी हरे रंग से चिह्नित श्रेणी के लिए अधिकतम मान. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
ऊंचाई	चार्ट की ऊंचाई पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: कंटेनर की चौड़ाई
मेजरटिक्स	प्रमुख टिक मार्क के लिए लेबल. लेबल की संख्या से यह पता चलता है कि सभी गॉज में कितने बड़े टिक हैं. डिफ़ॉल्ट रूप से पांच टिक होते हैं, जिनमें कम से कम और ज़्यादा से ज़्यादा गेज के लेबल होते हैं. टाइप: स्ट्रिंग की कैटगरी डिफ़ॉल्ट: कोई नहीं
ज़्यादा से ज़्यादा	गेज की सबसे बड़ी वैल्यू. टाइप: नंबर डिफ़ॉल्ट: 100
मि	किसी गॉज का कम से कम मान. टाइप: नंबर डिफ़ॉल्ट: 0
नाबालिगों	हर मुख्य टिक सेक्शन में टिक के छोटे-छोटे सेक्शन की संख्या. टाइप:नंबर डिफ़ॉल्ट: 2
लाल रंग	एचटीएमएल रंग नोटेशन में लाल सेक्शन के लिए इस्तेमाल होने वाला रंग. टाइप: स्ट्रिंग डिफ़ॉल्ट: '#DC3912'
लालसे	किसी लाल रंग से चिह्नित श्रेणी के लिए सबसे कम मान. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
रेडटू	लाल रंग से चिह्नित श्रेणी के लिए उच्चतम मान. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
width	चार्ट की चौड़ाई पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: कंटेनर की चौड़ाई
पीला रंग	पीले रंग के सेक्शन के लिए इस्तेमाल किया जाने वाला रंग, एचटीएमएल रंग नोटेशन में. टाइप: स्ट्रिंग डिफ़ॉल्ट: '#FF9900'
पीला फ़्रॉम	पीले रंग से चिह्नित श्रेणी के लिए सबसे कम मान. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
पीला	पीले रंग से चिह्नित श्रेणी के लिए अधिकतम मान. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं

तरीके

तरीका
`draw(data, options)`	चार्ट ड्रॉ करता है. सामान लौटाने का टाइप: कोई नहीं
`clearChart()`	चार्ट साफ़ करता है और अपने सभी आवंटित संसाधन रिलीज़ करता है. सामान लौटाने का टाइप: कोई नहीं

इवेंट

कोई इवेंट ट्रिगर नहीं किया गया.

डेटा नीति

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