I am using ASP.NET MVC3, Razor, jQuery Mobile and having some java scripts which calls Google Chart API, to draw Bar Chart (Visualization API). It is working fine on Desktop browsers but failing with strange errors in Android Browsers.
"Cannot read property 'appendchild' of null."
Java script code is inside "Body" element. following is the code:-
I tried to run it without master page, which include jquery mobile script files, same behavior, so jquery mobile is not to blame.
@model System.Collections.Generic.List<Insight.CloudWeb.ViewModels.KeyFigureViewModel>
@{
ViewBag.Title = "KeyFigures";
Layout = null;
}
google.load("visualization", "1", { packages: ["corechart","table"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
@foreach (var obj in Model)
{
@: data.addColumn('number', '@obj.Description @obj.Value');
}
i = 0;
data.addRows(1);
@foreach (var obj in Model)
{
@: data.setCell(0, i, @obj.Value);
@: i = i +1;
}
var chartBar = new google.visualization.BarChart(document.getElementById('chart_div'));
chartBar.draw(data, { height: 340, width: 500, title: 'Key Figures', chartArea: {left: 2, top: 2}, colors:['blue','red','green','yellow','orange','purple'],legend: 'right' });
}
</script>
<div id='chart_div'>
</div>
<div id='table_div'>
</div>
