चार्ट बनाने की तकनीकें

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

विषय सूची

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. ज़्यादा जानकारी

chart.draw()

यह बुनियादी तरीका है, जिसके बारे में इस दस्तावेज़ के हैलो चार्ट! उदाहरण में बताया गया है. यहां बुनियादी चरण दिए गए हैं:

  1. gstatic लाइब्रेरी लोडर, Google विज़ुअलाइज़ेशन, और चार्ट लाइब्रेरी लोड करें
  2. अपना डेटा तैयार करें
  3. चार्ट के सभी विकल्प तैयार करना
  4. पेज कंटेनर एलिमेंट के हैंडल में पास होते हुए, चार्ट क्लास को इंस्टैंशिएट करें.
  5. कोई भी चार्ट इवेंट पाने के लिए, रजिस्टर करें. अगर आपको चार्ट में तरीकों को कॉल करना है, तो "तैयार है" इवेंट को ध्यान से सुनें.
  6. डेटा और विकल्प बताने के लिए, chart.draw() पर कॉल करें.

फ़ायदे:

  • आपके पास प्रोसेस के हर चरण पर पूरा कंट्रोल होता है.
  • आपके पास, चार्ट में दिए गए सभी इवेंट को सुनने के लिए रजिस्टर करने का विकल्प है.

नुकसान:

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

उदाहरण:

<html>
   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

ChartWrapper

ChartWrapper एक सुविधा क्लास है, जो आपके लिए सभी सही चार्ट लाइब्रेरी लोड करती है. साथ ही, यह चार्ट टूल के डेटा सोर्स में क्वेरी भेजने की प्रक्रिया को भी आसान बनाती है.

फ़ायदे:

  • कोड बहुत कम है
  • आपके लिए सभी ज़रूरी चार्ट लाइब्रेरी लोड करता है
  • इससे Query ऑब्जेक्ट बनाकर और कॉलबैक को हैंडल करके, डेटा सोर्स से क्वेरी करना ज़्यादा आसान हो जाता है
  • कंटेनर एलिमेंट आईडी में पास करें और यह आपको getElementByID को कॉल करेगा.
  • डेटा को अलग-अलग फ़ॉर्मैट में सबमिट किया जा सकता है: वैल्यू के कलेक्शन, JSON लिटरल स्ट्रिंग या DataTable हैंडल के तौर पर

नुकसान:

  • फ़िलहाल, ChartWrapper सिर्फ़ चुने गए, तैयार, और गड़बड़ी वाले इवेंट को ही लागू करता है. अन्य इवेंट पाने के लिए, आपको रैप किए गए चार्ट के लिए एक हैंडल बनाना होगा और वहां इवेंट की सदस्यता लेनी होगी. उदाहरणों के लिए ChartWrapper दस्तावेज़ देखें.

उदाहरण:

यहां स्थानीय तौर पर बनाए गए डेटा वाले कॉलम चार्ट का एक उदाहरण दिया गया है, जिसे अरे के तौर पर सेट किया गया है. अरे सिंटैक्स का इस्तेमाल करके, चार्ट लेबल या तारीख और समय की वैल्यू तय नहीं की जा सकती. हालांकि, इन वैल्यू का इस्तेमाल करके मैन्युअल तरीके से एक DataTable ऑब्जेक्ट बनाया जा सकता है और उसे dataTable प्रॉपर्टी में पास किया जा सकता है.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

यहां लाइन चार्ट का एक उदाहरण दिया गया है, जो Google स्प्रेडशीट से क्वेरी करके अपना डेटा हासिल करता है. ध्यान दें कि कोड के लिए कॉलबैक को हैंडल करने की ज़रूरत नहीं होती.

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

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

अपने-आप लोड होने की सुविधा के साथ जोड़ने पर, बहुत छोटा कोड बन सकता है:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

ChartWrapper के साथ चार्ट एडिटर का इस्तेमाल करना

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

अपने पेज पर चार्ट एडिटर जोड़ा जा सकता है. साथ ही, उपयोगकर्ताओं को अन्य डेटा सोर्स से कनेक्ट करने और ChartWrapper स्ट्रिंग को लौटाने के तरीके दिखाए जा सकते हैं. ज़्यादा जानकारी के लिए, ChartEditor के रेफ़रंस दस्तावेज़ देखें.

 

DrawChart()

DrawChart एक ग्लोबल स्टैटिक तरीका है, जो ChartWrapper को रैप करता है.

फ़ायदे:

  • ChartWrapper के जैसा ही है, लेकिन इस्तेमाल करने के लिए थोड़ा छोटा है.

नुकसान:

  • यह रैपर को हैंडल नहीं दिखाता, इसलिए कोई भी इवेंट हैंडल नहीं किया जा सकता.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

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