I am trying to display Table charts using Google API. For the same I tried to format the data from ASP.net Webmethod like below
[WebMethod]
public static List<object> GetChartData()
{
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"Z1", "Z2" ,, "Z3"
});
chartData.Add(new object[] {"A", "B","A", "B","A", "B"});
return chartData;
}
I want to have my first row header column with colspan like below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["table"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Bug Tracker'
};
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.Table($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>