इस पेज का अनुवाद Cloud Translation API से किया गया है.

कोड के उदाहरण

यहां Google विज़ुअलाइज़ेशन एपीआई का इस्तेमाल करके दिखाने के लिए, कोड के कुछ सैंपल दिए गए हैं.

टेबल का उदाहरण
पसंद के मुताबिक बनाई गई टेबल का उदाहरण
गॉज का उदाहरण
इंटरैक्शन का उदाहरण
पूरे एचटीएमएल पेज का उदाहरण
क्वेरी रैपर का उदाहरण
टेबल क्वेरी रैपर का उदाहरण
माउसओवर टूल से जुड़ी सलाह का उदाहरण

टेबल का उदाहरण

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, '$10,000');
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000, '$25,000');
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000, '$8,000');
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000, '$20,000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, '$12,000');
  data.setCell(4, 2, false);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});

  google.visualization.events.addListener(table, 'select', function() {
    var row = table.getSelection()[0].row;
    alert('You selected ' + data.getValue(row, 0));
  });
}

पसंद के मुताबिक बनाई गई टेबल का उदाहरण


<style>
  .bold-green-font {
    font-weight: bold;
    color: green;
  }

  .bold-font {
    font-weight: bold;
  }

  .right-text {
    text-align: right;
  }

  .large-font {
    font-size: 15px;
  }

  .italic-darkblue-font {
    font-style: italic;
    color: darkblue;
  }

  .italic-purple-font {
    font-style: italic;
    color: purple;
  }

  .underline-blue-font {
    text-decoration: underline;
    color: blue;
  }

  .gold-border {
    border: 3px solid gold;
  }

  .deeppink-border {
    border: 3px solid deeppink;
  }

  .orange-background {
    background-color: orange;
  }

  .orchid-background {
    background-color: orchid;
  }

  .beige-background {
    background-color: beige;
  }

</style>

...

function drawTable() {
  var cssClassNames = {
    'headerRow': 'italic-darkblue-font large-font bold-font',
    'tableRow': '',
    'oddTableRow': 'beige-background',
    'selectedTableRow': 'orange-background large-font',
    'hoverTableRow': '',
    'headerCell': 'gold-border',
    'tableCell': '',
    'rowNumberCell': 'underline-blue-font'};

  var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, '$10,000', {'className': 'bold-green-font large-font right-text'});
  data.setCell(0, 2, true, {'style': 'background-color: red;'});
  data.setCell(1, 0, 'Mary', null, {'className': 'bold-font'});
  data.setCell(1, 1, 25000, '$25,000', {'className': 'bold-font right-text'});
  data.setCell(1, 2, true, {'className': 'bold-font'});
  data.setCell(2, 0, 'Steve', null, {'className': 'deeppink-border'});
  data.setCell(2, 1, 8000, '$8,000', {'className': 'deeppink-border right-text'});
  data.setCell(2, 2, false, null);
  data.setCell(3, 0, 'Ellen', null, {'className': 'italic-purple-font large-font'});
  data.setCell(3, 1, 20000, '$20,000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, '$12,000');
  data.setCell(4, 2, false);
  var container = document.getElementById('table');
  var table = new google.visualization.Table(container);
  table.draw(data, options);
  table.setSelection([{'row': 4}]);
}

गेज का उदाहरण

तापमान :

<html>
 <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['gauge']});
    google.charts.setOnLoadCallback(drawGauge);

    var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,
      redFrom: 250, redTo: 280, minorTicks: 5};
    var gauge;

    function drawGauge() {
      gaugeData = new google.visualization.DataTable();
      gaugeData.addColumn('number', 'Engine');
      gaugeData.addColumn('number', 'Torpedo');
      gaugeData.addRows(2);
      gaugeData.setCell(0, 0, 120);
      gaugeData.setCell(0, 1, 80);

      gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
      gauge.draw(gaugeData, gaugeOptions);
    }

    function changeTemp(dir) {
      gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
      gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
      gauge.draw(gaugeData, gaugeOptions);
    }
  </script>
 </head>
 <body>
  <div id="gauge_div" style="width:280px; height: 140px;"></div>
  <input type="button" value="Go Faster" onclick="changeTemp(1)" />
  <input type="button" value="Slow down" onclick="changeTemp(-1)" />
 </body>
