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

खास जानकारी

एक टेबल जिसे क्रम से लगाया जा सकता है और पेज पर जोड़ा जा सकता है. टेबल सेल को फ़ॉर्मैट की स्ट्रिंग का इस्तेमाल करके या एचटीएमएल को सीधे सेल वैल्यू के तौर पर शामिल करके फ़ॉर्मैट किया जा सकता है. संख्या वाली वैल्यू दाईं ओर अलाइन होती हैं; बूलियन वैल्यू, सही के निशान के तौर पर दिखती हैं. उपयोगकर्ता, कीबोर्ड या माउस की मदद से एक लाइन चुन सकते हैं. उपयोगकर्ता, कॉलम हेडर पर क्लिक करके पंक्तियों को क्रम से लगा सकते हैं. उपयोगकर्ता के स्क्रोल करने पर हेडर लाइन फ़िक्स रहती है. टेबल, उपयोगकर्ता के इंटरैक्शन से जुड़े कई इवेंट को सक्रिय करती है.

उदाहरण

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

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

लोड हो रहा है

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

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

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

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

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

DataTable को एक संबंधित HTML टेबल में बदला जाता है. साथ ही, DataTable में मौजूद हर लाइन/कॉलम को एचटीएमएल टेबल की पंक्ति/कॉलम में बदला जाता है. हर कॉलम एक ही तरह के डेटा का होना चाहिए. साथ ही, सभी स्टैंडर्ड विज़ुअलाइज़ेशन डेटा टाइप (स्ट्रिंग, बूलियन, नंबर वगैरह) इस्तेमाल किए जा सकते हैं.

कस्टम प्रॉपर्टी

DataTable के setProperty() तरीके का इस्तेमाल करके, डेटा टेबल एलिमेंट में नीचे दी गई कस्टम प्रॉपर्टी असाइन की जा सकती हैं.

प्रॉपर्टी का नाम इस पर लागू होता है जानकारी
कक्षा का नाम सेल किसी अलग सेल को असाइन करने के लिए स्ट्रिंग क्लास का नाम. हर सेल को सीएसएस स्टाइल असाइन करने के लिए, इसका इस्तेमाल करें.
शैलीकृत करें सेल सेल को इनलाइन असाइन करने के लिए स्टाइल स्ट्रिंग. यह उस सेल पर लागू सीएसएस क्लास की स्टाइल को बदल देगा. इस तरीके का इस्तेमाल करने के लिए, आपको allowHtml=true प्रॉपर्टी को सेट करना होगा. उदाहरण: 'border: 1px solid green;'.

उदाहरण

dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});

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

नाम
allowHtml

अगर इस नीति को 'सही है' पर सेट किया जाता है, तो एचटीएमएल टैग वाले सेल की फ़ॉर्मैटिंग की गई वैल्यू को एचटीएमएल के तौर पर रेंडर किया जाएगा. अगर यह नीति 'गलत है' पर सेट है, तो ज़्यादातर कस्टम फ़ॉर्मैटर ठीक से काम नहीं करेंगे.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
वैकल्पिक वैकल्पिक पंक्ति शैली

इससे तय होता है कि रंग बदलने की अलग-अलग शैली असाइन की जाएगी जो कि विषम और सम पंक्तियों को असाइन की जाएगी.

टाइप: बूलियन
डिफ़ॉल्ट: true
cssClassName

