گولگ کی چارٹس
- پچھلے پیج چارٹ جی ایس
- آئندہ پیج ڈی3 جی ایس
ਸਧਾਰਨ ਲਾਈਨ ਚਾਰਟ ਤੋਂ ਲੈ ਕੇ ਜਟਿਲ ਹੈਰੀਆਰੀ ਚਾਰਟ ਤੱਕ, ਗੂਗਲ ਚਾਰਟ ਲਾਇਬ੍ਰੇਰੀ ਨੇ ਬਹੁਤ ਸਾਰੇ ਚਾਰਟ ਟਾਈਪਸ ਪ੍ਰਦਾਨ ਕੀਤੇ ਹਨ ਜੋ ਸਿੱਧੇ ਉਪਯੋਗ ਵਿੱਚ ਲਿਆਉਣ ਲਈ ਹਨ:
- ਸਕੈਟਰ ਚਾਰਟ
- ਲਾਈਨ ਚਾਰਟ
- ਬਾਰ / ਕਲੰਬ ਚਾਰਟ
- ਖੇਤਰ ਚਾਰਟ
- ਪਾਇ ਚਾਰਟ
- ਡੌਨਟ ਚਾਰਟ
- ਸੰਗਠਨ ਚਾਰਟ (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 ਐਲੀਮੈਂਟ ਨੂੰ ਇੱਕ ਅਲੱਗ ਆਈਡੀ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ。
ਤਦ ਗੂਗਲ ਗ੍ਰਾਫ ਐਪੀ ਲੋਡ ਕਰੋ:
- 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], ] 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 };
- پچھلے پیج چارٹ جی ایس
- آئندہ پیج ڈی3 جی ایس