ਗੂਗਲ ਚਾਰਟ

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

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

ਕਿਵੇਂ Google Chart ਵਰਤਣਾ ਹੈ?

ਤੁਸੀਂ ਜੇਕਰ ਗੂਗਲ ਚਾਰਟ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂਚਾਰਟ ਲੋਡਰ ਦੀ ਸੰਦਰਭ ਲਿੰਕ ਜੋੜੋ:

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

ਗੂਗਲ ਚਾਰਟ ਵਰਤਣਾ ਅਸਾਨ ਹੈ。

ਸਿਰਫ਼ ਇੱਕ <div> ਐਲੀਮੈਂਟ ਨੂੰ ਚਾਰਟ ਦਰਸਾਉਣ ਲਈ

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

<div> ਐਲੀਮੈਂਟ ਨੂੰ ਇੱਕ ਅਲਗ ਆਈਡੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ。

ਫਿਰ Google Graph API ਲੋਡ ਕਰੋ:

  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],
  ['ਅਰਜਨਟੀਨਾ', 15]
]);
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
};

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