एक ऐसा ऑब्जेक्ट जिसमें हर प्रॉपर्टी के नाम, टेबल के एलिमेंट के बारे में बताते हैं और प्रॉपर्टी की वैल्यू एक स्ट्रिंग होती है. इससे, टेबल के उस एलिमेंट को असाइन करने के लिए क्लास तय होती है. अपनी टेबल के खास एलिमेंट के लिए कस्टम सीएसएस असाइन करने के लिए, इस प्रॉपर्टी का इस्तेमाल करें. इस प्रॉपर्टी का इस्तेमाल करने के लिए एक ऑब्जेक्ट असाइन करें, जहां प्रॉपर्टी के नाम से टेबल एलिमेंट की जानकारी मिलती है, और प्रॉपर्टी की वैल्यू एक स्ट्रिंग है. इससे, उस एलिमेंट को क्लास का नाम असाइन किया जाता है. इसके बाद, आपको अपने पेज पर कक्षा के लिए सीएसएस स्टाइल तय करनी होगी. प्रॉपर्टी के इन नामों का इस्तेमाल किया जा सकता है:

  • headerRow - टेबल हेडर की पंक्ति में क्लास का नाम असाइन करता है (<tr> एलिमेंट).
  • tableRow - बिना हेडर वाली पंक्तियों (<tr> एलिमेंट) के लिए क्लास का नाम असाइन करता है.
  • oddTableRow - विषम तालिका पंक्तियों को कक्षा का नाम असाइन करता है (<tr> एलिमेंट). ध्यान दें: ऑल्टरनेटिंग RowStyle विकल्प 'सही' पर सेट होना चाहिए.
  • selectedTableRow - चुनी गई टेबल की पंक्ति (<tr> एलिमेंट) के लिए क्लास का नाम असाइन करता है.
  • hoverTableRow - कर्सर को टेबल की उस पंक्ति में क्लास का नाम देता है (<tr> एलिमेंट).
  • headerCell - हेडर पंक्ति के सभी सेल में क्लास का नाम असाइन करता है (<td> एलिमेंट).
  • tableCell - सभी बिना हेडर वाली टेबल सेल में क्लास का नाम असाइन करता है (<td> एलिमेंट).
  • rowNumberCell - पंक्ति संख्या वाले कॉलम के सेल के लिए क्लास का नाम देता है (<td> एलिमेंट). ध्यान दें: showRowNumber का विकल्प, 'सही है' पर सेट होना चाहिए.

उदाहरण: var cssClassNames = {headerRow: 'bigAndBoldClass',
hoverTableRow: 'highlightClass'};

ध्यान दें: सीएसएस में, कुछ एलिमेंट दूसरे एलिमेंट को बदल देते हैं. उदाहरण के लिए, अगर <tr> एलिमेंट के लिए बैकग्राउंड का रंग और <td> एलिमेंट के लिए बैकग्राउंड का रंग तय किया जाता है, तो हो सकता है कि बैकग्राउंड के रंग को प्राथमिकता दी जाए. किसी भी तरह के टकराव से बचने के लिए, cssClassNames में काम की सभी सीएसएस स्टाइल तय करें.

टाइप: ऑब्जेक्ट
डिफ़ॉल्ट: शून्य
पहली पंक्ति नंबर

dataTable में पहली लाइन की लाइन संख्या. इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब showRowNumber 'सही' होता है.

टाइप: नंबर
डिफ़ॉल्ट: 1
फ़्रीज़ किए गए स्तंभ

बाईं ओर से उन स्तंभों की संख्या जिन्हें फ़्रीज़ किया जाएगा. बाकी के कॉलम हॉरिज़ॉन्टल रूप से स्क्रोल करते समय, बनी रहेंगी. अगर showRowNumber, false है, तो frozenColumns को 0 पर सेट करने पर वही दिखेगा जो null पर सेट है. हालांकि, अगर showRowNumber को true पर सेट किया गया है, तो पंक्ति की संख्या वाले कॉलम को फ़्रीज़ कर दिया जाएगा.

टाइप: नंबर
डिफ़ॉल्ट: शून्य
ऊंचाई

विज़ुअलाइज़ेशन के कंटेनर एलिमेंट की ऊंचाई सेट करता है. स्टैंडर्ड एचटीएमएल यूनिट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, '100 पिक्सल', '80em', '60'. अगर कोई इकाई तय नहीं की जाती है, तो यह माना जाता है कि संख्या पिक्सल है. अगर इसके बारे में नहीं बताया गया है, तो ब्राउज़र अपने-आप टेबल में फ़िट होने के लिए, ऊंचाई को अडजस्ट कर देगा. इससे, प्रोसेस में जितना हो सके उतना छोटा किया जा सकेगा. अगर ज़रूरी ऊंचाई से छोटा सेट किया जाता है, तो टेबल में एक वर्टिकल स्क्रोल बार जुड़ जाएगा. हेडर लाइन भी फ़्रीज़ हो गई है. अगर इसे '100%' पर सेट किया जाता है, तो कंटेनर एलिमेंट में टेबल को ज़्यादा से ज़्यादा बड़ा किया जा सकता है.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप
पेज

