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

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

खास जानकारी

समय के साथ कई इंंडिकेटर देखने के लिए डाइनैमिक चार्ट. चार्ट, ब्राउज़र में Flash का इस्तेमाल करके रेंडर किया जाता है.

डेवलपर के लिए नोट: हो सकता है कि फ़्लैश सुरक्षा सेटिंग के कारण (और सभी Flash-आधारित विज़ुअलाइज़ेशन), किसी वेब सर्वर यूआरएल (जैसे, http://www.myhost.com/myviz.html) के बजाय ब्राउज़र में फ़ाइल स्थान से ऐक्सेस किए जाने पर सही तरीके से काम न करें (उदा. file:///c:/webhost/myhost/myviz.html). यह आम तौर पर सिर्फ़ टेस्टिंग से जुड़ी समस्या होती है. Adobe वेब साइट पर बताए गए तरीके से, इस समस्या को हल किया जा सकता है.

उदाहरण

(ध्यान दें कि स्थानीय फ़ाइल के तौर पर लोड करने पर, नीचे दिया गया कोड काम नहीं करेगा. इसे वेब सर्वर से लोड किया जाना चाहिए.)

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

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

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

लोड हो रहा है

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

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

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

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

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

  • पहला कॉलम टाइप 'string' होना चाहिए और इसमें इकाई के नाम होने चाहिए (जैसे, ऊपर दिए गए उदाहरण में "सेब", "नारंगी", "केले".
  • दूसरे कॉलम में समय की वैल्यू होनी चाहिए. समय को इनमें से किसी भी फ़ॉर्मैट में बताया जा सकता है:
    • साल - कॉलम का टाइप: 'नंबर'. उदाहरण: 2008.
    • महीना, दिन, और साल - कॉलम का टाइप: 'तारीख'; वैल्यू को JavaScript Date इंस्टेंस होना चाहिए.
    • हफ़्ते की संख्या- कॉलम का टाइप: 'string'; वैल्यू में YYYYWwww का पैटर्न इस्तेमाल होना चाहिए, जो ISO 8601 के मुताबिक होता है. उदाहरण: '2008W03'.
    • क्वार्टर - कॉलम टाइप: 'string'; वैल्यू में YYYYQq पैटर्न होना चाहिए, जो ISO 8601 के मुताबिक हो. उदाहरण: '2008Q3'.
  • बाद के कॉलम 'संख्या' या 'स्ट्रिंग' टाइप हो सकते हैं. संख्या वाले कॉलम, X, Y, कलर, और साइज़ ऐक्सिस के लिए ड्रॉपडाउन मेन्यू में दिखेंगे. स्ट्रिंग कॉलम सिर्फ़ कलर के ड्रॉपडाउन मेन्यू में दिखेंगे. ऊपर दिया गया उदाहरण देखें.

शुरुआती स्थिति सेट करना

आप तय कर सकते हैं कि मोशन चार्ट एक खास स्थिति के साथ शुरू होता है या नहीं: चुनी गई इकाइयों का सेट और कस्टमाइज़ेशन देखें. ऐसा करने के लिए, पहले आपको चार्ट बनाना और दिखाना होगा. इसके बाद, स्थिति में किया गया कोई भी ऐसा बदलाव करना होगा जिसे आपको चार्ट में दिखाना है (वैल्यू चुनें, सेटिंग बदलें वगैरह), फिर इन सेटिंग को स्ट्रिंग के तौर पर एक्सपोर्ट करें. इसके बाद, इस कोड का इस्तेमाल अपने कोड में "स्टेटस" के विकल्प को करें. अगले दो सेक्शन में, एक्सपोर्ट करने का तरीका बताया गया है. इसके बाद, राज्य के कोड का इस्तेमाल किया गया है.

  1. एक चालू चार्ट खोलें और वे सेटिंग सेट करें, जिन्हें आप कैप्चर करना चाहते हैं. जिन सेटिंग के बारे में बताया जा सकता है उनमें अपारदर्शिता के लेवल, ज़ूम करना, और लॉग बनाम लीनियर स्केलिंग शामिल हैं.
  2. सेटिंग पैनल खोलें. इसके लिए, चार्ट के नीचे दाएं कोने में मौजूद रेंच सिंबल पर क्लिक करें.
  3. किसी सेट में बेहतर पैनल जोड़ने के लिए, निचले बाएं कोने में बेहतर लिंक पर क्लिक करें.
  4. बेहतर पैनल को बड़ा करें और स्टेटस टेक्स्ट बॉक्स के कॉन्टेंट को अपने क्लिपबोर्ड पर कॉपी करें. (ध्यान दें: दूसरे से दूसरे चरण में बताए गए मेन्यू का इस्तेमाल करने के बजाय, पेज पर getState() को कॉल करने का बटन डाला जा सकता है. साथ ही, मैसेज बॉक्स में मौजूदा स्थिति भी देखी जा सकती है.)
  5. जैसा कि यहां दिखाया गया है, पिछले चरण में कॉपी की गई स्टेट स्ट्रिंग को अपने कोड में "state" विकल्प पैरामीटर के लिए असाइन करें. draw() के तरीके में पास होने पर, चार्ट को शुरुआती स्टेटस के तौर पर शुरू किया जाएगा.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

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

नाम टाइप डिफ़ॉल्ट जानकारी
ऊंचाई संख्या 300 चार्ट की ऊंचाई पिक्सल में.
width संख्या 500 चार्ट की चौड़ाई पिक्सल में.
राज्य स्ट्रिंग कोई नहीं चार्ट के लिए शुरुआती डिसप्ले स्थिति. यह एक JSON JSON ऑब्जेक्ट है, जिसमें ज़ूम लेवल, चुने गए डाइमेंशन, बबल/इकाइयां, और राज्य की दूसरी जानकारी शामिल होती है. इसे सेट करने का तरीका जानने के लिए, शुरुआती स्थिति सेट करना देखें.
शोचार्टबटन बूलियन true False ऐसे बटन छिपाता है जो सबसे ऊपर दाएं कोने से चार्ट टाइप (बबल / लाइन / कॉलम) को कंट्रोल करते हैं.
शो हेडर बूलियन true 'गलत' से, इकाइयों के शीर्षक लेबल को छिपा दिया जाता है (यह डेटा टेबल के पहले कॉलम के लेबल से मिलता है).
ShowSelectListcomponents बूलियन true false से दिखने वाली इकाइयों की सूची छिप जाती है.
ShowSidePanel बूलियन true false से दाईं ओर का पैनल छिप जाता है.
ShowXMetricPicker बूलियन true false से x के लिए मेट्रिक पिकर छिप जाता है.
ShowYMetricPicker बूलियन true false से y के लिए मेट्रिक पिकर छिप जाता है.
ShowXScalePicker बूलियन true गलत, x के लिए स्केल पिकर को छिपाता है.
ShowYScalePicker बूलियन true false से y के लिए स्केल पिकर छिप जाता है.
बेहतर पैनल दिखाएं बूलियन true false से सेटिंग पैनल में विकल्प कंपार्टमेंट बंद हो जाता है.

तरीके

तरीका रिटर्न टाइप जानकारी
draw(data, options) कोई नहीं दिए गए विकल्पों वाला चार्ट बनाता है.
getState() स्ट्रिंग मोशनचार्ट की मौजूदा स्थिति दिखाता है, जिसे JSON स्ट्रिंग में क्रम से लगाया जाता है. चार्ट को यह स्थिति असाइन करने के लिए, draw() तरीके में state विकल्प को यह स्ट्रिंग असाइन करें. डिफ़ॉल्ट स्थिति का इस्तेमाल करने के बजाय, आम तौर पर स्टार्टअप पर कस्टम चार्ट की स्थिति बताने के लिए इसका इस्तेमाल किया जाता है.

इवेंट

नाम जानकारी प्रॉपर्टी
error जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है, तब सक्रिय किया जाता है. आईडी, मैसेज
तैयार चार्ट, मेथड कॉल के लिए तैयार है. अगर आपको ड्रॉ करने के बाद चार्ट और कॉल के तरीकों से इंटरैक्ट करना है, तो आपको ड्रॉ के तरीके को कॉल करने से पहले, इस इवेंट के लिए लिसनर सेट अप करना होगा. साथ ही, इवेंट के चालू होने के बाद ही उन्हें कॉल करना होगा. कभी नहीं
स्थिति में बदलाव उपयोगकर्ता ने किसी तरीके से चार्ट से इंटरैक्ट किया है. चार्ट की मौजूदा स्थिति जानने के लिए, getState() को कॉल करें. कभी नहीं

डेटा नीति

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

ज़रूरी जानकारी

Flash सुरक्षा सेटिंग के कारण, हो सकता है कि यह (और सभी Flash-आधारित विज़ुअलाइज़ेशन) किसी वेब सर्वर URL (उदा., http://www.myhost.com/myviz.html) के बजाय ब्राउज़र में किसी फ़ाइल स्थान से ऐक्सेस किए जाने पर ठीक से काम न करे. यह आम तौर पर, टेस्टिंग से जुड़ी समस्या होती है. MMedia की वेबसाइट पर बताया गया है कि इस समस्या को हल किया जा सकता है.