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

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

कॉन्टेंट

  1. chart.draw()
  2. चार्टरैपर
  3. Drawचार्ट()
  4. ज़्यादा जानकारी

index.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, सुविधा देने वाली एक ऐसी क्लास है जो आपके लिए सभी सही चार्ट लाइब्रेरी लोड करती है. साथ ही, चार्ट टूल के डेटा सोर्स को क्वेरी भेजना भी आसान बनाती है.

फ़ायदे:

  • काफ़ी कम कोड
  • आपके लिए सभी ज़रूरी चार्ट लाइब्रेरी लोड करता है
  • 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>

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

चार्ट को डिज़ाइन करने के लिए, Google स्प्रेडशीट में 'चार्ट एडिटर' डायलॉग का इस्तेमाल किया जा सकता है. इसके बाद, सीरियल ChartWrapper स्ट्रिंग के लिए अनुरोध किया जा सकता है. इसके बाद, आप इस स्ट्रिंग को कॉपी करके चिपका सकते हैं और ऊपर दिए गए तरीके से ChartWrapper में इसका इस्तेमाल कर सकते हैं.

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

 

ड्रॉचार्ट()

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>

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