चार्ट प्रकार बनाना

इस पेज पर बताया गया है कि आप अपना चार्ट टाइप कैसे बना सकते हैं और उसे लोगों के लिए कैसे उपलब्ध करा सकते हैं.

दर्शक

इस पेज को मान लिया गया है कि आपने चार्ट का इस्तेमाल करना पेज पढ़ लिया है. यह यह भी मान लेता है कि आपको JavaScript और ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग की जानकारी है. वेब पर कई JavaScript ट्यूटोरियल उपलब्ध हैं.

चार्ट बनाना

आपकी बनाई गई JavaScript लाइब्रेरी से, उपयोगकर्ता को चार्ट दिखाए जाते हैं. चार्ट लाइब्रेरी बनाने का तरीका यहां बताया गया है:

1. अपने कोड के लिए कोई नेमस्पेस चुनें. आपका कोड, अन्य पेजों पर भी होस्ट किया जाएगा. इसलिए, नाम रखने से जुड़े विवादों से बचें.
2. अपना चार्ट ऑब्जेक्ट लागू करना. ऐसा JavaScript ऑब्जेक्ट लागू करें जो यह जानकारी देता हो:
   • कंस्ट्रक्टर,
   • आपके ऑब्जेक्ट को डीओएम एलिमेंट के अंदर ड्रॉ करने का draw() तरीका, जिसे कंस्ट्रक्टर को पास किया गया है,
   • क्लाइंट के इस्तेमाल के लिए कोई दूसरा वैकल्पिक मानक तरीका, जैसे कि getSelection(), और
   • ऐसा कोई भी कस्टम तरीका जिसे आपको अपने क्लाइंट को दिखाना है.
3. [ज़रूरी नहीं] ऐसे किसी भी इवेंट को लागू करें जिसे आप क्लाइंट के लिए ट्रिगर करना चाहते हैं.
4. अपने चार्ट के लिए दस्तावेज़ लिखें. अगर इसे डॉक्यूमेंट नहीं किया जाता है, तो हो सकता है कि लोग इसे एम्बेड न कर पाएं.
5. चार्ट गैलरी में अपना चार्ट पोस्ट करना.

नेमस्पेस चुनें

आपके चार्ट को ऐसे पेज पर एम्बेड किया जा सकता है जो दूसरे चार्ट या दूसरे JavaScript को होस्ट करता है. दूसरे कोड या सीएसएस क्लास के नामों से नाम आपस में मेल न खाने के लिए, आपको अपने चार्ट कोड के लिए एक यूनीक नेमस्पेस चुनना चाहिए. नेमस्पेस के लिए एक अच्छा विकल्प वह यूआरएल होता है जिसका इस्तेमाल आप अपनी स्क्रिप्ट को होस्ट करने के लिए करेंगे (इसमें WWW और कोई भी एक्सटेंशन शामिल नहीं है). उदाहरण के लिए, अगर आपका चार्ट www.example.com पर पोस्ट किया जाएगा, तो आपको अपने यूनीक नेमस्पेस के तौर पर example का इस्तेमाल करना होगा. आपके पास अतिरिक्त सफ़िक्स जोड़ने का विकल्प है. इन्हें अलग करने के लिए, . मार्क, आपके चार्ट को और ग्रुप में करता है (Google के सभी चार्ट में नेमस्पेस google.visualization है). अपने चार्ट ऑब्जेक्ट को स्टोर करने के लिए, अपने नेमस्पेस ऑब्जेक्ट का इस्तेमाल करें. साथ ही, किसी ऐसे ग्लोबल वैरिएबल का इस्तेमाल करें जिसकी आपको ज़रूरत पड़ सकती है.

यहां MyTable नाम के चार्ट क्लास के साथ-साथ ज़रूरी ग्लोबल वैरिएबल को होल्ड करने के लिए नेमस्पेस ऑब्जेक्ट बनाने का एक उदाहरण दिया गया है:

// Namespace, implemented as a global variable.
var example = {};

// MyTable class constructor.
example.MyTable = function(container) {
  // ...
}

// MyTable.draw() method.
example.MyTable.prototype.draw = function(data, options) {
  // ...
}

सीएसएस के विवादों से बचना

