गूगल चार्ट
साधारण लाइन चार्ट से लेकर जटिल श्रृंखला गैफ़ के रूप में, Google चार्ट लाइब्रेरी बहुत सारे उपलब्ध चार्ट टाइप देती है:
- स्पैटर चार्ट
- लाइन चार्ट
- बार / कॉलम चार्ट
- क्षेत्र चार्ट
- पाइ चार्ट
- डोनट चार्ट
- संगठन चार्ट (Org Chart)
- मानचित्र / भूगोल चार्ट (Map / Geo Chart)
Google 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 एलीमेंट को एक अद्वितीय 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],
]
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
};
