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

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

दर्शक

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

चार्ट बनाना

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

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

सलाह

• अपने आईडीई (कोड एडिटर) में, अपने-आप पूरा होने की सुविधा चालू करने के लिए, goog.visualization एपीआई क्लास और तरीके की परिभाषाएं डाउनलोड की जा सकती हैं. http://www.google.com/uds/modules/gviz/gviz-api.js से फ़ाइल डाउनलोड करें और उसे अपने प्रोजेक्ट में सेव करें. ज़्यादातर आईडीई इसे अपने-आप इंडेक्स कर देंगे और अपने-आप पूरा होने की सुविधा चालू कर देंगे. हालांकि, आपका आईडीई अलग हो सकता है. ध्यान रखें कि हो सकता है कि फ़ाइल हमेशा अप-टू-डेट न हो. अप-टू-डेट एपीआई रेफ़रंस देखने के लिए, रेफ़रंस पेज देखें.

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

आपके चार्ट को ऐसे पेज पर एम्बेड किया जा सकता है जिसमें दूसरे चार्ट या दूसरी मिलती-जुलती 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 ऑब्जेक्ट के तौर पर लागू करना होगा. इसमें रेफ़रंस सेक्शन में बताए गए स्टैंडर्ड तरीके दिखते हैं. दो ज़रूरी तरीके, कंस्ट्रक्टर और Draw() मेथड हैं. अपने उपयोगकर्ता को ऐसे अन्य तरीके भी दिखाए जा सकते हैं जो आपके चार्ट के लिए सही हों. याद रखें कि इस्तेमाल करना आसान है.

कंस्ट्रक्टर

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

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 फ़ाइल में सेव करें. इसे आप ब्राउज़र से ऐक्सेस कर सकते हैं. इसके बाद, <script> सोर्स पैरामीटर को बदलकर, अपनी JavaScript फ़ाइल पर जाने के लिए यह कोड सेव करें:

<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 कंसोल, वैंकमैन डीबगर या फ़ायरबग ऐड-ऑन का इस्तेमाल किया जा सकता है. IE में, आप Microsoft Script डीबगर का इस्तेमाल कर सकते हैं.
• Google चार्ट API चर्चा समूह खोजें. अगर आपको ऐसी पोस्ट नहीं मिल रही है जिसमें आपके सवाल का जवाब है, तो अपने सवाल ग्रुप में पोस्ट करें. साथ ही, समस्या दिखाने वाले वेब पेज का लिंक भी दें.

स्थानीय भाषा के अनुसार

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