గూగుల్ చార్ట్
సాధారణ లైన్ చార్ట్ నుండి కఠినమైన లేవల్ ట్రీ చార్ట్ వరకు గూగుల్ చార్ట్ లైబ్రరీ అనేక చార్ట్ టైప్స్ ను అందుబాటులో ఉంది:
- స్కాటర్ చార్ట్
- లైన్ చార్ట్
- బార్ / కలమ్ చార్ట్
- ఏరియా చార్ట్
- పై చార్ట్
- డౌన్ట్ చార్ట్
- ఆర్గనైజేషన్ చార్ట్
- మాప్ / జియో చార్ట్
గూగుల్ చార్ట్ ఉపయోగించడం ఎలా?
మీ వెబ్ పేజీలో గూగుల్ చార్ట్ ఉపయోగించడానికి మీరు ఎలా ఉపయోగించాలి?చార్ట్ లోడర్ లింక్ జోడించండి:
<script src="https://www.gstatic.com/charts/loader.js"> </script>
గూగుల్ చార్ట్ ఉపయోగించడం సులభం
ఒక లింక్ జోడించడం మాత్రమే అవసరం ఉంటుంది <div> మెటాడాటా ప్రదర్శించడానికి అంతర్భాగ మెటాడాటా ఉపయోగించండి:
<div id="myChart" style="max-width:700px; height:400px"></div>
<div> మెటాడాటా ఉండాలి ప్రత్యేకమైన ఐడి కలిగి ఉండాలి.
క్రింది విధంగా గూగుల్ గ్రాఫ్ ఎపిఐ లోడ్ చేయండి:
- విజువైజేషన్ ఎపిఐ మరియు corechart ప్యాకేజీలను లోడ్ చేయండి
- ఒక కాల్బ్యాక్ ఫంక్షన్ సెట్, ఇంటర్ఫేస్ లోడ్ అయిన తర్వాత కాల్బ్ చేయండి
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
};
