ওভারভিউ
ব্যবহারকারীকে একটি CSV ফাইল বা একটি 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', {packages: ['corechart']});
var visualization;
function draw() {
drawVisualization();
drawToolbar();
}
function drawVisualization() {
var container = document.getElementById('visualization_div');
visualization = new google.visualization.PieChart(container);
new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
send(queryCallback);
}
function queryCallback(response) {
visualization.draw(response.getDataTable(), {is3D: true});
}
function drawToolbar() {
var components = [
{type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
userprefs: {'3d': 1}},
{type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
{type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
{type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
userprefs: {'3d': 1},
style: 'width: 800px; height: 700px; border: 3px solid purple;'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
};
google.charts.setOnLoadCallback(draw);
</script>
</head>
<body>
<div id="visualization_div" style="width: 270px; height: 200px;"></div>
<div id="toolbar_div"></div>
</body>
</html>ব্যবহার
google.visualization.drawToolbar() পদ্ধতিতে কল করে আপনার পৃষ্ঠায় একটি টুলবার যোগ করুন, এটিকে অনুমোদিত রপ্তানির ধরন এবং প্রতিটির জন্য প্রয়োজনীয় ডেটা দিয়ে তৈরি করুন।
একটি টুলবার ব্যবহার করতে, আপনার ভিজ্যুয়ালাইজেশনকে অবশ্যই একটি URL থেকে এর ডেটা পেতে হবে; আপনি হাতে-জনিত ডেটা টেবিল বা ডেটাভিউ অবজেক্টে পাস করতে পারবেন না। আপনি drawToolbar() পদ্ধতিতে আপনার ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত ডেটার URL পাস করবেন।
আপনি যদি একটি iGoogle উপাদান বা একটি এমবেডযোগ্য iFrame প্রদান করতে চান যা গ্যাজেটটি ধারণ করে, তাহলে আপনার ভিজ্যুয়ালাইজেশনের একটি গ্যাজেটাইজড সংস্করণের জন্য একটি URL থাকতে হবে৷
আউটপুট প্রকার
আপনি drawToolbar() পদ্ধতিতে কীভাবে আপনার টুলবার কনফিগার করবেন তার উপর নির্ভর করে টুলবার ব্যবহারকারীকে নিম্নলিখিত এক বা একাধিক আউটপুট প্রকারের পছন্দ অফার করতে পারে:
- ডেটার একটি সাধারণ CSV সংস্করণ (যা আপনার ব্রাউজার কনফিগারেশনের উপর নির্ভর করে, আপনার ব্রাউজার রেন্ডার করবে বা ডাউনলোড এবং সংরক্ষণ করার প্রস্তাব দেবে, এবং/অথবা
- একটি HTML টেবিল ডেটা ধারণ করে, একটি নতুন ব্রাউজার উইন্ডোতে খোলা হয়েছে, এবং/অথবা৷
- HTML <iframe> কোড এই ভিজ্যুয়ালাইজেশনটিকে একটি ওয়েব পেজে এম্বেড করতে, এবং/অথবা
- পৃষ্ঠার একটি লিঙ্ক ব্যবহারকারীকে তাদের iGoogle পৃষ্ঠাতে এই গ্যাজেটটি এম্বেড করতে সক্ষম করে৷
বাক্য গঠন
google.visualization.drawToolbar(container, components)
পরামিতি
- ধারক
- পৃষ্ঠায় একটি DOM উপাদানের একটি হ্যান্ডেল৷ API এই উপাদানের মধ্যে টুলবার আঁকবে। এটি একটি স্ট্যান্ডার্ড ভিজ্যুয়ালাইজেশনের জন্য ধারক প্যারামিটারের অনুরূপ। আপনার টুলবারটি ভিজ্যুয়ালাইজেশনের পাশে রাখা উচিত যা এটি ব্যবহার করে।
- উপাদান
- বস্তুর একটি বিন্যাস, প্রতিটি একটি বিন্যাস বর্ণনা করে যেখানে ডেটা বা ভিজ্যুয়ালাইজেশন এক্সপোর্ট করা যেতে পারে। টুলবারটি অ্যারেতে যোগ করা ক্রম অনুসারে ব্যবহারকারীর কাছে বিকল্পগুলি প্রকাশ করবে। প্রতিটি অবজেক্টের ফর্ম্যাট বর্ণনা করে একটি টাইপ প্রপার্টি রয়েছে এবং টাইপের উপর নির্ভর করে এক বা একাধিক অতিরিক্ত বৈশিষ্ট্য রয়েছে:
-
type: 'csv'- এই বিকল্পটি একটি কমা-বিভক্ত মান ফাইলে ডেটা রপ্তানি করে। ব্রাউজারে একটি 'সেভ অ্যাজ' ডায়ালগ খুলবে।- ডেটাসোর্স : ' স্ট্রিং ' - ডেটা সোর্স ইউআরএল।
-
type: html'- এই বিকল্পটি একটি HTML টেবিলে ডেটা রপ্তানি করে। ডেটা টেবিল সহ পৃষ্ঠাটি ব্রাউজারে একটি নতুন উইন্ডোতে খুলবে।- ডেটাসোর্স : ডেটা সোর্স ইউআরএল স্ট্রিং।
-
type: igoogle- এই বিকল্পটি ব্যবহারকারীকে তাদের iGoogle পৃষ্ঠায় ভিজ্যুয়ালাইজেশন যোগ করতে সক্ষম করে। ব্রাউজারে একটি 'অ্যাড টু আইগুগল' পেজ খুলবে। একটি গ্যাজেটাইজড সংস্করণে ভিজ্যুয়ালাইজেশন উপলব্ধ থাকলেই এটি ব্যবহার করুন৷- ডেটাসোর্স : ডেটা সোর্স ইউআরএল স্ট্রিং।
- গ্যাজেট : গ্যাজেটাইজড সংস্করণের xml url স্ট্রিং। নোট করুন যে টুলবারটি যে ভিজ্যুয়ালাইজেশনের সাথে যুক্ত সেটিকে গ্যাজেটাইজড সংস্করণ হতে হবে না।
- userprefs : একটি ঐচ্ছিক পছন্দ বস্তু এই ভিজ্যুয়ালাইজেশনের জন্য উপযুক্ত, ভিজ্যুয়ালাইজেশন পছন্দগুলি নির্দিষ্ট করে।
-
type: htmlcode- এই বিকল্পটি HTML কোডের একটি ব্লক তৈরি করে যা ব্যবহারকারী একটি আইফ্রেমের ভিতরে ভিজ্যুয়ালাইজেশন প্রদর্শন করতে একটি ওয়েব পেজে এম্বেড করতে পারে। ব্রাউজারে গ্যাজেটের সঠিক HTML উপাদান সহ একটি পপআপ উইন্ডো খুলবে৷ একটি গ্যাজেটাইজড সংস্করণে ভিজ্যুয়ালাইজেশন উপলব্ধ থাকলেই এটি ব্যবহার করুন৷- ডেটাসোর্স : ডেটা সোর্স ইউআরএল স্ট্রিং।
- গ্যাজেট : গ্যাজেট xml url স্ট্রিং।
- userprefs : একটি ঐচ্ছিক পছন্দ বস্তু এই ভিজ্যুয়ালাইজেশনের জন্য উপযুক্ত, ভিজ্যুয়ালাইজেশন পছন্দগুলি নির্দিষ্ট করে।
- শৈলী : iframe এর শৈলীর জন্য একটি ঐচ্ছিক স্ট্রিং। যেমন: 'width: 300px; উচ্চতা: 500px;'।
-
উদাহরণ
function drawToolbar() {
var components = [
{type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
userprefs: {'3d': 1}},
{type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
{type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
{type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
};ডেটা নীতি
সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না। কিছু উপাদানের জন্য, টুলবারে দেওয়া সংশ্লিষ্ট ডেটা উৎস থেকে ডেটা নেওয়া হয়।
স্থানীয়করণ
টুলবার বর্তমানে শুধুমাত্র ইউএস ইংরেজি সমর্থন করে।