গুগল চার্ট
সরল লাইন চার্ট থেকে সংকল্পিত হাইয়ারার্কিক ট্রি চার্ট পর্যন্ত, Google চার্ট লাইব্রেরি বেশ কিছু চিত্রশোধনীর সমাহার প্রদান করে
- স্ক্যাটার চার্ট
- লাইন চার্ট
- বার / কলাম চার্ট
- এলাকা চার্ট
- পাই চার্ট
- ডনাট চার্ট
- সংগঠনগত চিত্র (Org Chart)
- মানচিত্র / ভূগোলগত চিত্র (Map / Geo Chart)
Google Chart কিভাবে ব্যবহার করা যায়?
আপনি যদি Google Chart এবং ওয়েবসাইটে ব্যবহার করতে চান, তবেচিত্র লোডার লিঙ্ক যোগ করুন:
<script src="https://www.gstatic.com/charts/loader.js"> </script>
Google Chart ব্যবহার করা যথেষ্ট সহজ
শুধুমাত্র একটি <div> এই ইলিমেন্টটি চিত্রশোধনী দেখাবে:
<div id="myChart" style="max-width:700px; height:400px"></div>
ডিভ ইলিমেন্টটির একটি অভিনব ID থাকতে হবে
তারপর Google Graph API:
- Visualization API এবং corechart প্যাকেজ লোড করুন
- একটি কলব্যবস্থা সজ্জায়ন, API লোড করার পরে কল করা হবে
1 google.charts.load('current',{packages:['corechart']});
2 google.charts.setOnLoadCallback(drawChart);
এভাবেই!
লাইন চার্ট
সূত্র কোড
function drawChart() {
// সেট ডাটা
var data = google.visualization.arrayToDataTable([
['মূল্য', 'মাপ'],
[50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
[110,10],[120,11],[130,14],[140,14],[150,15]
]);
// সেটিং অপশন
var options = {
title: 'ঘরের মূল্য এবং এলাকা সাইজ'}
hAxis: {title: 'বর্গ মিটার'},
vAxis: {title: 'মিলিয়ন মূল্য'},
legend: 'none'
};
// চার্ট দ্রব্যাস
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}
স্পর্শচার্ট
একই ডাটা যদি স্পর্শচার্ট তৈরি করতে হয়স্পর্শচার্টএবং এইভাবে google.visualization পরিবর্তন করুন: ScatterChart:
var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));
বার চার্ট
সূত্র কোড
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Contry', 'Mhl'],
['ইতালি', 55],
['ফ্রান্স', 49],
['স্পেন', 44],
['মার্কিন যুক্তরাষ্ট্র', 24],
['আর্জেন্টিনা', 15]
]);
var options = {
title: 'বিশ্ব বিনাস্কা উৎপাদন'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}
পাই চার্ট
যদি বার চার্টকে 3D রূপে রূপান্তরিত করতে হয়,পাই চার্টবর্তমানে, এইভাবে ব্যবহার করুন:
google.visualization.PieChart
প্রতিস্থাপন:
google.visualization.BarChart
var chart = new google.visualization.PieChart(document.getElementById('myChart'));
3D পাই চার্ট
3D রূপে পাই চার্ট দেখাতে হলে, শুধুমাত্র এইভাবে is3D: true বিকল্পে যোগ করুন：
var options = {
title: 'বিশ্ব বিনাস উৎপাদন',
is3D: true
};
