CODEWITHSUNDEEP
asp.netjsongoogle-visualization
Hisham Nawzer
Hisham Nawzer

Reputation: 27

Google chart is not loading in asp.net using JSON

I am trying to visualize data using google charts.But the chart is not displaying.I want to display data which is retrieved from sqlserver database here is my code.

 <div id="chart_div" style="width:500px;height:400px">
            <%-- Here Chart Will Load --%>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawStuff);

  function drawStuff() {
      var jdata = $.ajax({
          url: "GetData.aspx",
          dataType: "json",
          async: false
      }).responseText;

      var data = new google.visualization.DataTable(jData);
      var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: {
              title: 'Chess opening moves',
              subtitle: 'popularity by percentage'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
              x: {
                  0: { side: 'top', label: 'amount' } // Top x-axis.
              }
          },
          bar: { groupWidth: "90%" }
      };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, options);
};
</script>


        </div>

GetData.aspx

public partial class GetData : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            JavaScriptSerializer js = new JavaScriptSerializer();
            string arr = JsonConvert.SerializeObject(get(), Formatting.None,
    new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore });

            Response.Write(arr);
        }

        private object get()
        {
            List<object> ls = new List<object>();
            SqlConnection con = new SqlConnection("Data Source=dell-pc;Initial Catalog=hospital;Integrated Security=True");
            SqlCommand cmd = new SqlCommand("select top(5) p_id, amount from payments", con);

            con.Open();
            DataTable dt = new DataTable();
            SqlDataAdapter adp = new SqlDataAdapter(cmd);

            adp.Fill(dt);
            foreach (DataRow dr in dt.Rows)
            {
                ls.Add(dr);
            }

            return ls;
        }
    }

The JsonArray loads as follows.

[{"RowError":"","RowState":2,"Table":[{"p_id":"PT1","amount":7000.0000},{"p_id":"PT2","amount":35000.0000},{"p_id":"PT8","amount":95000.0000},{"p_id":"PT10","amount":51000.0000},{"p_id":"PT3","amount":1200.0000}],"ItemArray":["PT1",7000.0000],"HasErrors":false},{"RowError":"","RowState":2,"Table":[{"p_id":"PT1","amount":7000.0000},{"p_id":"PT2","amount":35000.0000},{"p_id":"PT8","amount":95000.0000},{"p_id":"PT10","amount":51000.0000},{"p_id":"PT3","amount":1200.0000}],"ItemArray":["PT2",35000.0000],"HasErrors":false},{"RowError":"","RowState":2,"Table":[{"p_id":"PT1","amount":7000.0000},{"p_id":"PT2","amount":35000.0000},{"p_id":"PT8","amount":95000.0000},{"p_id":"PT10","amount":51000.0000},{"p_id":"PT3","amount":1200.0000}],"ItemArray":["PT8",95000.0000],"HasErrors":false},{"RowError":"","RowState":2,"Table":[{"p_id":"PT1","amount":7000.0000},{"p_id":"PT2","amount":35000.0000},{"p_id":"PT8","amount":95000.0000},{"p_id":"PT10","amount":51000.0000},{"p_id":"PT3","amount":1200.0000}],"ItemArray":["PT10",51000.0000],"HasErrors":false},{"RowError":"","RowState":2,"Table":[{"p_id":"PT1","amount":7000.0000},{"p_id":"PT2","amount":35000.0000},{"p_id":"PT8","amount":95000.0000},{"p_id":"PT10","amount":51000.0000},{"p_id":"PT3","amount":1200.0000}],"ItemArray":["PT3",1200.0000],"HasErrors":false}]

I think there is something wrong when json is loading. please help

Upvotes: 0

Views: 162

Answers (1)

Aristos
Aristos

Reputation: 66641

The main reason here that you fail to load json data is probably because you use a full aspx page GetData.aspx (and there you send wrong header, content type)

Change that to a handler, make a new handler not just rename the page, something like getdata.ashx and place there your code.

Be sure to send the correct content type context.Response.ContentType, and check that you send only the correct json data

the answers here can help : ASP.NET Returning JSON with ASHX

Upvotes: 1

Related Questions