इस पेज का अनुवाद 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 चार्ट के लिए किया जा सकता है. ऊपर दिए गए उदाहरण में, टाइटल दिखाने के लिए सामान्य एचटीएमएल का इस्तेमाल किया गया है.

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

लोड हो रहा है

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

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

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

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

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

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

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

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

नाम
animation.duration	ऐनिमेशन की अवधि, मिलीसेकंड में. ज़्यादा जानकारी के लिए, ऐनिमेशन दस्तावेज़ देखें. टाइप: नंबर डिफ़ॉल्ट: 400
animation.easing	ऐनिमेशन पर ईज़िंग फ़ंक्शन लागू किया गया. ये विकल्प उपलब्ध हैं: 'लीनियर' - कॉन्स्टेंट स्पीड. 'in' - आसानी से शुरू करें - धीरे शुरू करें और स्पीड बढ़ाएं. 'आउट' - आसानी से शुरू करें - तेज़ी से शुरू करें और स्पीड कम करें. 'inAndOut' - आसान अंदर और बाहर - धीरे शुरू करें, स्पीड बढ़ाएं, फिर धीमा करें. Type: स्ट्रिंग डिफ़ॉल्ट: 'लीनियर'
forceIFrame	चार्ट को किसी इनलाइन फ़्रेम के अंदर ड्रॉ करता है. ध्यान दें कि IE8 पर, इस विकल्प को अनदेखा किया जाता है. सभी IE8 चार्ट, i-फ़्रेम में बनाए जाते हैं. टाइप: बूलियन डिफ़ॉल्ट: गलत
greenColor	हरे सेक्शन के लिए, एचटीएमएल कलर नोटेशन में इस्तेमाल किया जाने वाला रंग. Type: स्ट्रिंग डिफ़ॉल्ट: '#109618'
greenFrom	हरे रंग से मार्क की गई किसी रेंज के लिए सबसे कम वैल्यू. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
greenTo	हरे रंग से मार्क की गई किसी रेंज के लिए सबसे बड़ी वैल्यू. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
ऊंचाई	पिक्सल में चार्ट की ऊंचाई. टाइप: नंबर डिफ़ॉल्ट: कंटेनर की चौड़ाई
majorTicks	मेजर टिक मार्क के लिए लेबल. लेबल की संख्या से सभी गेज में मेजर टिक की संख्या के बारे में पता चलता है. डिफ़ॉल्ट तौर पर, पांच मुख्य टिक होते हैं. इनमें गेज की सबसे कम और सबसे ज़्यादा वैल्यू वाले लेबल होते हैं. टाइप: स्ट्रिंग की कलेक्शन डिफ़ॉल्ट: कोई नहीं
ज़्यादा से ज़्यादा	किसी गेज का अधिकतम मान. टाइप: नंबर डिफ़ॉल्ट: 100
कम से कम	गेज का कम से कम मान. टाइप: नंबर डिफ़ॉल्ट: 0
minorTicks	हर मेजर टिक सेक्शन में, माइनर टिक सेक्शन की संख्या. टाइप:नंबर डिफ़ॉल्ट: 2
redColor	एचटीएमएल कलर नोटेशन में लाल सेक्शन के लिए इस्तेमाल किया जाने वाला रंग. Type: स्ट्रिंग डिफ़ॉल्ट: '#DC3912'
redFrom	लाल रंग से मार्क की गई किसी रेंज के लिए सबसे कम वैल्यू. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
redTo	लाल रंग से मार्क की गई किसी रेंज के लिए सबसे बड़ी वैल्यू. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
चौड़ाई	पिक्सल में चार्ट की चौड़ाई. टाइप: नंबर डिफ़ॉल्ट: कंटेनर की चौड़ाई
yellowColor	एचटीएमएल कलर नोटेशन में, पीले सेक्शन के लिए इस्तेमाल किया जाने वाला रंग. Type: स्ट्रिंग डिफ़ॉल्ट: '#FF9900'
yellowFrom	पीले रंग से मार्क की गई किसी रेंज के लिए सबसे कम वैल्यू. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं
yellowTo	पीले रंग से मार्क की गई किसी रेंज की सबसे बड़ी वैल्यू. टाइप: नंबर डिफ़ॉल्ट: कोई नहीं

तरीके

तरीका
`draw(data, options)`	चार्ट बनाता है. सामान लौटाने का तरीका: कोई नहीं
`clearChart()`	चार्ट को हटा देता है और इसके लिए असाइन किए गए सभी संसाधनों को रिलीज़ करता है. सामान लौटाने का तरीका: कोई नहीं

इवेंट

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

डेटा नीति

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