Question

I am working in Google visualization charts. I had designed a orgChart. Here is my code.

 <script type='text/javascript'>
    google.load('visualization', '1', { packages: ['orgchart'] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');

        data.addRows([
    [{ v: 'TOP', f: 'TOP' }, ''],
    [{ v: 'TOP CO', f: 'TOP CO' }, 'TOP'],
    [{ v: 'TOP FR', f: 'TOP FR' }, 'TOP'],
    [{ v: 'EAST', f: 'EAST' }, 'TOP CO'],
    [{ v: 'WEST', f: 'WEST' }, 'TOP CO'],
    [{ v: 'FRAN', f: 'FRAN' }, 'TOP FR'],
    [{ v: 'ADIRAN', f: 'ADIRAN' }, 'EAST'],
    [{ v: 'FINGER', f: 'FINGER' }, 'EAST'],
    [{ v: 'CENTRAL', f: 'CENTRAL' }, 'WEST'],
    [{ v: 'NORTH', f: 'NORTH' }, 'WEST']
    ]);

   var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
   chart.draw(data, { allowHtml: true });

   google.visualization.events.addListener(chart, 'select', function () {
   var selection = chart.getSelection()[0];
   var label = data.getColumnLabel(selection.column);
   alert(label);
 });

}

I am very new to this concept. Whenever i am clicking any data, i am getting the error like

Microsoft JScript runtime error: Invalid column index undefined. Should be an integer in the range [0-1].

Whether the data format which i had given is wrong or else i need to any other thing. My requirement is, when i click the data means, the clicked value should be displayed in ALERT BOX.

Answer 1

I realize that this is an old post, but I thought it might help others if it gets solved.

You are not able to achieve your goal since the table visualization only handles row selections. The column will always be undefined.