</html>

इंटरैक्शन का उदाहरण

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

DataTable में डेटा को सीमित और फ़ॉर्मैट करने के लिए, DataView ऑब्जेक्ट का इस्तेमाल कैसे करें,
दो विज़ुअलाइज़ेशन को एक ही डेटा से कैसे लिंक करें.
टेबल विज़ुअलाइज़ेशन के 'sort' इवेंट को इस्तेमाल करने का तरीका,
दिखाए गए डेटा को फिर से फ़ॉर्मैट करने के लिए, फ़ॉर्मैटर इस्तेमाल करने का तरीका.

कॉलम चार्ट को भी क्रम में लगाने के लिए, टेबल के हेडर पर क्लिक करें.

ध्यान दें कि कंट्रोल और डैशबोर्ड की मदद से, कंट्रोल के साथ कई चार्ट को एक साथ जोड़ा जा सकता है. ऐसा करके, चार्ट में दिखाए गए डेटा को मैनेज किया जा सकता है.

function drawSort() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000);
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000);
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000);
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000);
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000);
  data.setCell(4, 2, false);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);

  var formatter = new google.visualization.NumberFormat({prefix: '$'});
  formatter.format(data, 1); // Apply formatter to second column

  var table = new google.visualization.Table(document.getElementById('table_sort_div'));
  table.draw(data, {width: '100%', height: '100%'});

  var chart = new google.visualization.BarChart(document.getElementById('chart_sort_div'));
  chart.draw(view);

  google.visualization.events.addListener(table, 'sort',
      function(event) {
        data.sort([{column: event.column, desc: !event.ascending}]);
        chart.draw(view);
      });
}

पूरे एचटीएमएल पेज का उदाहरण

ऐसा वेब पेज बनाने का शुरू से अंत तक उदाहरण जिसमें विज़ुअलाइज़ेशन चार्ट एम्बेड किए गए हों. इसमें Google स्प्रेडशीट से जुड़ा एक चार्ट और विज़ुअलाइज़ेशन इवेंट का इस्तेमाल करके इंटरैक्ट करने वाले दो चार्ट भी दिखते हैं.

इस उदाहरण में, मशहूर फ़िल्मों और सिनेमाघरों की जगहों के आंकड़ों वाला एक आसान पेज दिखाया गया है.

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

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages': ['table', 'map', 'corechart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(initialize);

      function initialize() {
        // The URL of the spreadsheet to source data from.
        var query = new google.visualization.Query(
            'https://spreadsheets.google.com/pub?key=pCQbetd-CptF0r8qmCOlZGg');
        query.send(draw);
      }

      function draw(response) {
        if (response.isError()) {
          alert('Error in query');
        }

        var ticketsData = response.getDataTable();
        var chart = new google.visualization.ColumnChart(
            document.getElementById('chart_div'));
        chart.draw(ticketsData, {'isStacked': true, 'legend': 'bottom',
            'vAxis': {'title': 'Number of tickets'}});

        var geoData = google.visualization.arrayToDataTable([
          ['Lat', 'Lon', 'Name', 'Food?'],
          [51.5072, -0.1275, 'Cinematics London', true],
          [48.8567, 2.3508, 'Cinematics Paris', true],
          [55.7500, 37.6167, 'Cinematics Moscow', false]]);

        var geoView = new google.visualization.DataView(geoData);
        geoView.setColumns([0, 1]);

        var table =
            new google.visualization.Table(document.getElementById('table_div'));
        table.draw(geoData, {showRowNumber: false, width: '100%', height: '100%'});

        var map =
            new google.visualization.Map(document.getElementById('map_div'));
        map.draw(geoView, {showTip: true});

        // Set a 'select' event listener for the table.
        // When the table is selected, we set the selection on the map.
        google.visualization.events.addListener(table, 'select',
            function() {
              map.setSelection(table.getSelection());
            });

        // Set a 'select' event listener for the map.
        // When the map is selected, we set the selection on the table.
        google.visualization.events.addListener(map, 'select',
            function() {
              table.setSelection(map.getSelection());
            });
      }
    </script>
  </head>

  <body>
    <table align="center">
      <tr valign="top">
        <td style="width: 50%;">
          <div id="map_div" style="width: 400px; height: 300;"></div>
        </td>
        <td style="width: 50%;">
          <div id="table_div"></div>
        </td>
      </tr>
      <tr>
        <td colSpan=2>
          <div id="chart_div" style="align: center; width: 700px; height: 300px;"></div>
        </td>
      </tr>
    </table>

  </body>
