How to bind OrgChart Library with customized data scource?

Question

I'm using OrgChart Library to bind JSON data source, but it returns error

"$(...).orgChart is not a function" .

thats datasource:

<link href="~/Content/jquery.orgchart.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="~/Scripts/jquery.orgchart.js"></script>

 <script>
    var dataSource = [
    { id: 1, name: "AAA", Role: "Manager", parent: 0 },
    { id: 2, name: "BBB", Role: "Developer", parent: 1 },
    { id: 3, name: "CCC", Role: "Developer", parent: 1 },
    { id: 4, name: "DDD", Role: "Team Leader", parent: 1 },
    { id: 5, name: "EEE", Role: "Developer", parent: 4 }
    ];
    (function ($) {
        $(function () {
            var org_chart = $('#orgChart').orgChart({
                data: dataScource,
                depth: 4
            });
        });

    })(jQuery);
</script>

how to bind this data source to OrgLibrary chart