डेटा से पेजिंग को चालू करने का तरीका जानें. इनमें से कोई एक स्ट्रिंग वैल्यू चुनें:

  • 'चालू करें' - टेबल में पेज-फ़ॉरवर्ड और पेज-बैक बटन शामिल होंगे. इन बटन पर क्लिक करने से पेज पर कई तरह की कार्रवाइयां की जा सकती हैं और दिखाए गए पेज में बदलाव किया जा सकता है. हो सकता है कि आप pageSize विकल्प को भी सेट करना चाहें.
  • 'इवेंट' - टेबल में पेज-फ़ॉरवर्ड और पेज-बैक बटन शामिल होंगे. हालांकि, उन पर क्लिक करने से 'पेज' इवेंट ट्रिगर होगा और दिखने वाला पेज नहीं बदलेगा. इस विकल्प का इस्तेमाल तब किया जाना चाहिए, जब कोड अपने पेज के टर्निंग लॉजिक को लागू करता है. पेजिंग इवेंट को मैन्युअल तरीके से मैनेज करने के उदाहरण के लिए, TableQueryWrapper का उदाहरण देखें.
  • 'बंद करें' - [डिफ़ॉल्ट] पेजिंग की सुविधा नहीं है.
  • टाइप: स्ट्रिंग
    डिफ़ॉल्ट: 'बंद करें'
पेज का साइज़

पेज विकल्प के साथ पेजिंग चालू करने पर, हर पेज पर पंक्तियों की संख्या.

टाइप: नंबर
डिफ़ॉल्ट: 10
पेजिंगबटन

पेजिंग बटन के लिए एक खास विकल्प सेट करता है. विकल्प इस प्रकार हैं:

  • 'दोनों' - पिछला और अगला बटन चालू करें
  • 'पीछे जाएं' - सिर्फ़ पिछला बटन चालू है
  • 'अगला' - सिर्फ़ अगला बटन चालू है
  • 'ऑटो' - बटन मौजूदा पेज के मुताबिक चालू होते हैं. पहले पेज पर, सिर्फ़ अगली स्क्रीन दिखती है. आखिरी पेज पर सिर्फ़ पिछला दिखाया गया है. अगर ऐसा नहीं है, तो दोनों चालू हो जाते हैं.
  • संख्या - पेजिंग बटन दिखाने की संख्या. यह साफ़ संख्या, pageSize के कंप्यूट किए गए नंबर को बदल देगी.
टाइप: स्ट्रिंग या संख्या
डिफ़ॉल्ट: 'अपने-आप'
rtlTable

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

टाइप: बूलियन
डिफ़ॉल्ट: गलत
स्क्रोललेफ़्टस्टार्ट पोज़िशन

अगर टेबल में हॉरिज़ॉन्टल स्क्रोल बार है, तो पिक्सल में, हॉरिज़ॉन्टल स्क्रोलिंग पोज़िशन सेट करता है. इसकी वजह यह है कि आपने चौड़ाई की प्रॉपर्टी सेट कर दी है. टेबल के सबसे बाईं ओर मौजूद कॉलम के हिसाब से, स्क्रोल करने पर कई पिक्सल दिखेंगे.

टाइप: नंबर
डिफ़ॉल्ट: 0
ShowRowNumber

अगर इस वैल्यू को 'सही है' पर सेट किया जाता है, तो टेबल के पहले कॉलम में पंक्ति की संख्या दिखती है.

टाइप: बूलियन
डिफ़ॉल्ट: गलत
क्रम से लगाएं

जब उपयोगकर्ता किसी कॉलम के शीर्षक पर क्लिक करता है, तब कॉलम को क्रम से लगाने का तरीका क्या है. अगर क्रम से लगाने की सुविधा चालू है, तो SortAscending और SortColumn प्रॉपर्टी भी सेट करें. इनमें से कोई एक स्ट्रिंग वैल्यू चुनें:

  • 'चालू है' - [डिफ़ॉल्ट] उपयोगकर्ता, कॉलम के हेडर पर क्लिक करके, उन्हें क्लिक किए गए कॉलम के हिसाब से क्रम में लगा सकते हैं. जब उपयोगकर्ता कॉलम हेडर पर क्लिक करेंगे, तो लाइनें अपने-आप क्रम से लग जाएंगी. साथ ही, एक 'क्रम से लगाएं' इवेंट ट्रिगर हो जाएगा.
  • 'इवेंट' - जब उपयोगकर्ता कॉलम हेडर पर क्लिक करेंगे, तो 'क्रम से लगाएं' इवेंट ट्रिगर होगा, लेकिन पंक्तियां अपने-आप क्रम से नहीं लगी होंगी. इस विकल्प का इस्तेमाल तब किया जाना चाहिए, जब पेज अपना क्रम लागू करता है. इवेंट को मैन्युअल तरीके से मैनेज करने के उदाहरण के लिए, TableQueryWrapper का उदाहरण देखें.
  • 'बंद है' - किसी कॉलम हेडर पर क्लिक करने से कोई असर नहीं पड़ता.
