Google चार्ट - संगठन चार्ट
संगठन चार्ट नोड्स के पदानुक्रम का प्रतिपादन करने में मदद करता है, जिसका उपयोग किसी संगठन में बेहतर / अधीनस्थ संबंधों को चित्रित करने के लिए किया जाता है। उदाहरण के लिए, एक परिवार का पेड़ एक प्रकार का ऑर्ग चार्ट है .. हमने पहले ही इस चार्ट को Google चार्ट कॉन्फ़िगरेशन सिंटैक्स अध्याय में आकर्षित करने के लिए उपयोग किया है । तो, चलिए पूरा उदाहरण देखते हैं।
विन्यास
हमने उपयोग किया है OrgChart संगठन आधारित चार्ट दिखाने के लिए कक्षा।
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));उदाहरण
googlecharts_organization_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: ['orgchart']});
</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 = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>परिणाम
परिणाम सत्यापित करें।