CODEWITHSUNDEEP
jsonchartsvisualization
Riki
Riki

Reputation: 11

Google Visualization - Org Chart using JSON

I'm having difficulty getting the Google organizational chart working with JSON data using the samples provided on Google API site, any assistance would be much appreciated.

The followings is the JSON that is being produced by a Web API controller

{"cols":[{"id":"name","label":"Name","type":"string"},{"id":"manager","label":"Manager","type":"string"}],"rows":[{"c":[{"v":"test1"}]},{"c":[{"v":"test2"},{"v":"test1"}]}]}

And here is the javascript

<script type='text/javascript'>

    // Load the Visualization API and the package.
    google.load('visualization', '1', { 'packages': ['corechart'] });

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var jsonData = $.ajax({
            url: "/api/Search/GetOrgChartData",
            dataType: "json",
            async: false
        }).responseText;

        // Create our data table out of JSON data loaded from server.
        var data = new google.visualization.DataTable(jsonData);

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, { width: 400, height: 240 });
    }
</script>

I was able to successfully implement the PieChart using the same JSON except the second column was a number instead of string.

Thank you for your assistance in advance.

Upvotes: 0

Views: 2886

Answers (1)

Riki
Riki

Reputation: 11

After a little break I worked out the issue.

The following line was incorrect; google.load('visualization', '1', { 'packages': ['corechart'] });

should be; google.load('visualization', '1', { 'packages': ['orgchart'] });

Upvotes: 1

Related Questions