अगर सीएसएस का इस्तेमाल किया जाता है, तो पक्का करें कि आपने ऐसे सीएसएस नियम न लिखें जो पेज के दूसरे चार्ट पर असर डाल सकते हों. उदाहरण के लिए, td {color: blue;} जैसे नियम का सुझाव नहीं दिया जाता है, क्योंकि इससे न सिर्फ़ आपके चार्ट में, बल्कि पेज पर मौजूद किसी भी अन्य <td> एलिमेंट पर असर पड़ेगा. इस समस्या से बचने का एक तरीका यह है कि आप अपने पूरे चार्ट को क्लास के नाम के साथ <div> में बंद कर दें. साथ ही, सीएसएस के सभी नियम सिर्फ़ उन एलिमेंट पर लागू करें जो उस क्लास के नाम वाले एलिमेंट से डिसेंडेंट हैं. उदाहरण के लिए, यह सीएसएस नियम सिर्फ़ उन <td> एलिमेंट पर असर डालेगा जिनमें ऐन्सेस्टर के तौर पर क्लास नाम "example" वाला एलिमेंट है.

td.example {color: blue;}

इसके बाद, अपने चार्ट को <div> में रैप करने के लिए, इनका इस्तेमाल किया जा सकता है :

<div class="example">
  ...
</div>

अपना चार्ट लागू करना

आपको अपने चार्ट को एक JavaScript ऑब्जेक्ट के तौर पर लागू करना होगा. यह तरीका, रेफ़रंस सेक्शन में बताए गए स्टैंडर्ड तरीकों की जानकारी दिखाता है. कंस्ट्रक्टर और आरेखण() तरीके दो ज़रूरी तरीके हैं. आप अपने उपयोगकर्ता को ऐसे दूसरे तरीके भी दिखा सकते हैं जो आपके चार्ट के हिसाब से सही हों. बस याद रखें कि उपयोग में आसान बेहतर है.

द कंस्ट्रक्टर

आपके चार्ट में एक ऐसा कंस्ट्रक्टर दिखना चाहिए, जो सिंगल पैरामीटर लेता है. एक DOM एलिमेंट जिसमें आपको अपना चार्ट ड्रॉ करना होता है. आम तौर पर, चार्ट बाद में इस्तेमाल करने के लिए, इस एलिमेंट की लोकल कॉपी को कंस्ट्रक्टर में सेव करते हैं:

function example.MyTable(container) {
  this.container = container
}

draw() तरीका

आपकी चार्ट क्लास में एक तरीका draw() होना चाहिए, जिसे आपकी चार्ट क्लास के प्रोटोटाइप में तय किया गया हो. draw() तरीके में दो पैरामीटर स्वीकार किए जाते हैं:

1. यह DataTable, जो डेटा को दिखने के लिए होल्ड करता है.
2. आपके चार्ट के लिए नाम/वैल्यू के विकल्पों वाला एक वैकल्पिक मैप. विकल्पों के नाम और वैल्यू के टाइप, आपके हिसाब से अपने चार्ट के लिए तय किए जाते हैं. उदाहरण के लिए, नीचे दिए गए हैलो चार्ट के उदाहरण में, चार्ट 'showLineNumber' नाम के विकल्प के साथ काम करता है. इस विकल्प की वैल्यू बूलियन टाइप है. अगर उपयोगकर्ता किसी विकल्प के लिए वैल्यू पास नहीं करता है, तो आपको हर विकल्प के लिए एक डिफ़ॉल्ट वैल्यू देनी चाहिए. यह पैरामीटर ज़रूरी नहीं है. इसलिए, अगर उपयोगकर्ता इस पैरामीटर में पास नहीं होता है, तो आपको सभी डिफ़ॉल्ट वैल्यू का इस्तेमाल करने के लिए भी तैयार रहना चाहिए (ज़्यादा जानकारी).

example.MyTable.prototype.draw = function(data, options) {
  // Process data and options and render output into the container element.
  ...
}

नमस्ते चार्ट!

यहां एक सामान्य चार्ट दिया गया है, जो DataTable डेटा को एचटीएमएल टेबल के तौर पर दिखाता है:

लागू करने का कोड यहां दिया गया है:

// Declare a unique namespace.
var example = {};

// Class constructor. Parameter container is a DOM elementon the client that
// that will contain the chart.
example.MyTable = function(container) {
  this.containerElement = container;
}

