এই পৃষ্ঠাটি বিভিন্ন উপায়ে তালিকাভুক্ত করে যা আপনি পৃষ্ঠায় একটি চার্ট আঁকতে এবং তাত্ক্ষণিক করতে পারেন। নীচে তালিকাভুক্ত প্রতিটি পদ্ধতির সুবিধা এবং অসুবিধা রয়েছে।
বিষয়বস্তু
chart.draw()
এটি হল হ্যালো চার্টে আচ্ছাদিত মৌলিক পদ্ধতি! এই ডকুমেন্টেশনে উদাহরণ । এখানে মৌলিক পদক্ষেপ আছে:
- gstatic লাইব্রেরি লোডার, Google ভিজ্যুয়ালাইজেশন, এবং চার্ট লাইব্রেরি লোড করুন
- আপনার ডেটা প্রস্তুত করুন
- যেকোনো চার্ট বিকল্প প্রস্তুত করুন
- পৃষ্ঠার কন্টেইনার এলিমেন্টে একটি হ্যান্ডেলে পাস করে চার্ট ক্লাসটি ইনস্ট্যান্টিয়েট করুন।
- ঐচ্ছিকভাবে যেকোনো চার্ট ইভেন্ট পেতে নিবন্ধন করুন। আপনি যদি চার্টে পদ্ধতিগুলি কল করতে চান তবে আপনাকে "প্রস্তুত" ইভেন্টটি শুনতে হবে।
- কল
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>
ChartWrapper এর সাথে চার্ট এডিটর ব্যবহার করা
আপনি একটি চার্ট ডিজাইন করতে 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>