.net 래퍼를 사용하는 Google 차트에서 '테이블에 열이 없습니다'오류가 발생합니다.

Question

Google.DataTable.Net.Wrapper를 사용하여 Google 차트에 JSON 데이터를 전달하고 꺾은 선형 차트를 만들려고합니다. 내 웹 서비스에 대한 호출은 JSON을 되돌려 보내고 있습니다. JSON은 완전히 유효하지만, Google에서 '테이블에 열이 없습니다'라는 오류 만 표시됩니다. 나는 이것을 너무 오랫동안보고 있었고 문제가 무엇인지 보지 못했습니다. 그래서 어떤 도움을 주시면 감사하겠습니다.

내 렌더링 JS 코드는 아래와 같다 :

<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> 

다음 반환 된 JSON는 (저 완벽 유효 보이는)이다

{ 
"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}]} 
    ] 
} 

사용하여 데이터를 생성하는 .NET 코드 .NET 래퍼는 다음과 같습니다.

[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

결국 나는이 일을 많이하고 있다고 생각했습니다. 그것이 필요했던 것보다 더 복잡했다. 그리고 나는 KISS (Keep It Simple Stupid) 원칙으로 돌아 가기로 결정했다. 이 문제는 내 문제가 해결 된 다음 변경 내용과 관련이 있습니다.

1.) getChartData 웹 서비스를 호출하고 JSON으로 다시 데이터를 반환하는 코드를 제거했습니다. 이는 또한 Google .NET Datatable 래퍼를 더 이상 사용하지 않음을 의미합니다.

2.) 저는 이제 Google 테이블을 렌더링하고 따라서 arrayToDataTable 구조를 작성하기 위해 프로그래밍 방식으로 자바 스크립트를 생성하고 있습니다 (이전 DataTable보다 훨씬 간단하고 덜 민감합니다).

동적으로 자바 스크립트가 이제 다음 내 구글 차트가 렌더링되는 모양 생성 내 :

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); } 

내가 일할 수있는 웹 서비스 호출을 얻으려고 모든 시간을 낭비만을 죄송합니다. 그게 얼마나 큰 시간 낭비 였어. 학습 할 교훈 - 누군가가 코드 예제에서 특정 방법을 사용했기 때문에 정확하게 따라야 함을 의미하지는 않습니다. 그렇게 간단하게 만들 수 있다면 그렇게하십시오. 나는 이것이 다른 누군가를 돕기를 바랍니다.