title: I am trying to pass a json file generated with a webservice to an NVD3 graph
body: <p>I have posted a similar question. I am relatively new to ASP.NET and webservices. Thanks to the online community, I was able to attempt linking my webservice to my NVD3 stackArea graph. Everything works when I first save the json file then use it on my webform. However, I want to link the entire process. I feel that I am very close and would greatly appreciate the community's feedback. Here is my webform:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
   &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
      &lt;link href="css/nv.d3.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="Content/bootstrap.min.css" rel="stylesheet"/&gt;
      &lt;link href="css/pikaday.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="css/theme.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="css/site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="scripts/Pikaday/moment.js" type="text/javascript"  &gt;&lt;/script&gt;
      &lt;script src="scripts/Pikaday/pikaday.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="scripts/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/d3.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="scripts/nv.d3.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  .singleLabel{
      min-height: 20px;
      text-align: left;
      font-size: large;
      margin-bottom:2px;
  }
  .textBox{
      border-left-width: 1px;
      min-height: 20px;
      text-align: center;
      font-size: large;
      margin-bottom:2px;
  }
  .textbox.dropDown{
      text-align: right;
  }
  text {
      font: 12px sans-serif;
  }
  html, body, #chart, svg{
      margin: 0 1px;
      height: 100%;
      width: 100%;
  }
  #chart{
         height: 70vh;
  }
  
  .nv-x text{
      font-size: 20px;
  }
  .nv-y text{
      font-size: 20px;
  }
  .nv-series text {
      font-size: 20px;
  }
  .row {
      font-size: 30px;
  }
  .column{
  
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;form id="form1" runat="server"&gt;
     &lt;div class="row"&gt;&amp;emsp;Report from:&amp;emsp;
     &lt;asp:TextBox ID="startDate" runat="server" columns="6" style="border:1px solid #ff0000"&gt;&lt;/asp:TextBox&gt;
     &amp;emsp;To&amp;emsp;
     &lt;asp:TextBox ID="endDate" runat="server" columns="6" style="border:1px solid #ff0000"&gt;&lt;/asp:TextBox&gt;
     &amp;emsp;&lt;input type="button" id="btGO" value="Go!" /&gt;
  
  
     &lt;%-- Date picker for start and end --%&gt;
     &lt;script = "text/javascript"&gt;
        var picker = new Pikaday({
             field: document.getElementById("startDate"),
             firstDay: 1,
             format: "YYYY-MM-DD",
             minDate: new Date('2000-01-01'),
             maxDate: new Date('2020-12-31'),
             yearRange: [2000,2020],
             numberOfMonths: 2
        });
     &lt;/script&gt;
  
      &lt;script = "text/javascript"&gt;
        var picker = new Pikaday({
             field: document.getElementById("endDate"),
             firstDay: 1,
             format: "YYYY-MM-DD",
             minDate: new Date('2000-01-01'),
             maxDate: new Date('2020-12-31'),
             yearRange: [2000,2020],
             numberOfMonths: 2
        });
     &lt;/script&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-lg-12"&gt;
  &lt;div id="chart"&gt;
      &lt;svg&gt;&lt;/svg&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      &lt;%--JQuery ensures that scripts run safely by waiting for all the required files to load first--%&gt;
      $(document).ready(function () {
          $(document).on("click", "#btGO", function () {
              var startDate = $("#startDate").val();
              var endDate = $("#endDate").val();
  
              $.ajax({
                  url: "dataWebService.asmx.cs/getTotalForDateInterval",
                  data: {
                      startDate: startDate,
                      endDate: endDate
                  },
                  dataType: "json"
              }).done(function (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;
                      });
                  });
              });
          });
      });
  
  &lt;/script&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my webservice:</p>
  
  <pre><code> [WebMethod]
          public void getTotalForDateInterval(string startDate, string endDate)
          {
              string cs = ConfigurationManager.ConnectionStrings["vetDatabase_Wizard"].ConnectionString;
              List&lt;keyValues&gt; master = new List&lt;keyValues&gt;();
  
              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&lt;string, List&lt;long[]&gt;&gt; temp = new Dictionary&lt;string, List&lt;long[]&gt;&gt;();
                  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&lt;long[]&gt;());
                      for (long j = startMilliseconds; j &lt;= 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 =&gt; r[0].Equals(time));
                      temp[buildingName][index][1] = total;
                  }
                      //add all the keyValue objects to master list
                      for (int i = 0; i &lt; 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
                  Context.Response.Write(js.Serialize(master));
              }
          }
  </code></pre>