इस पेज पर चार्ट में इस्तेमाल किए गए अंदरूनी डेटा को दिखाने की सुविधा के बारे में बताया गया है. इसमें, DataTable और DataView क्लास का इस्तेमाल करके, चार्ट में डेटा भेजने और DataTable को इंस्टैंशिएट करने और पॉप्युलेट करने के कई तरीके बताए गए हैं.
कॉन्टेंट
- चार्ट में डेटा कैसे दिखाया जाता है
- मेरे चार्ट में किस टेबल स्कीमा का इस्तेमाल होता है?
- DataTables और DataViews
- DataTable बनाना और उसे पॉप्युलेट करना
- dataTableToCsv()
- ज़्यादा जानकारी
चार्ट में डेटा कैसे दिखाया जाता है
सभी चार्ट अपना डेटा एक टेबल में सेव करते हैं. यहां अपने-आप भरी गई दो कॉलम वाली डेटा टेबल की जानकारी दी गई है:
इंडेक्स: 0 |
इंडेक्स: 1 टाइप: संख्या लेबल: 'घंटे हर दिन' |
|---|---|
| 'ऑफ़िस' | 11 |
| 'खाना' | 2 |
| 'यात्रा' | 2 |
| 'टीवी देखें' | 2 |
| 'नींद' | 7 |
डेटा को पंक्ति, कॉलम) वाले सेल में सेव किया जाता है, जहां पंक्ति शून्य पर आधारित पंक्ति इंडेक्स है और कॉलम शून्य पर आधारित कॉलम इंडेक्स या खास आईडी है जिसे आप तय कर सकते हैं.
यहां टेबल के साथ काम करने वाले एलिमेंट और प्रॉपर्टी की ज़्यादा सूची दी गई है. ज़्यादा जानकारी के लिए, कंस्ट्रक्टर के JavaScript लिटरल पैरामीटर का फ़ॉर्मैट देखें:
- टेबल - कॉलम और पंक्तियों की श्रेणी के साथ-साथ, आर्बिट्रेरी नाम/वैल्यू पेयर का एक वैकल्पिक मैप होता है, जिसे असाइन किया जा सकता है. फ़िलहाल, टेबल में टेबल-लेवल की प्रॉपर्टी का इस्तेमाल नहीं किया जाता है.
- कॉलम - हर कॉलम एक ज़रूरी डेटा टाइप के साथ-साथ वैकल्पिक स्ट्रिंग लेबल, आईडी, पैटर्न, और नाम/वैल्यू प्रॉपर्टी का मैप दिखाता है. लेबल, उपयोगकर्ता के लिए आसान स्ट्रिंग है, जिसे चार्ट में दिखाया जा सकता है. आईडी, एक वैकल्पिक आइडेंटिफ़ायर है जिसे कॉलम इंडेक्स की जगह इस्तेमाल किया जा सकता है. कॉलम को कोड में शून्य-आधारित इंडेक्स या वैकल्पिक आईडी से पहचाना जा सकता है. इस्तेमाल किए जा सकने वाले डेटा टाइप की सूची के लिए
DataTable.addColumn()देखें. - पंक्तियां - पंक्ति, सेल की श्रेणी होती है. साथ ही, आप आर्बिट्रेरी नाम/वैल्यू पेयर का कोई वैकल्पिक मैप भी देते हैं जिसे आप असाइन कर सकते हैं.
- सेल - हर सेल में एक ऑब्जेक्ट होता है, जिसमें कॉलम के प्रकार का एक वास्तविक मान होता है. साथ ही, यह आपके दिए गए मान का एक वैकल्पिक स्ट्रिंग-फ़ॉर्मैट वाला वर्शन होता है. उदाहरण के लिए, किसी संख्या वाले कॉलम को वैल्यू 7 और फ़ॉर्मैट की गई वैल्यू "सात" असाइन की जा सकती है.
मेरा चार्ट किस टेबल स्कीमा का इस्तेमाल करता है?
अलग-अलग चार्ट अलग-अलग फ़ॉर्मैट में टेबल का इस्तेमाल करते हैं: उदाहरण के लिए, एक पाई चार्ट में स्ट्रिंग कॉलम और संख्या कॉलम वाली दो कॉलम वाली टेबल की ज़रूरत होती है, जहां हर लाइन में एक स्लाइस होती है और पहला कॉलम स्लाइस लेबल होता है और दूसरा कॉलम स्लाइस का होता है. हालांकि, स्कैटर चार्ट में ऐसी टेबल होनी चाहिए जिसमें दो अंकों वाले कॉलम हों. यहां हर लाइन एक पॉइंट है और दो कॉलम, पॉइंट की X और Y वैल्यू हैं. आपको किस तरह के डेटा फ़ॉर्मैट की ज़रूरत है, यह जानने के लिए अपने चार्ट के दस्तावेज़ पढ़ें.
DataTables और DataViews
चार्ट डेटा टेबल को JavaScript में DataTable ऑब्जेक्ट
या DataView ऑब्जेक्ट से दिखाया जाता है. कुछ मामलों में, आपको DataTable का JavaScript लिटरल या JSON वर्शन दिख सकता है. उदाहरण के लिए, जब कोई चार्ट टूल टूल, डेटा के ज़रिए इंटरनेट पर या ChartWrapper के लिए इनपुट वैल्यू के तौर पर भेजा जाता है.
DataTable का इस्तेमाल
मूल डेटा टेबल बनाने के लिए किया जाता है. DataView एक सुविधा लाइन है, जो DataTable का रीड ओनली व्यू देती है. इसमें लिंक किए गए ओरिजनल डेटा में बदलाव किए बिना, पंक्ति या कॉलम को तुरंत छिपाने या उनका क्रम बदलने की सुविधा होती है. यहां दोनों कक्षाओं की तुलना की गई है:
| डेटा टेबल | डेटा व्यू |
|---|---|
| पढ़ें/लिखें | रीड-ओनली |
| खाली छोड़ा जा सकता है और फिर भरा जा सकता है | मौजूदा DataTable का रेफ़रंस है. स्क्रैच से पॉप्युलेट नहीं किया जा सकता; किसी मौजूदा DataTable के रेफ़रंस से इंस्टैंशिएट किया जाना चाहिए. |
| डेटा सेव करने की जगह लेता है. | यह डेटा, मौजूदा DataTable का रेफ़रंस है और इसमें जगह का इस्तेमाल नहीं किया जाता. |
| पंक्तियां, कॉलम, और डेटा जोड़ सकते हैं, उनमें बदलाव कर सकते हैं या उन्हें मिटा सकते हैं. साथ ही, सभी बदलाव लगातार होते रहते हैं. | दिए गए डेटा में बदलाव किए बिना, पंक्तियों को क्रम से लगाया जा सकता है या फ़िल्टर किया जा सकता है. पंक्तियों और कॉलम को बार-बार छिपाया और दिखाया जा सकता है. |
| क्लोन किया जा सकता है | व्यू का DataTable वर्शन दिखाया जा सकता है |
| स्रोत डेटा है; इसमें संदर्भ नहीं हैं | DataTable के लिए एक लाइव संदर्भ; DataTable डेटा में कोई भी बदलाव व्यू में तुरंत दिखाई देता है. |
| डेटा सोर्स के तौर पर, इसे चार्ट में पास किया जा सकता है | डेटा सोर्स के तौर पर, इसे चार्ट में पास किया जा सकता है |
| कैलकुलेटेड कॉलम काम नहीं करते | यह आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए कॉलम के साथ काम करता है. ये कॉलम, अन्य कॉलम को मिलाकर या उनमें बदलाव करके, आपको तेज़ी से कैलकुलेट किए गए वैल्यू वाले कॉलम होते हैं. |
| कोई पंक्ति या कॉलम छिपाना नहीं | चुने गए कॉलम को छिपाया या दिखाया जा सकता है |
बनाना और डेटाटेबल में डेटा भरना
DataTable बनाने और उसे पॉप्युलेट करने के कई तरीके हैं:
- नई DataTable बनाएं, फिर addColumn()/addRows()/addRow()/setCell() को कॉल करें
- arrayToDataTable()
- JavaScript लिटरल शुरू करने वाला
- डेटा सोर्स क्वेरी भेजना
खाली DataTable + addColumn()/addRows()/addRow()/setCell()
चरण:
- नए
DataTableको इंस्टैंशिएट करें - कॉलम जोड़ें
- एक या ज़्यादा पंक्तियां जोड़ें, वैकल्पिक रूप से डेटा से भरा हुआ. आप खाली पंक्तियां जोड़ सकते हैं और उन्हें बाद में पॉप्युलेट कर सकते हैं. आप अतिरिक्त पंक्तियां जोड़ या हटा सकते हैं या अलग-अलग सेल के मान बदल सकते हैं.
फ़ायदे:
- हर कॉलम का डेटा टाइप और लेबल तय किया जा सकता है.
- यह ब्राउज़र में टेबल जनरेट करने के लिए अच्छा है और इससे JSON लिटरल तरीके के मुकाबले टाइपिंग की गलतियां कम होती हैं.
नुकसान:
- यह वेब सर्वर पर प्रोग्राम के रूप में पेज जनरेट करते समय, किसी DataTable कंस्ट्रक्टर को पास करने के लिए, JSON लिटरल स्ट्रिंग बनाने जितना काम का नहीं है.
- यह ब्राउज़र की रफ़्तार पर निर्भर करता है. साथ ही, यह बड़ी टेबल वाली JSON लिटरल स्ट्रिंग की तुलना में धीमी हो सकती है. करीब 1,000 से ज़्यादा सेल.
उदाहरण:
यहां इस तकनीक के अलग-अलग वर्शन का इस्तेमाल करके एक ही डेटा टेबल बनाने के कुछ उदाहरण दिए गए हैं:
// ------- 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));
श्रेणी ToDataTable()
यह हेल्पर फ़ंक्शन एक ही कॉल का इस्तेमाल करके, 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 इंस्टेंस का सही जवाब मिलेगा. इस रिटर्न किए गए DataTable को, किसी भी अन्य 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(data), डेटा टेबल के डेटा वाली CSV स्ट्रिंग दिखाता है.
इस फ़ंक्शन में इनपुट, DataTable या DataView हो सकता है.
इसमें, सेल की फ़ॉर्मैटिंग की गई वैल्यू का इस्तेमाल किया जाता है. कॉलम लैब को अनदेखा किया जाता है.
मानक वर्ण एस्केप करने के मानक नियमों का इस्तेमाल करके "," और "\n" जैसे विशेष वर्णों को एस्केप किया जाता है.
नीचे दिया गया कोड आपके ब्राउज़र के '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>