title: JSON Dropdown Data
body: <pre><code>    I am new to Ajax Call How to send dropdown selected values to my webmethod.
  after selection of dropdown my charts are not rendering.. 
         My Ajax Call:
           $(document).ready(function(){ 
  
                      $.ajax({
  
                   type: "POST",
                  url : "HazzardsDashBoards.aspx/GetReport",
                  data: "{myparam1,myparam2}",                
                  contentType: 'application/json',
                  dataType: 'json',
                  complete: function (jqXHR) 
                  {
                      var data = JSON.parse(jqXHR.responseText);
                     alert(JSON.stringify(data));
                      TrendChart(data);
                 } ,
                  error: function (error) {
                      alert("error");
                  }
  
            });
          });
  
          My Method:
          [WebMethod]
                  public static List&lt;Dictionary&lt;string, object&gt;&gt; GetReport()
                  {
                      List&lt;Dictionary&lt;string, object&gt;&gt; rows = new List&lt;Dictionary&lt;string, object&gt;&gt;();
  
                      try
                      {
                          string strQry = string.Empty;
  
                          strQry = " select YEAR(dt_ModifiedOn)[date],COUNT(*) [HazardCount] from tbl_name ";
                          strQry += " where int_PluginID = 4 and int_FeatureID=35  ";
                          strQry += " group by year(dt_ModifiedOn) ";
  
                          using (commonManager)
                          {
                              DataTable dt = commonManager.ExecuteDataTable(strQry);
  
                              Dictionary&lt;string, object&gt; row;
                              foreach (DataRow dr in dt.Rows)
                              {
                                  row = new Dictionary&lt;string, object&gt;();
                                  foreach (DataColumn col in dt.Columns)
                                  {
                                      row.Add(col.ColumnName, dr[col]);
                                  }
                                  rows.Add(row);
                              }
                          }
                      }
                      catch (Exception ex)
                      {
  
                          throw ex;
                      }
                      return rows;
                  }
  ///
  Trendchart script:
   function TrendChart(modelData)
    {
      var data = modelData.d;
      //alert(JSON.stringify(data));
  
      var margin = {top: 20, right: 80, bottom: 30, left: 50},
      width = 650 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;
  
  var parseDate = d3.time.format("%Y").parse;
  
  var x = d3.time.scale()
      .range([0, width]);
  
  var y = d3.scale.linear()
      .range([height, 0]);
  
  var color = d3.scale.category10();
  
  var xAxis = d3.svg.axis()
      .scale(x)
       .tickPadding(8)
       .ticks(5)
      .orient("bottom");
  
  
  var yAxis = d3.svg.axis()
      .scale(y)
     .tickSize(-width, 0, 0)
    .tickFormat(d3.format('d'))
      .orient("left");
  
  
  var line = d3.svg.line()
       .interpolate("cardinal")
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.temperature); });
  
  var svg = d3.select("#divTrend").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
  
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
  
    data.forEach(function(d) {
      d.date = parseDate(d.date.toString());
    });
  
    var cities = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {date: d.date, temperature: +d[name]};
        })
      };
    });
  //alert(JSON.stringify(cities));
  
    x.domain(d3.extent(data, function(d) { return d.date; }));
  
    y.domain([
      d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
      d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
    ]);
  
  
  //svg.append("text")
  //     .attr("x",width/2)
  //     .attr("y",height+margin.bottom)
  //     .attr("text-anchor","middle")
  //     .text("Year")
  
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
  
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("HeadCount");
  
    var city = svg.selectAll(".city")
        .data(cities)
      .enter().append("g")
        .attr("class", "city");
  
    city.append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values); })
        .style("stroke", function(d) { return color(d.name); });
  
    city.append("text")
        .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
        .attr("x", 3)
        .attr("dy", ".35em")
        .text(function(d) { return d.name; });
  ///
  </code></pre>
  
  <p>I need to send the dropdown details to the above method..
      After that i need to render chart based on the data.
  Please check i had mentioned my trendchart script. and in pageload chart is not rendering i was struck there where it went wrong</p>