DataTables और DataViews

इस पेज पर चार्ट में इस्तेमाल किए जाने वाले इंटरनल डेटा के बारे में बताया गया है. साथ ही, डेटा को चार्ट में भेजने के लिए इस्तेमाल की जाने वाली DataTable और DataView क्लास के साथ-साथ, DataTable को इंस्टैंशिएट और भरने के कई तरीकों के बारे में भी बताया गया है.

विषय सूची

  1. चार्ट में डेटा को कैसे दिखाया जाता है
  2. मेरा चार्ट किस टेबल स्कीमा का इस्तेमाल करता है?
  3. DataTables और DataViews
  4. डेटाटेबल बनाना और अपने-आप जानकारी भरना
    1. नई DataTable बनाएं, फिर addColumn()/addROWS()/addRow()/setCell() को कॉल करें
    2. arrayToDataTable()
    3. JavaScript का लिटरल इनिशलाइज़र
    4. डेटा सोर्स क्वेरी भेजना
  5. dataTableToCsv()
  6. ज़्यादा जानकारी

चार्ट में डेटा कैसे दिखाया जाता है

सभी चार्ट अपना डेटा एक टेबल में स्टोर करते हैं. यहां, अपने-आप भरी गई दो कॉलम वाली डेटा टेबल को आसान तरीके से दिखाया गया है:

इंडेक्स: 0
टाइप: स्ट्रिंग
लेबल: 'टास्क'

 इंडेक्स: 1
टाइप: संख्या
लेबल: 'हर दिन के घंटे'
'दफ़्तर' 11
'खाएं' 2
'यात्रा' 2
'टीवी देखें' 2
'नींद' 7

डेटा को (row, column) के तौर पर रेफ़र की गई सेल में सेव किया जाता है. यहां row, शून्य पर आधारित पंक्ति इंडेक्स है. वहीं, कॉलम की वैल्यू, शून्य पर आधारित कॉलम इंडेक्स या यूनीक आईडी है.

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

  • टेबल - कॉलम और पंक्तियों की एक कलेक्शन, साथ ही आपकी ओर से असाइन किए जा सकने वाले आर्बिट्रेरी नाम/वैल्यू पेयर का एक वैकल्पिक मैप. फ़िलहाल, चार्ट में टेबल-लेवल प्रॉपर्टी का इस्तेमाल नहीं होता.
  • कॉलम - हर कॉलम में एक ज़रूरी डेटा टाइप के साथ-साथ एक वैकल्पिक स्ट्रिंग लेबल, आईडी, पैटर्न, और आर्बिट्रेरी नाम/वैल्यू प्रॉपर्टी का मैप होता है. लेबल एक उपयोगकर्ता के लिए आसान स्ट्रिंग है, जिसे चार्ट से दिखाया जा सकता है; यह आईडी एक वैकल्पिक आइडेंटिफ़ायर है, जिसका इस्तेमाल कॉलम इंडेक्स की जगह किया जा सकता है. कॉलम को कोड में, शून्य-आधारित इंडेक्स या वैकल्पिक आईडी से रेफ़र किया जा सकता है. इस्तेमाल किए जा सकने वाले डेटा टाइप की सूची देखने के लिए, DataTable.addColumn() पर जाएं.
  • पंक्तियां - पंक्ति, सेल का कलेक्शन होती है. साथ ही, इसमें आर्बिट्रेरी नाम/वैल्यू पेयर का वैकल्पिक मैप होता है जिसे असाइन किया जा सकता है.
  • सेल - हर सेल एक ऑब्जेक्ट होता है, जिसमें कॉलम टाइप की असल वैल्यू होती है. साथ ही, आपकी दी गई वैल्यू का स्ट्रिंग के फ़ॉर्मैट वाला वैकल्पिक वर्शन भी होता है. उदाहरण के लिए: किसी संख्या वाले कॉलम को वैल्यू 7 और फ़ॉर्मैट की गई वैल्यू "सात" असाइन की जा सकती है. अगर फ़ॉर्मैट की गई वैल्यू दी जाती है, तो चार्ट में कैलकुलेशन और रेंडरिंग के लिए असल वैल्यू का इस्तेमाल किया जाएगा. हालांकि, ज़रूरत के हिसाब से फ़ॉर्मैट की गई वैल्यू दिख सकती है. उदाहरण के लिए, जब उपयोगकर्ता किसी पॉइंट पर कर्सर घुमाता है. हर सेल में आर्बिट्रेरी नाम/वैल्यू पेयर का एक वैकल्पिक मैप भी होता है.