टाइप: स्ट्रिंग
डिफ़ॉल्ट: 'चालू करें'
बढ़ते क्रम में लगाएं

क्रम में वह क्रम जिसमें शुरुआती कॉलम को क्रम से लगाया गया है. बढ़ते क्रम में सही, घटते क्रम में गलत. अगर sortColumn बताया नहीं गया है, तो अनदेखा कर दिया जाता है.

टाइप: बूलियन
डिफ़ॉल्ट: true
क्रम से लगाने का कॉलम

डेटा टेबल में किसी कॉलम का इंडेक्स, जिससे टेबल को शुरुआत में क्रम से लगाया जाता है. कॉलम को एक छोटे से ऐरो की मदद से, क्रम से लगाने का क्रम दिखाया जाएगा.

टाइप: नंबर
डिफ़ॉल्ट: -1
आरंभ पेज

दिखाया जाने वाला पहला टेबल पेज. इसका इस्तेमाल सिर्फ़ तब किया जाता है, जब page मोड चालू/इवेंट पर हो.

टाइप: नंबर
डिफ़ॉल्ट: 0
width

विज़ुअलाइज़ेशन के कंटेनर एलिमेंट की चौड़ाई सेट करता है. स्टैंडर्ड एचटीएमएल यूनिट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, '100 पिक्सल', '80em', '60'. अगर कोई इकाई तय नहीं की जाती है, तो यह माना जाता है कि संख्या पिक्सल है. अगर वैल्यू तय नहीं की गई है, तो टेबल में टेबल को फ़िट करने के लिए, ब्राउज़र अपने-आप चौड़ाई में बदलाव कर देगा. अगर टेबल की चौड़ाई को ज़रूरत से कम पर सेट किया जाता है, तो टेबल को हॉरिज़ॉन्टल स्क्रोल बार दिखेगा. अगर इसे '100%' पर सेट किया जाता है, तो टेबल कंटेनर के एलिमेंट के दायरे को ज़्यादा से ज़्यादा बढ़ा देगी.

टाइप: स्ट्रिंग
डिफ़ॉल्ट: अपने-आप

तरीके

तरीका
draw(data, options)

टेबल ड्रॉ करता है.

सामान लौटाने का टाइप: कोई नहीं
getSelection()

स्टैंडर्ड getSelection लागू करना. चुने गए एलिमेंट, पंक्ति वाले सभी एलिमेंट हैं. चुनी गई एक से ज़्यादा पंक्तियां दिख सकती हैं. चुने गए ऑब्जेक्ट में लाइन, ओरिजनल डेटा टेबल के बारे में बताती है, भले ही उपयोगकर्ता इंटरैक्शन (क्रम से लगाना, पेजिंग वगैरह) किसी भी तरह से हो.

ध्यान दें कि चुने गए टॉगल पर: किसी सेल पर पहली बार क्लिक करने से उस पर क्लिक हो जाता है; सेल पर दोबारा क्लिक करने से यह आइटम चुन लिया जाता है. इससे, चुने गए इवेंट की जानकारी मिलती है. हालांकि, चुने गए ऑब्जेक्ट में कोई आइटम नहीं चुना जाता है.

लौटाए गए आइटम का टाइप: चुने गए एलिमेंट की कैटगरी
getSortInfo()

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

अगर आपने कोड में डेटा को क्रम से नहीं लगाया है या उपयोगकर्ता ने कोड चुनकर डेटा को क्रम से नहीं लगाया है, तो क्रम से लगाने के लिए डिफ़ॉल्ट वैल्यू दिखेगी.

