Google chart is not loading in asp.net using JSON

Question

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

Is that the reason I am getting the "Row Error" in my json array.because it is initially not in the database. — Hisham Nawzer
– Hisham Nawzer, Commented Apr 3, 2018 at 16:09
in order to create google's data table directly from json, the json must be in this specific format , otherwise you will need to parse the json manually on the client , similar to this answer — WhiteHat
– WhiteHat, Commented Apr 3, 2018 at 17:10
@WhiteHat I was using your code to manually parse the json in to the relevant format. but it gives an error :Invalid data table format: must have at least 2 columns. — Hisham Nawzer
– Hisham Nawzer, Commented Apr 3, 2018 at 17:48
was just an example, you'll need to adjust according to your format, which differs slightly... — WhiteHat
– WhiteHat, Commented Apr 3, 2018 at 18:13

Aristos · Accepted Answer · 2018-04-03 15:43:21Z

1

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

answered Apr 3, 2018 at 15:43

Aristos

66.7k16 gold badges117 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Google chart is not loading in asp.net using JSON

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related