मेरा चार्ट किस टेबल स्कीमा का इस्तेमाल करता है?

अलग-अलग चार्ट में अलग-अलग फ़ॉर्मैट की टेबल इस्तेमाल की जाती हैं: उदाहरण के लिए, पाई चार्ट में स्ट्रिंग कॉलम और नंबर वाले कॉलम वाली दो कॉलम वाली टेबल होनी चाहिए. इसमें हर लाइन में स्लाइस के बारे में जानकारी दी जाती है और पहला कॉलम स्लाइस का लेबल और दूसरे कॉलम में स्लाइस की वैल्यू होती है. हालांकि, स्कैटर चार्ट के लिए, दो अंकों वाले कॉलम वाली टेबल की ज़रूरत होती है. इसमें हर पंक्ति एक पॉइंट होती है और दो कॉलम में पॉइंट के X और Y वैल्यू होते हैं. यह जानने के लिए कि आपके चार्ट के लिए कौनसे डेटा फ़ॉर्मैट की ज़रूरत है, अपने चार्ट का दस्तावेज़ पढ़ें.

Dataटेबल और DataViews

चार्ट की डेटा टेबल को JavaScript में, DataTable ऑब्जेक्ट या DataView ऑब्जेक्ट के ज़रिए दिखाया जाता है. कुछ मामलों में, आपको इस्तेमाल की गई DataTable का JavaScript लिटरल या JSON वर्शन दिख सकता है. उदाहरण के लिए, जब किसी चार्ट टूल डेटा सोर्स से इंटरनेट पर डेटा भेजा जाता है या ChartWrapper के लिए संभावित इनपुट वैल्यू के तौर पर डेटा भेजा जाता है.

ओरिजनल डेटा टेबल बनाने के लिए, DataTable का इस्तेमाल किया जाता है. DataView एक सुविधा क्लास है, जो DataTable का रीड-ओनली व्यू देती है. इसमें लिंक किए गए ओरिजनल डेटा में बदलाव किए बिना, पंक्तियों या कॉलम को तेज़ी से छिपाने या उनका क्रम बदलने के तरीके होते हैं. यहां इन दोनों क्लास की तुलना की गई है:

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

Dataटेबल बनाने और अपने-आप जानकारी भरने की सुविधा

Dataटेबल बनाने और उसे अपने-आप भरने के कई अलग-अलग तरीके हैं:

खाली DataTable addColumn()/addROWS()/addRow()/setCell()

कदम:

  1. नया DataTable इंस्टैंशिएट करें
  2. कॉलम जोड़ें
  3. एक या उससे ज़्यादा लाइनें जोड़ें. हालांकि, ऐसा करना ज़रूरी नहीं है, क्योंकि यह डेटा अपने-आप भर जाती है. खाली पंक्तियां जोड़ी जा सकती हैं और उन्हें बाद में भरा जा सकता है. पंक्तियां अतिरिक्त पंक्तियां जोड़ी या हटाई भी जा सकती हैं. इसके अलावा, सेल की वैल्यू में अलग-अलग बदलाव भी किए जा सकते हैं.

फ़ायदे:

  • हर कॉलम के लिए, डेटा टाइप और लेबल तय किया जा सकता है.
  • इससे ब्राउज़र में टेबल जनरेट होती है. साथ ही, JSON लिटरल वाले तरीके से टाइप करने में होने वाली गड़बड़ियों की संभावना कम होती है.

