گولگ کی چارٹس

سادے لائن چارٹ سے لے کر پیچیدہ سینکچری چارٹ تک، گوگل چارٹ لائبریری نے بہت سے فوری طور پر استعمال کی جاسکتی چارٹ کی اقسام فراہم کی ہیں:

  • اسپریس چارٹ (Scatter Chart)
  • لائن چارٹ (Line Chart)
  • بار چارٹ/کولمن چارٹ (Bar / Column Chart)
  • ایکائی چارٹ (Area Chart)
  • پائی چارٹ (Pie Chart)
  • دونٹ چارٹ (Donut Chart)
  • آرگنائزیشن چارٹ (Org Chart)
  • نقشه/جغرافیائی چارٹ (Map / Geo Chart)

گوگل چارٹ کا استعمال کیسے کریجئے؟

آپ اگر گوگل چارٹ استعمال کریجئے تو، آپ کی ویب پیج میں استعمال کریجئےچارٹ لوڈر کا لنک شامل کریجئے:

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

گوگل چارٹ آسان استعمال ہوتی ہے。

فقط ایک <div> علامت کے ذریعے چارٹ نمائش کی جاسکتی ہے:

<div id="myChart" style="max-width:700px; height:400px"></div>

div علامت کو ایک منفرد آئی ڈی رکھنا ضروری ہوتا ہے。

تو گوگل گراف اپی لوڈ کریجئے:

  1. Visualization API اور corechart پیکیج لوڈ کریں
  2. ایک ریٹرن کال فنکشن سیٹ کر دیجئے، جب 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],
  
]
var options = {
  title: 'عالمی وینو پیداواریت'
};
var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);
}

خود کو امتحان کریں

کیک نمودار

کے لئے گراف بچار نمودار کو تبدیل کرنا چاہئیے،کیک نمودار، صرف استعمال کریں:

google.visualization.PieChart

مقابلوں:

google.visualization.BarChart

var chart = new google.visualization.PieChart(document.getElementById('myChart'));

خود کو امتحان کریں

3D کیک نمودار

کے 3D شکل میں کیک نمودار دکھانے کے لئے، صرف is3D: true اضافہ کرنے میں: }}

var options = {
  title: 'عالمی وین پیداواریت',
  is3D: true
};

خود کو امتحان کریں