On Click toggle Google org chart viz?

Question

I am reading in JSON data and trying to construct the nodes from that data. I want the ability to click and toggle showing more under the person. It was working without reading in JSON data, but now that I am reading from there it broke? So I am not too sure whats wrong? Here is the toggle snippit, and I added a jsfiddle to look at the full code? Any ideas? Am I constructing the JSON data wrong?

    var runonce = google.visualization.events.addListener(chart, 'ready', function() {
    var previous;
    $('#chart_div').on('click', 'div', function () {
        console.log(this);
        var selection = chart.getSelection();
        var row;
        if (selection.length == 0) {
            row = previous;
        }
        else {
            row = selection[0].row;
            previous = row;
        }
        var collapsed = chart.getCollapsedNodes();
        var collapse = (collapsed.indexOf(row) == -1);
        chart.collapse(row, collapse);
        chart.setSelection();
    });
    google.visualization.events.removeListener(runonce);

    for (var i = 0; i < data.getNumberOfRows(); i++) {
        chart.collapse(i, true);
    }
});

http://jsfiddle.net/w8Ytq/63/

Answer 1

I would recommend using the select event on the chart, onclick didn't seem to fire for me.

Another problem may be that each row is being collapsed after the initial draw.
Although the top person is clicked, since the other rows are still collapsed they fail to appear, not sure.

 var orgChartData = [ { "Name": "Tom", "Role": "VP", "Email": "Tom@aol.com", "Manager": "" }, { "Name": "Ben", "Role": "Manager", "Email": "Ben@aol.com", "Manager": "Tom" }, { "Name": "Billy", "Role": "Manager", "Email": "Billy@aol.com", "Manager": "Tom" } ]; google.load('visualization', '1', {packages: ['orgchart']}); google.setOnLoadCallback(drawChart); function drawChart() { var previous = 0; var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); for (i = 0; i < orgChartData.length; i++) { data.addRow( [ { v: orgChartData[i].Name, f: orgChartData[i].Name + "<br>" + orgChartData[i].Role + "<br>" + '<a href="mailto:' + orgChartData[i].Email + '?Subject=Service Request" target="_top">' + orgChartData[i].Email + '</a>' }, orgChartData[i].Manager, orgChartData[i].Role ] ); } var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); google.visualization.events.addListener(chart, 'select', toggleDisplay); chart.draw(data, { allowHtml: true }); function toggleDisplay() { var selection = chart.getSelection(); var row; if (selection.length == 0) { row = previous; } else { row = selection[0].row; previous = row; } var collapsed = chart.getCollapsedNodes(); var collapse = (collapsed.indexOf(row) == -1); chart.collapse(row, collapse); chart.setSelection([{row: row, column: null}]); } } 

 <script src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>