नुकसान:

  • किसी वेब सर्वर पर प्रोग्राम के हिसाब से पेज जनरेट करते समय, DataTable कंस्ट्रक्टर में पास करने के लिए, JSON लिटरल स्ट्रिंग बनाने जितना काम का नहीं होता.
  • यह ब्राउज़र की स्पीड पर निर्भर करता है. साथ ही, यह बड़ी टेबल (करीब 1,000 से ज़्यादा सेल) वाली JSON लिटरल स्ट्रिंग से धीमा हो सकता है.

उदाहरण:

यहां इस तकनीक के अलग-अलग वर्शन का इस्तेमाल करके एक ही डेटा टेबल बनाने के कुछ उदाहरण दिए गए हैं:

// ------- Version 1------------
// Add rows   data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

arrayToDataTable()

यह हेल्पर फ़ंक्शन, सिंगल कॉल का इस्तेमाल करके, DataTable बनाता है और उसे अपने-आप भरता है.

फ़ायदे:

  • ब्राउज़र में बनाया गया बहुत आसान और पढ़ने में आसान कोड.
  • हर कॉलम का डेटा टाइप साफ़ तौर पर बताया जा सकता है या Google चार्ट को, पास किए गए डेटा के आधार पर डेटा टाइप का अनुमान लगाने दें.
    • किसी कॉलम के डेटा टाइप की जानकारी साफ़ तौर पर देने के लिए, हेडर वाली पंक्ति में type प्रॉपर्टी का इस्तेमाल करके कोई ऑब्जेक्ट डालें.
    • Google चार्ट, कॉलम लेबल के लिए स्ट्रिंग का इस्तेमाल करें, ताकि आप यह अनुमान लगा सकें कि डेटा किस तरह का है.

उदाहरण:

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.


var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

JavaScript लिटरल शुरुआत करने वाला

आपके पास अपने टेबल कंस्ट्रक्टर में, JavaScript का लिटरल ऑब्जेक्ट पास करने का विकल्प होता है. साथ ही, टेबल स्कीमा और वैकल्पिक रूप से डेटा भी तय किया जा सकता है.

फ़ायदे:

  • यह आपके वेब सर्वर पर डेटा जनरेट करते समय काम आता है.
  • बड़ी टेबल (करीब 1,000 से ज़्यादा सेल) के लिए, दूसरे तरीकों के मुकाबले तेज़ी से प्रोसेस होती है

नुकसान:

  • सिंटैक्स के लिए सही तरीका इस्तेमाल करना मुश्किल होता है. साथ ही, इसमें टाइपिंग की गलतियां भी रहती हैं.
  • इस कोड को पढ़ा नहीं जा सकता.
  • JSON से काफ़ी मिलता-जुलता है, लेकिन यह बिलकुल अलग है.

उदाहरण:

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

डेटा सोर्स क्वेरी भेजना

जब किसी चार्ट टूल डेटा सोर्स में क्वेरी भेजी जाती है, तो एक सही जवाब, DataTable इंस्टेंस होता है. इसके बाद मिले Dataटेबल को किसी भी दूसरे DataTable की तरह ही DataView में कॉपी, बदला या कॉपी किया जा सकता है.

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: '   response.getMessage()   ' '   response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

हेल्पर फ़ंक्शन google.visualization.dataTableToCsv(डेटा), डेटा टेबल के डेटा के साथ CSV स्ट्रिंग दिखाता है.

इस फ़ंक्शन के लिए इनपुट, DataTable या DataView हो सकता है.

यह सेल की फ़ॉर्मैट की गई वैल्यू का इस्तेमाल करता है. कॉलम लेबल को अनदेखा कर दिया जाता है.

"," और "\n" जैसे खास वर्णों को स्टैंडर्ड CSV एस्केपिंग नियमों का इस्तेमाल करके एस्केप किया गया है.

यह कोड आपके ब्राउज़र के JavaScript कंसोल में

Ramanujan,1729
Gauss,5050

दिखाएगा:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

ज़्यादा जानकारी