I'm using GetOrgChart to make an organization chart for my company, but I ran into a little problem.
If the SVG is bigger than the container we wish to add a scrollbar so you can use it to scroll since this will be a lot faster than dragging it all with your mouse.
I've tried this example but was unable to make it work.
Is there any way to achieve what I'm looking for?
The example below is way smaller than our actual chart, but it should be good enough to represent the problem.
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
primaryFields: ["name", "title", "phone", "mail"],
photoFields: ["image"],
scale: 0.4,
dataSource: [{
id: 1,
parentId: null,
name: "Amber McKenzie",
title: "CEO",
phone: "678-772-470",
mail: "lemmons@jourrapide.com",
adress: "Atlanta, GA 30303",
image: "images/f-11.jpg"
},
{
id: 2,
parentId: 1,
name: "Ava Field",
title: "Paper goods machine setter",
phone: "937-912-4971",
mail: "anderson@jourrapide.com",
image: "images/f-10.jpg"
},
{
id: 3,
parentId: 1,
name: "Evie Johnson",
title: "Employer relations representative",
phone: "314-722-6164",
mail: "thornton@armyspy.com",
image: "images/f-9.jpg"
},
{
id: 4,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "shetler@rhyta.com",
image: "images/f-5.jpg"
},
{
id: 11,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "shetler@rhyta.com",
image: "images/f-5.jpg"
},
{
id: 12,
parentId: 1,
name: "Paul Shetler",
title: "Teaching assistant",
phone: "330-263-6439",
mail: "shetler@rhyta.com",
image: "images/f-5.jpg"
},
{
id: 5,
parentId: 2,
name: "Rebecca Francis",
title: "Welding machine setter",
phone: "408-460-0589",
image: "images/f-4.jpg"
},
{
id: 6,
parentId: 2,
name: "Rebecca Randall",
title: "Optometrist",
phone: "801-920-9842",
mail: "JasonWGoodman@armyspy.com",
image: "images/f-8.jpg"
},
{
id: 7,
parentId: 2,
name: "Spencer May",
title: "System operator",
phone: "Conservation scientist",
mail: "hodges@teleworm.us",
image: "images/f-7.jpg"
},
{
id: 8,
parentId: 6,
name: "Max Ford",
title: "Budget manager",
phone: "989-474-8325",
mail: "hunter@teleworm.us",
image: "images/f-6.jpg"
},
{
id: 9,
parentId: 7,
name: "Riley Bray",
title: "Structural metal fabricator",
phone: "479-359-2159",
image: "images/f-3.jpg"
},
{
id: 10,
parentId: 7,
name: "Callum Whitehouse",
title: "Radar controller",
phone: "847-474-8775",
image: "images/f-2.jpg"
}
]
});
$('.get-left,.get-down,.get-up,.get-right').remove();
$(document).ready(function() {
$(".get-oc-c").css("overflow","scroll");
})#people {
width: 90%;
height: 90%;
border:1px solid #000;
}<link href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<div id="people"></div>
