I'm attempting to build an org chart via google visualization that updates through AJAX calls using an ASP Update panel. However, instead of the chart refreshing on the ajax update, the chart just disappears. Anybody have any ideas? Thanks
<input type="button" id="cmdUpdate" onclick="__doPostBack('panel', '');" value="Update" />
<div id="divGChart" runat="server" style="width: 100%; overflow: auto;">
<asp:UpdatePanel id="panel" runat="server" >
<ContentTemplate>
<div id="chart_div" runat="server" >
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<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.addColumn('string', 'ToolTip');
data.addRows([
[{ v: '10131', f: '10131'}, '', '10131'],
[{ v: '10132', f: '10132'}, '10131', '10132'],
[{ v: '10133', f: '10133'}, '10131', '10133'],
[{ v: '10134', f: '10134'}, '10131', '10134']
);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowCollapse: true, allowHtml: true});
}
</script>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Dont know if you still have an issue with this, but it might be helpful for others in the future.
This is apparently a known bug that has been fixed in version 1.1 all you need to do is to change
google.load('visualization', '1', { packages: ['orgchart'] });
to
google.load('visualization', '1.1', { packages: ['orgchart'] });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With