گولگ کی چارٹس

ਸਧਾਰਨ ਲਾਈਨ ਚਾਰਟ ਤੋਂ ਲੈ ਕੇ ਜਟਿਲ ਹੈਰੀਆਰੀ ਚਾਰਟ ਤੱਕ, ਗੂਗਲ ਚਾਰਟ ਲਾਇਬ੍ਰੇਰੀ ਨੇ ਬਹੁਤ ਸਾਰੇ ਚਾਰਟ ਟਾਈਪਸ ਪ੍ਰਦਾਨ ਕੀਤੇ ਹਨ ਜੋ ਸਿੱਧੇ ਉਪਯੋਗ ਵਿੱਚ ਲਿਆਉਣ ਲਈ ਹਨ:

  • ਸਕੈਟਰ ਚਾਰਟ
  • ਲਾਈਨ ਚਾਰਟ
  • ਬਾਰ / ਕਲੰਬ ਚਾਰਟ
  • ਖੇਤਰ ਚਾਰਟ
  • ਪਾਇ ਚਾਰਟ
  • ਡੌਨਟ ਚਾਰਟ
  • ਸੰਗਠਨ ਚਾਰਟ (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
};

خود کو چک کریں