google charts using .net wrapper produces 'Table has no columns' error

Question

I an using the Google.DataTable.Net.Wrapper to pass JSON data to Google charts and try to create a line chart. The call to my web service is passing back JSON, which looks completely valid to me,, but I am only getting a "Table has no columns" error from Google. I have been looking at this for way too long and do not see what the problem is, so any help would be appreciated.

My rendered JS code is below:

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


    function drawChart() {
        var jsonData = $.ajax({
            type: "POST",
            url: "ChartData.asmx/getChartData",
            data: "{'numberToReturn': 'AvgPriceSqFt', 'parish': 'EBR', 'sub': 'AZALEA LAKES', 'timeFrame': '1Year'}",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            async: false
        }).responseText;
        var data = new google.visualization.DataTable(jsonData, 0.6);
        var options = { width: 1000, curveType: "function", vAxis: { maxValue: 200 },
            title: "Average Price Per Square Foot"
        };
        var chart = new google.visualization.LineChart(document.getElementById('AvgPriceSqFt'));
            chart.draw(data, options);
        }


    </script>
     <div id="AvgPriceSqFt"></div>

The JSON that is returned is as follows (which looks perfectly valid to me)

{
 "cols": 
    [
        {"type": "string" ,"id": "Date" }, 
        {"type": "number" ,"id": "AZALEA LAKES" }
    ], 
 "rows" : 
    [
        {"c" : [{"v": "01-2013"}, {"v": 128.6}]}, 
    {"c" : [{"v": "02-2013"}, {"v": 115.84}]}, 
    {"c" : [{"v": "03-2013"}, {"v": 113.7}]}, 
    {"c" : [{"v": "04-2013"}, {"v": 118.09}]}, 
    {"c" : [{"v": "06-2013"}, {"v": 97.01}]}, 
    {"c" : [{"v": "07-2013"}, {"v": 128.57}]}, 
    {"c" : [{"v": "08-2013"}, {"v": 98.57}]}, 
    {"c" : [{"v": "09-2013"}, {"v": 125.54}]}
    ]
}

The .NET code that generates the data using the .NET wrapper is as follows:

[WebMethod]
        public string getChartData(string numberToReturn, string parish, string sub, string timeFrame)
        {
        google.DataTable gdt = new google.DataTable();
        sql.DataTable sdt = new sql.DataTable();

        gdt.AddColumn(new google.Column(google.ColumnType.String, "Date", "Date"));
        gdt.AddColumn(new google.Column(google.ColumnType.Number, sub, "Subdivision"));
        sdt = GetSqlData(numberToReturn, parish, sub, timeFrame);
        for (int i = 0; i <= sdt.Rows.Count - 1; i++)
        {
            var row = gdt.NewRow();
            row.AddCellRange(new[] {
                new google.Cell(sdt.Rows[i]["date"].ToString()),
                new google.Cell(sdt.Rows[i]["number"].ToString())
            });
            gdt.AddRow(row);
        }



        return gdt.GetJson();
    }

Answer 1

It finally occurred to me that I was making this thing much more complicated than it needed to be, and I decided to go back to the KISS (Keep It Simple Stupid) principle. This involved the following changes, in which my problem has been solved:

1.) I got rid of the code to call the getChartData web service and return my data back as JSON. This also means I am no longer using the Google .NET Datatable wrapper.

2.) I am now programtically generating the Javascript to render the Google table and therefore building an arrayToDataTable structure (which is much simpler and less sensitive than the former DataTable I was using).

My dynamically generated Javascript now looks like the following and my Google Chart is being rendered:

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
   var data = google.visualization.arrayToDataTable([
   ['Date', 'AZALEA LAKES'],
   ['01-2013', 128.6], 
   ['02-2013', 115.84], 
   ['03-2013', 113.7],
   ['04-2013', 118.09], 
   ['06-2013', 97.01],
   ['07-2013', 128.57], 
   ['08-2013', 98.57], 
   ['09-2013', 125.54]]);

var options = {width: 1000, curveType: "function", vAxis: { maxValue: 200 }, 
           title: "Average Price Per Square Foot"};  
var chart = new google.visualization.LineChart(document.getElementById('AvgPriceSqFt')); 
                    chart.draw(data, options); }

I am only sorry I wasted all that time trying to get the web service call to work. What a GIANT time waster that was. Lesson to learn - Just because someone does something a certain way in a code example, doesn't mean you should follow it exactly. If you can make it simpler, do so. I hope this helps someone else.