// Main drawing logic.
// Parameters:
//   data is data to display, type google.visualization.DataTable.
//   options is a name/value map of options. Our example takes one option.
example.MyTable.prototype.draw = function(data, options) {

  // Create an HTML table
  var showLineNumber = options.showLineNumber; // Boolean configuration option.

  var html = [];
  html.push('<table border="1">');

  // Header row
  html.push('<tr>');
  if (showLineNumber) {
    html.push('<th>Seq</th>');
  }
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    html.push('<th>' + this.escapeHtml(data.getColumnLabel(col)) + '</th>');
  }
  html.push('</tr>');

  for (var row = 0; row < data.getNumberOfRows(); row++) {
    html.push('<tr>');
    if (showLineNumber) {
      html.push('<td align="right">', (row + 1), '</td>');
    }

    for (var col = 0; col < data.getNumberOfColumns(); col++) {
      html.push(data.getColumnType(col) == 'number' ? '<td align="right">' : '<td>');
      html.push(this.escapeHtml(data.getFormattedValue(row, col)));
      html.push('</td>');
    }
    html.push('</tr>');
  }
  html.push('</table>');

  this.containerElement.innerHTML = html.join('');
}

// Utility function to escape HTML special characters
example.MyTable.prototype.escapeHtml = function(text) {
  if (text == null)
    return '';
  return text.replace(/&/g, '&').replace(/</g, '<')
      .replace(/>/g, '>').replace(/"/g, '"');
}

किसी वेब पेज में अपना चार्ट शामिल करना

पिछले चार्ट का इस्तेमाल करने के लिए, उसे ऐसी .js फ़ाइल में सेव करें जिसे आपके ब्राउज़र से ऐक्सेस किया जा सकता है. इसके बाद, अपनी JavaScript फ़ाइल पर ले जाने के लिए <script> सोर्स पैरामीटर को बदलकर, नीचे दिए गए कोड को सेव करें:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="mytablevis.js"></script>
    <script type="text/javascript">
      google.charts.load("current");

      // Set callback to run when API is loaded
      google.charts.setOnLoadCallback(drawVisualization);

      // Called when the Chart API is loaded.
      function drawVisualization() {

        // Create and populate a data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Daily Hours');
        data.addRows(5);
        data.setCell(0, 0, 'Work');
        data.setCell(0, 1, 11);
        // Add more data rows and cells here

        // Instantiate our table object.
        var vis = new example.MyTable(document.getElementById('mydiv'));

        // Draw our table with the data we created locally.
        vis.draw(data, {showLineNumber: true});
       }
   </script>
  <title>MyTable example page</title></head>
  <body>
    <div id="mydiv"></div>
    <p>This page demonstrates hosting a table visualization.</p>
  </body>
</html>

 

अपने इवेंट लागू करना

अगर आपको अपने चार्ट से काम के इवेंट ट्रिगर करने हैं, जैसे कि टाइमर इवेंट या क्लिक करने पर उपयोगकर्ता से शुरू किए गए इवेंट, तो आपको अपने इवेंट की जानकारी (नाम, भेजी जाने वाली प्रॉपर्टी वगैरह) के साथ, google.visualization.events.trigger फ़ंक्शन को कॉल करना होगा. इवेंट पेज पर जाकर, जानकारी देखी जा सकती है. इवेंट ऑब्जेक्ट में प्रॉपर्टी जोड़कर क्लाइंट को अपने इवेंट की जानकारी दी जा सकती है या अपने चार्ट पर किसी तरह का get...() तरीका दिखाया जा सकता है. साथ ही, क्लाइंट उस तरीके को कॉल करके इवेंट की जानकारी हासिल कर सकता है. दोनों ही मामलों में, अपने तरीकों या इवेंट प्रॉपर्टी के बारे में अच्छी तरह से बताएं.

दस्तावेज़ आपका चार्ट

अगर आप अपने चार्ट को ठीक से दस्तावेज़ नहीं करते हैं, तो हो सकता है कि आपको ज़्यादा उपयोगकर्ता नहीं मिलेंगे. नीचे दी गई जानकारी ज़रूर दस्तावेज़ करें:

• उन सभी तरीकों के बारे में बताएं जिनका इस्तेमाल किया जा सकता है. draw() तरीका सभी चार्ट के लिए आम है. हालांकि, हर चार्ट के अपने दूसरे तरीकों का इस्तेमाल किया जा सकता है. (आपको अपने कंस्ट्रक्टर को तब तक दस्तावेज़ करने की ज़रूरत नहीं होगी, जब तक कि उसका व्यवहार नॉन-स्टैंडर्ड तरीके से न हो.) आपको रेफ़रंस पेज पर जाकर, उन तरीकों की सूची मिल सकती है जिनका इस्तेमाल किया जा सकता है.
• उन सभी विकल्पों के बारे में बताएं जो आपके draw() तरीके में काम करते हैं. इसमें हर विकल्प का नाम, अनुमानित वैल्यू, और उसकी डिफ़ॉल्ट वैल्यू शामिल है.
• उन सभी इवेंट की जानकारी दें जिन्हें आपने ट्रिगर किया है. इसका मतलब है कि हर इवेंट का नाम और प्रॉपर्टी, और हर इवेंट कब ट्रिगर होता है.
• अपनी चार्ट लाइब्रेरी के उस यूआरएल की जानकारी दें जिसका इस्तेमाल क्लाइंट के <script> शामिल करने के स्टेटमेंट में किया जाना चाहिए. साथ ही, अपने दस्तावेज़ का यूआरएल दें.
• अपने चार्ट को पूरी तरह क्वालिफ़ाइड नाम दें.
• ऐसे सैंपल पेज बनाएं जो आपके चार्ट के साथ काम करने वाले विकल्पों, इवेंट, और कस्टम तरीकों के साथ उसे इस्तेमाल करने का तरीका दिखाते हों.
• अपने चार्ट की डेटा नीति के बारे में साफ़ तौर पर बताएं. ज़्यादातर चार्ट, ब्राउज़र में ही डेटा को प्रोसेस करते हैं. हालांकि, कुछ चार्ट, सर्वर को डेटा भेज सकते हैं. जैसे, किसी चार्ट या मैप की इमेज बनाने के लिए. अगर किसी सर्वर को डेटा भेजा जाता है, तो:
  • साफ़ तौर पर बताएं कि कौनसा डेटा भेजा जाए.
  • ध्यान दें कि डेटा, सर्वर पर कब तक सेव रहेगा.
  • दस्तावेज़ बनाएं कि किन इकाइयों के पास डेटा का ऐक्सेस होगा. उदाहरण के लिए, कंपनी XYZ वगैरह.
  • तय करें कि डेटा लॉग किया जाएगा या नहीं और कितने समय तक.

आपका दस्तावेज़ उसी जगह पर होस्ट किया जाएगा जहां आपका चार्ट कोड है (नीचे अपना चार्ट गैलरी में सबमिट करना देखें).

गैलरी में अपना चार्ट सबमिट करना

अपना चार्ट लिख लेने के बाद, उसे हमारी गैलरी के "अतिरिक्त चार्ट" सेक्शन में पोस्ट करने के लिए सबमिट करें. चार्ट सबमिट करने का मतलब है कि आपको हमारे साथ एक कानूनी समझौता करना होगा, ताकि आप नुकसान पहुंचाने वाला सॉफ़्टवेयर न बनाने या उपयोगकर्ता के डेटा का गलत इस्तेमाल न करने के लिए सहमत हों. गैलरी सिर्फ़ उन चार्ट के लिए बने पॉइंटर की सूची है जिन्हें हमने बनाया है या जिनकी हमने समीक्षा कर ली है. आपके पास अपनी साइट पर JavaScript की असल लाइब्रेरी और दस्तावेज़ को होस्ट करने का विकल्प होता है. इसके अलावा, Google आपकी लाइब्रेरी और दस्तावेज़ को होस्ट कर सकता है. तय करें कि जब आप अपने चार्ट को गैलरी में पोस्ट करते हैं, तो क्या आप उसे होस्ट करना चाहते हैं.

समस्या का हल

अगर आपका कोड काम नहीं कर रहा है, तो यहां कुछ ऐसे तरीके दिए गए हैं जिनसे आपको अपनी समस्याएं हल करने में मदद मिल सकती है:

• टाइपिंग की गलतियां ढूंढें. याद रखें कि JavaScript एक केस-सेंसिटिव (बड़े और छोटे अक्षरों में अंतर) है.
• JavaScript डीबगर का इस्तेमाल करें Firefox में, आपके पास JavaScript कंसोल, वैंकमैन डीबगर या Firebug ऐड-ऑन का इस्तेमाल करने का विकल्प होता है. IE में, Microsoft स्क्रिप्ट डीबगर का इस्तेमाल किया जा सकता है.
• Google Chart API चर्चा समूह खोजें. अगर आपको अपने सवाल का जवाब देने वाली कोई पोस्ट नहीं मिलती है, तो समस्या को दिखाने वाले वेब पेज के लिंक के साथ अपना सवाल ग्रुप में पोस्ट करें.

स्थानीय भाषा में कॉन्टेंट उपलब्ध कराना

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