# Other Languages > jQuery >  jchart and database

## ERUM

hi to all



Please let me knwo how to cover these with datatable if data comes from northwind datatable

http://support.softwarefx.com/jChart...5-0019b9e6b500 ..





in above link data is hard coded ..

----------


## ERUM

I need to bind json db method with chart jhcartfx ..but it does not showing any thing 

Please check attached code 


```
<body onload="loadChart()">
<div id="ChartDiv" style="width:600px;height:400px"></div>
<script type="text/javascript" language="javascript">
    var chart1;

    function loadChart()
      {        
           chart1 = new cfx.Chart();
            chart1.getData().setSeries(2);
            chart1.getAxisY().setMin(500);
            chart1.getAxisY().setMax(2000);
            var series1 = chart1.getSeries().getItem(0);
            var series2 = chart1.getSeries().getItem(1);
            series1.setGallery(cfx.Gallery.Lines);
            series2.setGallery(cfx.Gallery.Bar);
            
         


  $.ajax({   
     type: "POST",
     url: "MyService.asmx/RecordsTest",  
//     data: "{ 'loginid': " +"'"+ $("#txt_login").val()+"'" + ", 'pass': " + "'" + $("#txt_pass").val()+"'" + "}",
data: "{}", 
      contentType: "application/json; charset=utf-8",  
      dataType: "json",     
      success: OnSuccess1,
      error: OnError1   
      });    
      
      
      
      function OnSuccess1(data, status) {   
      
        for (var i = 0; i < data.d.length; i++) {
 
  var data = [
            { "ID": data.d[i].id, "NAME": data.d[i].name, "age": data.d[i].age },
         
            ];
 }
      chart1.setDataSource(data);
      var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);   

    
//      $("#tbl").append("<tr bgcolor= #FFFF00><th>ID</th><th>NAME</th><th>age</th></tr>");
//      for (var i = 0; i < data.d.length; i++) {
// 
// $("#tbl").append("<tr><td>" + (data.d[i].id) + "</td><td>" + (data.d[i].name) + "</td><td>" + (data.d[i].age) + "</td></tr>");
// }
      
       // $("#tbl").fadeOut();
       } 
       function OnError1(request, status, error) { 
    $("#Label1").html(request.statusText);      
       } 
            
          //  chart1.setDataSource(data);
            var divHolder = document.getElementById('ChartDiv');
            chart1.create(divHolder);            
      }

</script>
</body>
```

key method use is loadChart

and json method is 

```
    public Details[] RecordsTest()
        {
            List<Details> details = new List<Details>();


            //if (loginid == "Admin")
            //{
            //    return "Exist";
            //}

            //return "Not exist";



            DataTable dtt = new DataTable("Table");

            dtt.Columns.Add(new DataColumn("id", Type.GetType("System.Int32")));

            dtt.Columns.Add(new DataColumn("name", Type.GetType("System.String")));

            dtt.Columns.Add(new DataColumn("age", Type.GetType("System.Int32")));


            dtt.Rows.Add(1, "A", 12);

            dtt.Rows.Add(2, "B", 11);

            dtt.Rows.Add(3, "C", 10);

            dtt.Rows.Add(4, "D", 09);

            //created a list<> with class Details

            List<Details> detail = new List<Details>();

            foreach (DataRow dt_row in dtt.Rows)
            {

                Details usr = new Details();

                usr.id = Convert.ToInt32(dt_row["id"]);

                usr.name = dt_row["name"].ToString();

                usr.age = Convert.ToInt32(dt_row["age"]);

                detail.Add(usr);

            }

            return detail.ToArray();  // returning records of array


        }
```

----------

