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

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

खास जानकारी

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

डेवलपर के लिए नोट: फ़्लैश सुरक्षा सेटिंग की वजह से, यह (और सभी फ़्लैश-आधारित विज़ुअलाइज़ेशन) वेब सर्वर यूआरएल (जैसे, 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);

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

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

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

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

  1. एक चालू चार्ट खोलें और वे सेटिंग सेट करें, जिन्हें आप कैप्चर करना चाहते हैं. ऐसी सेटिंग जो तय की जा सकती हैं कि उनमें ओपैसिटी लेवल, ज़ूमिंग, और लॉग बनाम लीनियर स्केलिंग शामिल है या नहीं.
  2. चार्ट के नीचे दाएं कोने में मौजूद पाना चिह्न पर क्लिक करके सेटिंग पैनल खोलें.
  3. किसी सेट में Advanced पैनल जोड़ने के लिए, सबसे नीचे बाएं कोने में मौजूद Advanced लिंक पर क्लिक करें.
  4. Advanced पैनल को बड़ा करें और State टेक्स्ट बॉक्स के कॉन्टेंट को अपने क्लिपबोर्ड पर कॉपी करें. (ध्यान दें: दूसरे से चौथे चरण में बताए गए मेन्यू का इस्तेमाल करने के बजाय, पेज पर ऐसा बटन डाला जा सकता है जो getState() को कॉल करता हो और मैसेज बॉक्स में मौजूदा स्थिति दिखाता हो.
  5. यहां बताए गए तरीके से, पिछले चरण में कॉपी की गई राज्य स्ट्रिंग को अपने कोड में "स्टेट" विकल्प पैरामीटर में असाइन करें. 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 पिक्सल में चार्ट की ऊंचाई.
चौड़ाई नंबर 500 पिक्सल में चार्ट की चौड़ाई.
state स्ट्रिंग कुछ नहीं चार्ट के दिखने की शुरुआती स्थिति. यह एक सीरियल नंबर वाला JSON ऑब्जेक्ट है. इससे ज़ूम लेवल, चुने गए डाइमेंशन, चुने गए बबल/इकाइयों, और अन्य स्थितियों की जानकारी मिलती है. इसे सेट करने का तरीका जानने के लिए, शुरुआती स्थिति देखें.
showChartButtons boolean सही 'गलत है' पर क्लिक करने से, सबसे ऊपर दाएं कोने में मौजूद चार्ट टाइप (बबल / लाइन / कॉलम) को कंट्रोल करने वाले बटन छिप जाते हैं.
showHeader boolean सही false से इकाइयों के टाइटल लेबल को छिपा दिया जाता है (डेटा टेबल के पहले कॉलम के लेबल से लिया जाता है).
showSelectListComponent boolean सही false, दिखाई देने वाली इकाइयों की सूची को छिपा देता है.
showSidePanel boolean सही false से दाएं पैनल को छिपा दिया जाता है.
showXMetricPicker boolean सही 'गलत' होने पर x के मेट्रिक पिकर को छिपा दिया जाता है.
showYMetricPicker boolean सही false से y के मेट्रिक पिकर को छिपा देता है.
showXScalePicker boolean सही false से x के स्केल पिकर को छिपा देता है.
showYScalePicker boolean सही false से y के लिए स्केल पिकर को छिपा देता है.
showAdvancedPanel boolean सही 'गलत है' चुनने पर, सेटिंग पैनल में विकल्पों का कंपार्टमेंट बंद हो जाता है.

तरीके

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

इवेंट

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

डेटा नीति

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

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

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