Google चार्ट - संयोजन चार्ट
संयोजन चार्ट निम्नलिखित श्रृंखला से प्रत्येक श्रृंखला को एक अलग मार्कर प्रकार के रूप में प्रस्तुत करने में मदद करता है: लाइन, क्षेत्र, बार, कैंडलस्टिक्स और स्टेप्ड क्षेत्र। श्रृंखला के लिए एक डिफ़ॉल्ट मार्कर प्रकार निर्दिष्ट करने के लिए, श्रृंखला टाइप संपत्ति का उपयोग करें। श्रृंखला की संपत्ति का उपयोग प्रत्येक श्रृंखला के गुणों को व्यक्तिगत रूप से निर्दिष्ट करने के लिए किया जाना है। हमने पहले ही Google चार्ट कॉन्फ़िगरेशन सिंटैक्स अध्याय में इस चार्ट को तैयार करने के लिए उपयोग किए गए कॉन्फ़िगरेशन को देखा है । तो, चलिए पूरा उदाहरण देखते हैं।
विन्यास
हमने उपयोग किया है ComboChart संयोजन आधारित चार्ट दिखाने के लिए कक्षा।
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));उदाहरण
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>परिणाम
परिणाम सत्यापित करें।