সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন
আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 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 the data table.
var 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.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
একটি DataTable তৈরি করুন
সমস্ত চার্টে ডেটা প্রয়োজন। Google চার্ট টুলস চার্টের জন্য google.visualization.DataTable নামক জাভাস্ক্রিপ্ট ক্লাসে ডেটা মোড়ানো প্রয়োজন। এই ক্লাসটি Google ভিজ্যুয়ালাইজেশন লাইব্রেরিতে সংজ্ঞায়িত করা হয়েছে যা আপনি আগে লোড করেছেন৷
একটি DataTable হল সারি এবং কলাম সহ একটি দ্বি-মাত্রিক সারণী, যেখানে প্রতিটি কলামের একটি ডেটাটাইপ, একটি ঐচ্ছিক আইডি এবং একটি ঐচ্ছিক লেবেল রয়েছে। উপরের উদাহরণটি নিম্নলিখিত টেবিল তৈরি করে:
প্রকার: স্ট্রিং লেবেল: টপিং
প্রকার: সংখ্যা লেবেল: স্লাইস
মাশরুম
3
পেঁয়াজ
1
জলপাই
1
জুচিনি
1
পেপারোনি
2
একটি DataTable তৈরি করার বিভিন্ন উপায় আছে; আপনি DataTables এবং DataViews- এ প্রতিটি কৌশলের একটি তালিকা এবং তুলনা দেখতে পারেন। আপনি এটি যোগ করার পরে আপনার ডেটা সংশোধন করতে পারেন, এবং কলাম এবং সারি যোগ, সম্পাদনা বা সরাতে পারেন।
আপনাকে অবশ্যই আপনার চার্টের DataTable এমন একটি বিন্যাসে সংগঠিত করতে হবে যা চার্টটি প্রত্যাশা করে: উদাহরণস্বরূপ, বার এবং পাই উভয় চার্টের জন্য একটি দুই-কলামের টেবিল প্রয়োজন যেখানে প্রতিটি সারি একটি স্লাইস বা বারকে প্রতিনিধিত্ব করে। প্রথম কলাম হল স্লাইস বা বার লেবেল, এবং দ্বিতীয় কলাম হল স্লাইস বা বার মান। অন্যান্য চার্টের জন্য ভিন্ন এবং সম্ভবত আরও জটিল টেবিল বিন্যাস প্রয়োজন। প্রয়োজনীয় ডেটা বিন্যাস শিখতে আপনার চার্টের ডকুমেন্টেশন দেখুন।
নিজে একটি টেবিল তৈরি করার পরিবর্তে, আপনি পরিবর্তে চার্ট টুলস ডেটাসোর্স প্রোটোকল সমর্থন করে এমন একটি ওয়েবসাইট অনুসন্ধান করতে পারেন--উদাহরণস্বরূপ, একটি Google স্প্রেডশীট পৃষ্ঠা৷ google.visualization.Query অবজেক্ট ব্যবহার করে, আপনি একটি ওয়েবসাইটে একটি ক্যোয়ারী পাঠাতে পারেন এবং একটি জনবহুল DataTable অবজেক্ট পেতে পারেন যা আপনি আপনার চার্টে পাস করতে পারেন। কিভাবে একটি ক্যোয়ারী পাঠাতে হয় তা শিখতে একটি ডেটাসোর্স অনুসন্ধান করা উন্নত বিষয় দেখুন।
[[["সহজে বোঝা যায়","easyToUnderstand","thumb-up"],["আমার সমস্যার সমাধান হয়েছে","solvedMyProblem","thumb-up"],["অন্যান্য","otherUp","thumb-up"]],[["এতে আমার প্রয়োজনীয় তথ্য নেই","missingTheInformationINeed","thumb-down"],["খুব জটিল / অনেক ধাপ","tooComplicatedTooManySteps","thumb-down"],["পুরনো","outOfDate","thumb-down"],["অনুবাদ সংক্রান্ত সমস্যা","translationIssue","thumb-down"],["নমুনা / কোড সংক্রান্ত সমস্যা","samplesCodeIssue","thumb-down"],["অন্যান্য","otherDown","thumb-down"]],["2024-07-10 UTC-তে শেষবার আপডেট করা হয়েছে।"],[[["\u003cp\u003eThe content demonstrates how to create a simple pie chart using the Google Charts library.\u003c/p\u003e\n"],["\u003cp\u003eIt explains the process of creating a \u003ccode\u003eDataTable\u003c/code\u003e object, which is used to hold the chart's data.\u003c/p\u003e\n"],["\u003cp\u003eThe example uses a two-column table where the first column represents the slice label and the second column represents the slice value.\u003c/p\u003e\n"],["\u003cp\u003eYou can populate the \u003ccode\u003eDataTable\u003c/code\u003e manually or query a data source like Google Spreadsheets using the \u003ccode\u003egoogle.visualization.Query\u003c/code\u003e object.\u003c/p\u003e\n"]]],[],null,["# Prepare the Data\n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003c!--Load the AJAX API--\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n\n // Load the Visualization API and the piechart package.\n google.charts.load('current', {'packages':['corechart']});\n\n // Set a callback to run when the Google Visualization API is loaded.\n google.charts.setOnLoadCallback(drawChart);\n\n // Callback that creates and populates a data table, \n // instantiates the pie chart, passes in the data and\n // draws it.\n function drawChart() {\n\n // Create the data table.\n var data = new google.visualization.DataTable();\n data.addColumn('string', 'Topping');\n data.addColumn('number', 'Slices');\n data.addRows([\n ['Mushrooms', 3],\n ['Onions', 1],\n ['Olives', 1], \n ['Zucchini', 1],\n ['Pepperoni', 2]\n ]);\n\n // Set chart options\n var options = {'title':'How Much Pizza I Ate Last Night',\n 'width':400,\n 'height':300};\n\n // Instantiate and draw our chart, passing in some options.\n var chart = new google.visualization.PieChart(document.getElementById('chart_div'));\n chart.draw(data, options);\n }\n \u003c/script\u003e\n \u003c/head\u003e\n\n \u003cbody\u003e\n\u003c!--Div that will hold the pie chart--\u003e\n \u003cdiv id=\"chart_div\" style=\"width:400; height:300\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nCreate a `DataTable`\n--------------------\n\nAll charts require data. Google Chart Tools charts require data to be wrapped in a JavaScript\nclass called `google.visualization.DataTable`. This class is defined in the Google\nVisualization library that you loaded previously.\n\nA `DataTable` is a two-dimensional table with rows and columns, where each column has\na datatype, an optional ID, and an optional label. The example above creates the following\ntable:\n\n| type: string label: Topping | type: number label: Slices |\n|-----------------------------|----------------------------|\n| Mushrooms | 3 |\n| Onions | 1 |\n| Olives | 1 |\n| Zucchini | 1 |\n| Pepperoni | 2 |\n\nThere are several ways to create a `DataTable`; you can see a list and comparison of\neach technique in [DataTables and\nDataViews](/chart/interactive/docs/datatables_dataviews). You can modify your data after you add it, and add, edit, or remove columns and\nrows.\n\nYou must organize your chart's `DataTable` in a format that the chart expects: for\ninstance, both the [Bar](/chart/interactive/docs/gallery/barchart#Data_Format) and [Pie charts](/chart/interactive/docs/gallery/piechart#Data_Format) require a two-column\ntable where each row represents a slice or bar. The first column is the slice or bar label, and the\nsecond column is the slice or bar value. Other charts require different and possibly more complex\ntable formats. See your chart's documentation to learn the required data format.\n\nRather than populate a table yourself, you could instead query a website that supports the Chart\nTools Datasource protocol--for example, a Google Spreadsheets page. Using the\n`google.visualization.Query` object, you can send a query to a website and receive a\npopulated `DataTable` object that you can pass into your chart. See the advanced topic\n[Querying a Datasource](/chart/interactive/docs/queries) to learn how to send a\nquery. \n[**Next: *Customizing the\nChart***](/chart/interactive/docs/basic_customizing_chart)\n\nMore Information\n----------------\n\n- [DataTables and DataViews](/chart/interactive/docs/datatables_dataviews)\n- [DataTable reference documentation](/chart/interactive/docs/reference#DataTable)\n- [Querying a Datasource](/chart/interactive/docs/queries)"]]