सामान लौटाने का तरीका: इस ऑब्जेक्ट के साथ कोई ऑब्जेक्ट:
  • column - (कॉलम) उस कॉलम का इंडेक्स जिसके हिसाब से टेबल को क्रम से लगाया जाता है.
  • ascending - (बूलियन) सही है अगर क्रम बढ़ते जा रहा है, गलत होने पर गलत है.
  • sortedIndexes - (संख्या वाली श्रेणी) संख्याओं की श्रेणी, जहां श्रेणी में मौजूद इंडेक्स, क्रम से लगाई गई पंक्ति की संख्या (दिखाई देने वाली टेबल में) होती है और वैल्यू, डेटा के बुनियादी (बिना क्रम वाली) टेबल में उस पंक्ति की इंडेक्स होती है.
setSelection(selection)

स्टैंडर्ड setSelection() लागू करना, लेकिन सिर्फ़ सभी पंक्तियां या कई पंक्तियां चुनी जा सकती हैं. चुने गए ऑब्जेक्ट में लाइन, ओरिजनल डेटा टेबल के बारे में बताती है, भले ही उपयोगकर्ता इंटरैक्शन (क्रम से लगाना, पेजिंग वगैरह) कोई भी हो.

सामान लौटाने का टाइप: कोई नहीं
clearChart()

चार्ट साफ़ करता है और अपने सभी आवंटित संसाधन रिलीज़ करता है.

सामान लौटाने का टाइप: कोई नहीं

इवेंट

नाम
चुनें

स्टैंडर्ड चुनने वाला इवेंट, लेकिन सिर्फ़ पूरी पंक्तियां चुनी जा सकती हैं.

प्रॉपर्टी: कोई नहीं
पेज

तब ट्रिगर होता है, जब उपयोगकर्ता किसी पेज के नेविगेशन बटन पर क्लिक करते हैं.

प्रॉपर्टी: page: संख्या. उस पेज का इंडेक्स जिस पर जाना है.
क्रम से लगाएं

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

प्रॉपर्टी: नीचे दी गई प्रॉपर्टी के साथ ऑब्जेक्ट:
  • column - (कॉलम) उस कॉलम का इंडेक्स जिसके हिसाब से टेबल को क्रम से लगाया जाता है.
  • ascending - (बूलियन) सही है अगर क्रम बढ़ते जा रहा है, गलत होने पर गलत है.
  • sortedIndexes - (न्यूमेरिक अरे) संख्याओं की श्रेणी, जहां कैटगरी में मौजूद पंक्ति, (क्रम से दिखने वाली टेबल में) दी गई पंक्ति की संख्या होती है और उसकी वैल्यू डेटा टेबल में (बिना क्रम में लगाई गई) उस पंक्ति की इंडेक्स होती है.
तैयार

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

प्रॉपर्टी: कोई नहीं

फ़ॉर्मैट

ध्यान दें: टेबल विज़ुअलाइज़ेशन में ऐसे फ़ॉर्मैटर ऑब्जेक्ट का सेट होता है जिन्हें सामान्य फ़ॉर्मैटर की जगह लागू किया गया है. इनका इस्तेमाल इसी तरीके से किया जाता है. हालांकि, इनका इस्तेमाल किसी भी विज़ुअलाइज़ेशन में किया जा सकता है.

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

टेबल फ़ॉर्मैट करने वाला टूल
टेबल का ऐरो फ़ॉर्मैट google.visualization.ArrowFormat
टेबल बार फ़ॉर्मैट google.visualization.BarFormat
टेबल के रंग का फ़ॉर्मैट google.visualization.ColorFormat
टेबलतारीख फ़ॉर्मैट google.विज़ुअलाइज़ेशन.तारीख का फ़ॉर्मैट
टेबल नंबर फ़ॉर्मैट google.visualization.NumberFormat
टेबल पैटर्न फ़ॉर्मैट google.visualization.PatternFormat

अहम जानकारी: फ़ॉर्मैट करने वाले लोग अक्सर अपने टेक्स्ट को फ़ॉर्मैट करने के लिए एचटीएमएल का इस्तेमाल करते हैं. इसलिए, आपको allowHtml विकल्प को true पर सेट करना चाहिए.

डेटा नीति

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