</html>

क्वेरी रैपर का उदाहरण

इस उदाहरण में, JavaScript ऑब्जेक्ट बनाने का तरीका बताया गया है. यह ऑब्जेक्ट, क्वेरी भेजने के कई पहलुओं को रैप करता है. इस ऑब्जेक्ट को QueryWrapper कहा जाता है. इसे क्वेरी स्ट्रिंग, विज़ुअलाइज़ेशन के लिए हैंडल, और विज़ुअलाइज़ेशन के लिए विकल्पों के सेट के साथ इंस्टैंशिएट किया जाता है. यह बाहरी कॉलर, sendAndDraw() को एक तरीका दिखाता है, जो क्वेरी स्ट्रिंग भेजता है, जवाब को हैंडल करता है और विज़ुअलाइज़ेशन पर draw() को कॉल करता है. इसके अलावा, अगर क्वेरी में कोई गड़बड़ी मिलती है, तो गड़बड़ी का मैसेज दिखाता है. यहां मौजूद होस्ट पेज, संगठन चार्ट विज़ुअलाइज़ेशन में नतीजों को दिखाता है.

यहां होस्ट पेज का कोड दिया गया है:

<!DOCTYPE html>
<html>
<head>
  <title>Query Wrapper Example</title>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="querywrapper.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages' : ['orgchart']});
    google.charts.setOnLoadCallback(function() { sendAndDraw('') });

    var dataSourceUrl = 'https://spreadsheets.google.com/tq?key=rCaVQNfFDMhOM6ENNYeYZ9Q&pub=1';
    var query;

    function sendAndDraw(queryString) {
      var container = document.getElementById('orgchart');
      var orgChart = new google.visualization.OrgChart(container);
      query && query.abort();
      query = new google.visualization.Query(dataSourceUrl + queryString);
      var queryWrapper = new QueryWrapper(query, orgChart, {'size': 'large'}, container);
      queryWrapper.sendAndDraw();
    }

  </script>
</head>

<body>
<h1>Query Wrapper Example</h1>
<form action="">
  <span> This example uses the following spreadsheet: <br />
    <a href="https://spreadsheets.google.com/pub?key=rCaVQNfFDMhOM6ENNYeYZ9Q">
      https://spreadsheets.google.com/pub?key=rCaVQNfFDMhOM6ENNYeYZ9Q
    </a></span>
  <br /><br />
  <select onChange="sendAndDraw(this.value)">
    <option value="">No query string</option>
    <option value="&tq=limit 3">query=limit 3</option>
    <option value="&tq=select G,H">(Error) query=select G,H</option>
  </select>
</form>
<br />
<div id="orgchart"></div>
</body>
</html>

क्वेरीWrapper ऑब्जेक्ट के लिए JavaScript यहां दिया गया है.

/**
 * A google.visualization.Query Wrapper. Sends a
 * query and draws the visualization with the returned data or outputs an
 * error message.
 *
 * DISCLAIMER: This is an example code which you can copy and change as
 * required. It is used with the google visualization API which is assumed to
 * be loaded to the page. For more info see:
 * https://developers.google.com/chart/interactive/docs/reference#Query
 */


/**
 * Constructs a new query wrapper with the given query, visualization,
 * visualization options, and error message container. The visualization
 * should support the draw(dataTable, options) method.
 * @constructor
 */
var QueryWrapper = function(query, visualization, visOptions, errorContainer) {

  this.query = query;
  this.visualization = visualization;
  this.options = visOptions || {};
  this.errorContainer = errorContainer;
  this.currentDataTable = null;

  if (!visualization || !('draw' in visualization) ||
      (typeof(visualization['draw']) != 'function')) {
    throw Error('Visualization must have a draw method.');
  }
};


