2016-07-30 14 views
1

これまでのご協力ありがとうございます!私は正常に私のWebサービスとNVD3.js積み重ねエリアチャートを構築することができました。しかし、私は自分のWebサービスからJsonデータをNVD3.jsグラフに渡すことに成功せず、苦労しています。私のウェブフォームでは、ある間隔の2つの日付を選択し、「go」ボタンをクリックします。ウェブサービスから返されたjsonデータをD3.json(...)に渡すにはどうすればよいですか?

私が紛失していることは明らかです。可能でない場合、私のグラフに渡すことができるように、私のWebサービスから返されたjsonデータを通常のファイル(myFile.jsonなど)に保存する方法はありますか?ご助力ありがとうございます!ここに私の最新の試みです:

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#btGO").click(function(){ 
       var startDate = $("#startDate").val(); 
       var endDate = $("#endDate").val(); 

       $.ajax({ 
        url: "dataWebService.asmx/getCasesForDateInterval", 
        method: "post", 
        data: { 
         startDate: startDate, 
         endDate: endDate 
        }, 
        dataType: "json", 
        contentType: "application/json", 
        success: function (data) { 
         //This is where I attempt to pass my json data 
         d3.json(data, function (error, data) { 
          nv.addGraph(function() { 
           var chart = nv.models.stackedAreaChart() 
               .x(function (d) { return d[0] }) 
               .y(function (d) { return d[1] }) 
               .clipEdge(true) 
               .useInteractiveGuideline(true); 

           chart._options.controlOptions = ['Expanded', 'Stacked']; 

           chart.xAxis 
            .showMaxMin(true) 
            .tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) }); 

           chart.yAxis 
            .tickFormat(d3.format(',.0f')); 

           d3.select('#chart svg') 
            .datum(data) 
            .transition().duration(500).call(chart); 

           nv.utils.windowResize(chart.update); 

           return chart; 
          }); 
         }); 
        } 
       }); 

      }); 
     }); 
    </script> 

ここでは私のWebサービスです。

[WebMethod] 
    public string getTotalForDateInterval(string startDate, string endDate) 
    { 
    string cs = ConfigurationManager.ConnectionStrings["vetDatabase_Wizard"].ConnectionString; 
    List<keyValues> master = new List<keyValues>(); 

    using (SqlConnection con = new SqlConnection(cs)) 
    { 
     SqlCommand cmd = new SqlCommand("sp_CountAndGroupByDate", con); 
     cmd.CommandType = CommandType.StoredProcedure; 

     //Linking SQL parameters with webmethod parameters 
     SqlParameter param1 = new SqlParameter() 
     { 
      ParameterName = "@startDate", 
      Value = startDate 
     }; 

     SqlParameter param2 = new SqlParameter() 
     { 
      ParameterName = "@endDate", 
      Value = endDate 
     }; 

     cmd.Parameters.Add(param1); 
     cmd.Parameters.Add(param2); 
     con.Open(); 

     //Get time in milliseconds 
     DateTime start = DateTime.ParseExact(startDate, "yyyy-MM-dd", System.Globalization.CultureInfo.InvariantCulture); 
     DateTime end = DateTime.ParseExact(endDate, "yyyy-MM-dd", System.Globalization.CultureInfo.InvariantCulture); 
     DateTime utime = DateTime.ParseExact("1970-01-01", "yyyy-MM-dd", System.Globalization.CultureInfo.InvariantCulture); 

     long startMilliseconds = (long)((start - utime).TotalMilliseconds); 
     long endMilliseconds = (long)((end - utime).TotalMilliseconds); 
     const long oneDayInMilliseconds = 86400000; 

     //Declare temp dictionary to store the lists 
     Dictionary<string, List<long[]>> temp = new Dictionary<string, List<long[]>>(); 
     string[] buildings = { "SSB", "GEN", "LYM", "LUD", "GCC", "MAC", "MMB" }; 

     //Create building lists and initialize them with individual days and the default value of 0 
     foreach (string building in buildings){ 
      temp.Add(building, new List<long[]>()); 
      for (long j = startMilliseconds; j <= endMilliseconds; j = j + oneDayInMilliseconds){ 
       long[] timeTotal = { j, 0 }; 
       temp[building].Add(timeTotal); 
      } 
     } 

     SqlDataReader rdr = cmd.ExecuteReader(); 
     while (rdr.Read()) 
     { 

      //Remove time from dateTime2 and assign totals for appropriate date 
      string s = (rdr["dateOpened"].ToString()).Substring(0, 10); 
      DateTime dateOpened = DateTime.ParseExact(s, "yyyy-MM-dd", System.Globalization.CultureInfo.InvariantCulture); 
      long time = (long)((dateOpened - utime).TotalMilliseconds); 
      long total = (long)Convert.ToInt32(rdr["total"]); 

      string buildingName = rdr["building"].ToString(); 
      int index = temp[buildingName].FindIndex(r => r[0].Equals(time)); 
      temp[buildingName][index][1] = total; 
     } 
      //add all the keyValue objects to master list 
      for (int i = 0; i < buildings.Length; i++) 
      { 
       keyValues kv = new keyValues(); 
       kv.key = buildings[i]; 
       kv.values = temp[kv.key]; 
       master.Add(kv); 
      } 

     } 
    JavaScriptSerializer js = new JavaScriptSerializer(); 

    //Serialize list object into a JSON array and write in into the response stream 
    string ss = js.Serialize(master); 
    return ss; 

} 

ここに私のWebサービスから返されるJSONの構造があります。私は、スクリプトタグ内のファイルを取得します:

enter image description here

+0

このテーマに関する重複した質問はたくさんあります。彼らの中には、あなたが答えなかったコメントや答えを人々が提供しているものもあります。これはスタックオーバーフローのエチケットに非常に苦慮しており、ユーザーはあなたを助けようとしません。例えば、私が以下に与える回答(回答を複製する)(@stackoverflow.com/a/37759986/16363)@cyrilは1ヶ月以上前にあなたを与えました。 – Mark

+0

@マークハイマーク!あなたの答えをありがとう。私はあなたに同意する:私は非常に似たような/重複した質問を返信していない間に投稿し、それは悪く見える。私がちょうどGoogleの検査官を使って拾った無関係なバグのために、解決策は機能しませんでした。それでも、私は彼らに返答すべきだった。私は時には集中的になって、他者に対して無礼になることもあります。私はそれをお詫び申し上げます。 – Johnathan

答えて

1

あなたが$.ajaxd3.jsonの両方を呼び出す必要はありません、これらのメソッドは、同じことを行うと、私はちょうど使用します。

d3.json("dataWebService.asmx/getCasesForDateInterval", function (error, data) { 

第二に、 $.ajaxコールを使用すると、Webブラウザでナビゲートできるため、実際にはGETではなくPOSTになります。

第3に、あなたの最大の問題は、WebサービスがJSONを返さないことです。 XMLでラップされたJSON文字列を返しています(これはの既定値であり、Microsoft SOAPベースのWebサービスのより古い)。この属性をメソッドの最上部に追加することで、JSONを強制的に有効にすることができます。

[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] 
public string getTotalForDateInterval(string startDate, string endDate) 
関連する問題