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.