এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

কোড উদাহরণ

Google ভিজ্যুয়ালাইজেশন API ব্যবহার করে দেখানোর জন্য এখানে কিছু কোড নমুনা রয়েছে।

টেবিল উদাহরণ
কাস্টমাইজড টেবিল উদাহরণ
গেজ উদাহরণ
মিথস্ক্রিয়া উদাহরণ
সম্পূর্ণ HTML পৃষ্ঠার উদাহরণ
কোয়েরি মোড়কের উদাহরণ
টেবিল কোয়েরি মোড়কের উদাহরণ
মাউসওভার টুল টিপ উদাহরণ

টেবিল উদাহরণ

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>

মিথস্ক্রিয়া উদাহরণ

এই উদাহরণটি আরও জটিল ইন্টারঅ্যাক্টিভিটির জন্য ভিজ্যুয়ালাইজেশনগুলিকে কীভাবে একত্রিত করা যায় তা দেখায়।
এটি নিম্নলিখিত বৈশিষ্ট্যগুলি প্রদর্শন করে:

ডেটা টেবিলে ডেটা সীমাবদ্ধ এবং ফর্ম্যাট করতে ডেটাভিউ অবজেক্ট কীভাবে ব্যবহার করবেন,
একই ডেটাতে দুটি ভিজ্যুয়ালাইজেশন কীভাবে লিঙ্ক করবেন,
টেবিল ভিজ্যুয়ালাইজেশনের 'বাছাই' ইভেন্টটি কীভাবে ব্যবহার করবেন,
প্রদর্শিত ডেটা পুনরায় ফর্ম্যাট করতে ফর্ম্যাটারগুলি কীভাবে ব্যবহার করবেন।

কলাম চার্টটিও সাজানো দেখতে টেবিলের হেডারে ক্লিক করুন।

নোট করুন যে কন্ট্রোল এবং ড্যাশবোর্ডগুলি আপনাকে তারা যে ডেটা দেখায় তা ম্যানিপুলেট করার জন্য নিয়ন্ত্রণগুলির সাথে একাধিক চার্ট একত্রিত করতে দেয়৷

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);
      });
}

সম্পূর্ণ HTML পৃষ্ঠার উদাহরণ

এটিতে এমবেড করা ভিজ্যুয়ালাইজেশন চার্ট সহ একটি ওয়েব পৃষ্ঠা তৈরি করার জন্য একটি এন্ড-টু-এন্ড উদাহরণ৷ এটি 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>

কোয়েরি মোড়কের উদাহরণ

এই উদাহরণটি দেখায় যে কীভাবে একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করতে হয় যা আপনার জন্য একটি ক্যোয়ারী পাঠানোর অনেক দিক মোড়ানো হয়। QueryWrapper নামক এই অবজেক্টটিকে একটি ক্যোয়ারী স্ট্রিং, একটি ভিজ্যুয়ালাইজেশনের একটি হ্যান্ডেল এবং ভিজ্যুয়ালাইজেশনের জন্য বিকল্পগুলির একটি সেট দিয়ে ইনস্ট্যান্ট করা হয়। এটি বহিরাগত কলারদের কাছে একটি পদ্ধতি উন্মুক্ত করে, sendAndDraw() , যা ক্যোয়ারী স্ট্রিং পাঠায়, প্রতিক্রিয়া পরিচালনা করে এবং হয় ভিজ্যুয়ালাইজেশনে draw() কল করে, অথবা যদি কোয়েরিটি একটি ত্রুটি ফেরত দেয় তবে একটি ত্রুটি বার্তা প্রদর্শন করে। এখানে হোস্ট পেজ একটি org চার্ট ভিজ্যুয়ালাইজেশনে ফলাফল প্রদর্শন করে।

হোস্ট পৃষ্ঠার কোড এখানে:

<!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>

এখানে QueryWrapper অবজেক্টের জন্য জাভাস্ক্রিপ্ট আছে।

/**
 * 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();
};

টেবিল কোয়েরি মোড়কের উদাহরণ

এটি একটি উদাহরণ যা একটি পৃষ্ঠাযুক্ত টেবিলের ভিজ্যুয়ালাইজেশনে একটি একক অনুরোধে সমস্ত ডেটা না নিয়ে কীভাবে একটি বড় ডেটা সেট প্রদর্শন করতে হয় তা প্রদর্শন করে৷ যখন প্রচুর পরিমাণে ডেটা থাকে এবং আপনি আপনার পৃষ্ঠায় একবারে সমস্ত ডেটা অনুরোধ বা সংরক্ষণ করার ওভারহেড এড়াতে চান তখন এটি কার্যকর।

জাভাস্ক্রিপ্ট একটি অবজেক্টকে সংজ্ঞায়িত করে, TableQueryWrapper, যেটি google.visualization.Query অবজেক্টকে অনুরোধ করতে, সেইসাথে টেবিল ভিজ্যুয়ালাইজেশন, সাজানো এবং পেজিনেশন পরিচালনা করে। অবজেক্টটি google.visualization.Query ইনস্ট্যান্স দিয়ে ইনস্ট্যান্ট করা হয়, ভিজ্যুয়ালাইজেশন ধরে রাখতে ব্যবহৃত পৃষ্ঠা উপাদানের একটি হ্যান্ডেল এবং এতে যেকোন ত্রুটি দেখা যায় এবং draw() পদ্ধতিতে পাস করার জন্য যেকোন বিকল্প (আনয়নের জন্য সারির সংখ্যা সহ, pageSize বিকল্প হিসাবে)। এই বস্তুটি পেজিং এবং বাছাই ইভেন্টগুলি ধরতে এবং পরিচালনা করে টেবিলের ভিজ্যুয়ালাইজেশন পরিচালনা করে।

যখন ব্যবহারকারীর পৃষ্ঠাগুলি সামনে বা পিছনে যায়, তখন টেবিলের পৃষ্ঠাটি পুনরুদ্ধার করার জন্য উপযুক্ত সীমা এবং অফসেট মান সহ একটি নতুন ক্যোয়ারী তৈরি এবং পাঠানোর মাধ্যমে TableQueryWrapper ঘটনাটি পরিচালনা করে৷ একইভাবে, যখন ব্যবহারকারী সাজানোর ক্রম পরিবর্তন করার জন্য একটি কলামে ক্লিক করেন, তখন TableQueryWrapper একটি উপযুক্ত ORDER BY ক্লজ সহ একটি নতুন ক্যোয়ারী তৈরি করে পাঠিয়ে ইভেন্টটি পরিচালনা করে এবং অফসেট 0 এ পুনরায় সেট করে।

নিম্নলিখিত উদাহরণে, ড্রপডাউন বক্স আপনাকে দেখানোর জন্য টেবিলের সারির সংখ্যা নির্বাচন করতে সক্ষম করে। পরিবর্তিত হলে, হোস্ট পৃষ্ঠাটি একটি নতুন TableQueryWrapper উদাহরণ তৈরি করে, তারপর নির্বাচিত সারিগুলির সংখ্যা প্রতিফলিত করে একটি LIMIT ধারা সহ একটি নতুন ক্যোয়ারী পাঠায় এবং কোন অফসেট ধারা নেই (অর্থাৎ, এটি প্রথম সারিতে ফিরে যায়)।