/** Draws the last returned data table, if no data table exists, does nothing.*/
QueryWrapper.prototype.draw = function() {
  if (!this.currentDataTable) {
    return;
  }
  this.visualization.draw(this.currentDataTable, this.options);
};


/**
 * Sends the query and upon its return draws the visualization.
 * If the query is set to refresh then the visualization will be drawn upon
 * each refresh.
 */
QueryWrapper.prototype.sendAndDraw = function() {
  var query = this.query;
  var self = this;
  query.send(function(response) {self.handleResponse(response)});
};


/** Handles the query response returned by the data source. */
QueryWrapper.prototype.handleResponse = function(response) {
  this.currentDataTable = null;
  if (response.isError()) {
    this.handleErrorResponse(response);
  } else {
    this.currentDataTable = response.getDataTable();
    this.draw();
  }
};


/** Handles a query response error returned by the data source. */
QueryWrapper.prototype.handleErrorResponse = function(response) {
  var message = response.getMessage();
  var detailedMessage = response.getDetailedMessage();
  if (this.errorContainer) {
    google.visualization.errors.addError(this.errorContainer,
        message, detailedMessage, {'showInTooltip': false});
  } else {
    throw Error(message + ' ' + detailedMessage);
  }
};


/** Aborts the sending and drawing. */
QueryWrapper.prototype.abort = function() {
  this.query.abort();
};

टेबल क्वेरी रैपर का उदाहरण

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

JavaScript एक ऑब्जेक्ट, TablesQueryWrapper के बारे में जानकारी देता है. यह अनुरोध करने के लिए google.visualization.Query ऑब्जेक्ट को मैनेज करता है. साथ ही, यह टेबल विज़ुअलाइज़ेशन को क्रम से लगाने और पेज पर नंबर डालने के काम को भी मैनेज करता है. ऑब्जेक्ट को google.visualization.Query इंस्टेंस के साथ इंस्टैंशिएट किया जाता है. यह उस पेज एलिमेंट के लिए एक हैंडल होता है जिसका इस्तेमाल विज़ुअलाइज़ेशन को होल्ड करने और इससे होने वाली किसी भी गड़बड़ी को रोकने के लिए किया जाता है. साथ ही, draw() तरीके में पास होने के लिए उपलब्ध कोई भी विकल्प (इसमें pageSize विकल्प के रूप में, फ़ेच की जाने वाली पंक्तियों की संख्या शामिल होती है). यह ऑब्जेक्ट पेजिंग और इवेंट को क्रम से लगाकर, टेबल विज़ुअलाइज़ेशन को मैनेज करता है.

जब उपयोगकर्ता के पेज को आगे या पीछे किया जाता है, तो टेबल पेज को फिर से भरने के लिए TablesQueryWrapper, सही LIMIT और OFFSET वैल्यू वाली नई क्वेरी बनाकर और भेजकर इवेंट को मैनेज करता है. इसी तरह, जब उपयोगकर्ता, क्रम से लगाने का क्रम बदलने के लिए किसी कॉलम पर क्लिक करता है, तो TablesQueryWrapper एक सही ORDER BY क्लॉज़ के साथ नई क्वेरी बनाकर और उसे भेजकर इवेंट को हैंडल करता है. साथ ही, वापस ऑफ़सेट 0 पर रीसेट हो जाता है.

यहां दिए गए उदाहरण में, ड्रॉपडाउन बॉक्स की मदद से, टेबल की उन लाइनों की संख्या चुनी जा सकती है जिन्हें आपको दिखाना है. अगर इस सेटिंग में बदलाव किया जाता है, तो होस्ट पेज एक नया TablesQueryWrapper इंस्टेंस बनाता है. इसके बाद, LIMIT क्लॉज़ वाली नई क्वेरी भेजता है. इसमें चुनी गई लाइनों की संख्या दिखती है. इसमें कोई OFFSET क्लॉज़ नहीं होता है. इसका मतलब है कि यह पहली लाइन पर वापस चला जाता है.