title: ajax Json Web Method with amcharts in asp.net
body: <blockquote>
    <p>Error: after calling the web method the map comes blank..NO map is
    displaying in page</p>
  </blockquote>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  
         &lt;link rel="stylesheet" href="ammap/ammap.css" type="text/css" media="all" /&gt;
       &lt;script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://www.amcharts.com/lib/3/pie.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://www.amcharts.com/lib/3/ammap_amcharts_extension.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://www.amcharts.com/lib/maps/js/worldLow.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script   src="https://code.jquery.com/jquery-2.2.1.js" 
  type="text/javascript"&gt;&lt;/script&gt;    
      &lt;script type="text/javascript"&gt;
  
              function createChart() {
                  debugger;
                  var chartData2 = [];
                  var chartDataResults =[];
                  $.ajax( {
                      type: 'POST',
                      dataType: 'json',
                      contentType: 'application/json',
                      url: 'AmGeochrt.aspx/GetDataonload',
                      data: {},
                      success: function( response ) {
                          var aData = response.d;
                          var id;
                          for ( var i = 0; i &lt;=0; i++ ) {
                              var country = aData[i].costtype;
                              if (country = "cambodia")
                              {
                                  id = "KH";
                              }
  
                                  chartDataResults.push( {
                                  "map": "worldLow",
                                  "areas": [
                                    { "id": id, "color": "#00CC00" },
                                    { "id": "FR", "color": "#0000CC" }]
  
  
                              } );
  
                          }
                          // create the chart here
                          var map;
                          map = new AmCharts.AmMap();
                          map.pathToImages = "http://www.ammap.com/lib/images/";
                          var dataProvider = {
                              mapVar: AmCharts.maps.worldLow
                          };
                          map.areasSettings = {
                              unlistedAreasColor: "#DDDDDD",
                              rollOverOutlineColor: "#FFFFFF",
                              rollOverColor: "#CC0000"
                          };
                          map.backgroundColor = "#000000";
                          debugger;
                          map.dataProvider = chartDataResults;
  
                          // WRITE                                 
                          map.write("mapdiv");
                                             }
                  } );
              }
  
              $( document ).ready( createChart );
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt; 
     &lt;div&gt;
      &lt;div id="mapdiv" style="width: 600px; height: 400px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;  
  [WebMethod]
          public static List&lt;ChartDetails&gt; GetDataonload()
          {
              string Constring = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString2"].ConnectionString.ToString();
              using (SqlConnection con = new SqlConnection(Constring))
              {
                  string totaldata = string.Empty;
  SqlCommand cmd = new SqlCommand("select distinct countryname from [trackbycountry] where CountryCode in('cn','kh','my','Th','ID','VN','PH')", con);
                 cmd.CommandTimeout = 50;
                  con.Open();
                  SqlDataAdapter da = new SqlDataAdapter(cmd);
                  //da.SelectCommand = cmd;
                  DataTable dt = new DataTable();
                  da.Fill(dt);
                  con.Close();
                  List&lt;ChartDetails&gt; dataList = new List&lt;ChartDetails&gt;();
  
                  foreach (DataRow dtrow in dt.Rows)
                  {
                      ChartDetails details = new ChartDetails();
  
                      SqlCommand cmd1 = new SqlCommand("select costtype,totalcount from [trackbycountry] where countryname='" + dtrow[0].ToString() + "' and totalcount&gt;1 order by costtype", con);
                      cmd.CommandTimeout = 50;
                      con.Open();
                      SqlDataAdapter da1 = new SqlDataAdapter(cmd1);
                      //da.SelectCommand = cmd;
                      DataTable dt1 = new DataTable();
                      da1.Fill(dt1);
                      con.Close();
                      if (dt1.Rows.Count &gt; 1)
                      {
                          foreach (DataRow dtrow1 in dt1.Rows)
                          {
                              //totaldata += dtrow1[0].ToString() + dtrow1[1].ToString() +"|";
                              totaldata += dtrow1[0].ToString() + ":" + dtrow1[1].ToString() + ",";
                          }
                          details.costtype = dtrow[0].ToString();
                          totaldata = "Country:" + dtrow[0].ToString() + "," + totaldata;
                          totaldata = totaldata.Substring(0, totaldata.Length - 1);
                          //string bal=totaldata.Replace("|", char(13)+char(10)");
                          details.costvalue = totaldata;
                          totaldata = "";
                          dataList.Add(details);
                      }
  
                  }
                  return dataList;
              }
          }
  
   class files for the web method
     public class ChartDetails   
          {
              public string costtype { get; set; }
              public string costvalue { get; set; }
          }
  </code></pre>
  
  <p><strong>Output</strong>[1]: <a href="http://i.stack.imgur.com/HRWOj.png" rel="nofollow">http://i.stack.imgur.com/HRWOj.png</a></p>