組織図 と 棒グラフ の連携 (実験)
/////
/////
/////
/////
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['orgchart', 'table']});
google.setOnLoadCallback(
function () {
var data = new google.visualization.DataTable();
data.addColumn('string', '名前');
data.addColumn('string', '管理者');
data.addColumn('number', '給料');
data.addColumn('boolean', 'フルタイム');
data.addRows([
['Mike', null, {v: 20000, f: '$20,000'}, true ],
['Jim', 'Mike', {v: 8000, f: '$8,000'}, true ],
['Alice', 'Mike', {v: 12500, f: '$12,500'}, false],
['Bob', 'Jim', {v: 7000, f: '$7,000'}, true ]
]);
var org_view = new google.visualization.DataView(data);
org_view.setColumns([0, 1]);
var orgchart = new google.visualization.OrgChart( document.getElementById('gct_sample_orgchart_demo'));
orgchart.draw(org_view, null);
var table_view = new google.visualization.DataView(data);
table_view.setColumns([0, 2, 3]);
var table = new google.visualization.Table(
document.getElementById('gct_sample_orgchart_demo_table'));
table.draw(table_view, null);
google.visualization.events.addListener(table, 'select', function() { orgchart.setSelection(table.getSelection());
});
google.visualization.events.addListener(orgchart, 'select', function() { table.setSelection(orgchart.getSelection()); });
} );
</script>
<div style="overflow-x: auto; padding:1px; margin-bottom: 1.2em;"><table> <tr> <td> <div id="gct_sample_orgchart_demo" style="width: 260px;"></div> </td> <td> <div id="gct_sample_orgchart_demo_table" style="width: 280px;"></div> </td> </tr> </table></div>
/////
<script type="text/javascript">
google.load('visualization', '1', {packages: ['orgchart', 'table']});
google.setOnLoadCallback(
function () {
var data = new google.visualization.DataTable();
data.addColumn('string', '名前');
data.addColumn('string', '管理者');
data.addColumn('number', '給料');
data.addColumn('boolean', 'フルタイム');
data.addRows([
['Mike', null, {v: 20000, f: '$20,000'}, true ],
['Jim', 'Mike', {v: 8000, f: '$8,000'}, true ],
['Alice', 'Mike', {v: 12500, f: '$12,500'}, false],
['Bob', 'Jim', {v: 7000, f: '$7,000'}, true ]
]);
var org_view = new google.visualization.DataView(data);
org_view.setColumns([0, 1]);
var orgchart = new google.visualization.OrgChart( document.getElementById('gct_sample_orgchart_demo'));
orgchart.draw(org_view, null);
var table_view = new google.visualization.DataView(data);
table_view.setColumns([0, 2, 3]);
var table = new google.visualization.Table(
document.getElementById('gct_sample_orgchart_demo_table'));
table.draw(table_view, null);
google.visualization.events.addListener(table, 'select', function() { orgchart.setSelection(table.getSelection());
});
google.visualization.events.addListener(orgchart, 'select', function() { table.setSelection(orgchart.getSelection()); });
} );
</script>
<div style="overflow-x: auto; padding:1px; margin-bottom: 1.2em;"><table> <tr> <td> <div id="gct_sample_orgchart_demo" style="width: 260px;"></div> </td> <td> <div id="gct_sample_orgchart_demo_table" style="width: 280px;"></div> </td> </tr> </table></div>