locked
how to return dynamic array from web-services using ajax ? RRS feed

  • Question

  • User-1909056490 posted

    Hi,

    I need to return newData array from web-services which is in code. how could i get it?

    below format i need to return from web-services.

    var newData = [['Year', 'Sales', 'Expenses', 'Other'],
          ['2004', 1000, 400, 232],
          ['2005', 1170, 460, 421],
          ['2006', 660, 1120, 4324],
          ['2007', 1030, 540, 4234],
          ['2008', 1530, 50, 234]];

    Please help me.......

    function drawLineChart(dataValues, Header, xTitle, yTitle) {
    
        dataTable = new google.visualization.DataTable();
    
        var newData = [['Year', 'Sales', 'Expenses', 'Other'],
          ['2004', 1000, 400, 232],
          ['2005', 1170, 460, 421],
          ['2006', 660, 1120, 4324],
          ['2007', 1030, 540, 4234],
          ['2008', 1530, 50, 234]];
    
        // determine the number of rows and columns.
        var numRows = newData.length;
        var numCols = newData[0].length;
    
        // in this case the first column is of type 'string'.
        dataTable.addColumn('string', newData[0][0]);
    
        // all other columns are of type 'number'.
        for (var i = 1; i < numCols; i++) { dataTable.addColumn('number', newData[0][i]); }
    
        // now add the rows.
        for (var i = 1; i < numRows; i++) { dataTable.addRow(newData[i]); }
    
        //// redraw the chart.
        //chart.draw(dataTable, options);
    
        new google.visualization.LineChart(document.getElementById('visualization'))
                .draw(dataTable, { title: xTitle, hAxis: { title: yTitle, titleTextStyle: { color: 'green' } } });
    }

    Thanks in advance

    Friday, July 11, 2014 10:11 AM

Answers

  • User-417640953 posted

    Hi bhavik04,

    Thank you post the issue to asp.net forum.

    According to your description and code provided, I see you want to draw chart based on a data table structure and data

    using google api. For this issue, I think you should define two class for the data table. One used to describe table structure and

    one used to describe rows data. I made a demo based on your code.

    Web service:

    [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
        [System.Web.Script.Services.ScriptService]
        public class GetTable : System.Web.Services.WebService
        {
    
            [WebMethod]
            public TableStructure GetData()
            {
                var table = new TableStructure()
                {
                    columns = new List<string>() { "Year", "Sales", "Expenses", "Other" },
                    rows = new List<MyData>() {
                     new MyData{ Year="2004", Sales=1000,Expenses=400, Other=232},
                     new MyData{ Year="2005", Sales=1170,Expenses=460, Other=421},
                     new MyData{ Year="2006", Sales=660,Expenses=1120, Other=4324},
                     new MyData{ Year="2007", Sales=1030,Expenses=540, Other=4234},
                     new MyData{ Year="2008", Sales=1530,Expenses=50, Other=234}
                    }
    
                };
    
                return table;
            }
        }
    
        //rows data
        public class MyData
        {
            public string Year { get; set; }
            public int Sales { get; set; }
            public int Expenses { get; set; }
            public int Other { get; set; }
        
        }
        //columns structure...
        public class TableStructure 
        {  
            public List<string> columns { get; set; }
            public List<MyData> rows { get; set; }
        }

    page code:

    <head runat="server">
        <title></title>
         <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script>
             $(document).ready(function () {
                 $('#Button1').click(function () {
                     $.ajax({
                         type: 'POST',
                         dataType: 'json',
                         contentType: 'application/json',
                         url: 'GetTable.asmx/GetData',
                         data: "{name:'" + $("#SearchText").val() + "'}",
                         success:
                             function (response) {
                                 //alert(JSON.stringify(response.d));
                                 drawVisualization(response.d.columns, response.d.rows);
                             }
    
                     });
                 })
             });
             // Load the Visualization API and the piechart package.
             google.load('visualization', '1.0', { 'packages': ['corechart'] });
             // draws it.
             function drawVisualization(columns,rows) {
                 var dataTable = new google.visualization.DataTable();
                 var numRows = rows.length;
                 var numCols = columns.length;
                 // in this case the first column is of type 'string'.
                 dataTable.addColumn('string', columns[0]);
                 // all other columns are of type 'number'.
                 for (var i = 1; i < numCols; i++)
                 {
                     dataTable.addColumn('number', columns[i]);
                 }
                 
                 // now add the rows.
                 for (var i = 0; i < numRows; i++)
                 { 
                     dataTable.addRow([rows[i].Year, rows[i].Sales, rows[i].Expenses, rows[i].Other]);
                 }
    
                 new google.visualization.LineChart(document.getElementById('visualization'))
               .draw(dataTable, { title: 'title', hAxis: { title: 'yTitle', titleTextStyle: { color: 'green' } } });
    
    
                 //new google.visualization.LineChart(document.getElementById('visualization')).
                 //    draw(data, { title: "" });
             }
    
    
         </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="Button1" type="button" value="button" />
            <div id="visualization"></div>
        </div>
        </form>
    </body>

    Hope it helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 14, 2014 1:08 AM

All replies

  • User459955333 posted

    you can try 

    string[][] newData = new string[NumOfRecords][4];

    then add the data to this array. Return type for web method should be string[][] 

    Friday, July 11, 2014 11:04 AM
  • User-1909056490 posted

    Thanks

    but i don't know how to use it..

    please, can u give code ?

    Saturday, July 12, 2014 3:17 AM
  • User-417640953 posted

    Hi bhavik04,

    Thank you post the issue to asp.net forum.

    According to your description and code provided, I see you want to draw chart based on a data table structure and data

    using google api. For this issue, I think you should define two class for the data table. One used to describe table structure and

    one used to describe rows data. I made a demo based on your code.

    Web service:

    [WebService(Namespace = "http://tempuri.org/")]
        [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
        [System.ComponentModel.ToolboxItem(false)]
        // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
        [System.Web.Script.Services.ScriptService]
        public class GetTable : System.Web.Services.WebService
        {
    
            [WebMethod]
            public TableStructure GetData()
            {
                var table = new TableStructure()
                {
                    columns = new List<string>() { "Year", "Sales", "Expenses", "Other" },
                    rows = new List<MyData>() {
                     new MyData{ Year="2004", Sales=1000,Expenses=400, Other=232},
                     new MyData{ Year="2005", Sales=1170,Expenses=460, Other=421},
                     new MyData{ Year="2006", Sales=660,Expenses=1120, Other=4324},
                     new MyData{ Year="2007", Sales=1030,Expenses=540, Other=4234},
                     new MyData{ Year="2008", Sales=1530,Expenses=50, Other=234}
                    }
    
                };
    
                return table;
            }
        }
    
        //rows data
        public class MyData
        {
            public string Year { get; set; }
            public int Sales { get; set; }
            public int Expenses { get; set; }
            public int Other { get; set; }
        
        }
        //columns structure...
        public class TableStructure 
        {  
            public List<string> columns { get; set; }
            public List<MyData> rows { get; set; }
        }

    page code:

    <head runat="server">
        <title></title>
         <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
         <script type="text/javascript" src="https://www.google.com/jsapi"></script>
         <script>
             $(document).ready(function () {
                 $('#Button1').click(function () {
                     $.ajax({
                         type: 'POST',
                         dataType: 'json',
                         contentType: 'application/json',
                         url: 'GetTable.asmx/GetData',
                         data: "{name:'" + $("#SearchText").val() + "'}",
                         success:
                             function (response) {
                                 //alert(JSON.stringify(response.d));
                                 drawVisualization(response.d.columns, response.d.rows);
                             }
    
                     });
                 })
             });
             // Load the Visualization API and the piechart package.
             google.load('visualization', '1.0', { 'packages': ['corechart'] });
             // draws it.
             function drawVisualization(columns,rows) {
                 var dataTable = new google.visualization.DataTable();
                 var numRows = rows.length;
                 var numCols = columns.length;
                 // in this case the first column is of type 'string'.
                 dataTable.addColumn('string', columns[0]);
                 // all other columns are of type 'number'.
                 for (var i = 1; i < numCols; i++)
                 {
                     dataTable.addColumn('number', columns[i]);
                 }
                 
                 // now add the rows.
                 for (var i = 0; i < numRows; i++)
                 { 
                     dataTable.addRow([rows[i].Year, rows[i].Sales, rows[i].Expenses, rows[i].Other]);
                 }
    
                 new google.visualization.LineChart(document.getElementById('visualization'))
               .draw(dataTable, { title: 'title', hAxis: { title: 'yTitle', titleTextStyle: { color: 'green' } } });
    
    
                 //new google.visualization.LineChart(document.getElementById('visualization')).
                 //    draw(data, { title: "" });
             }
    
    
         </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="Button1" type="button" value="button" />
            <div id="visualization"></div>
        </div>
        </form>
    </body>

    Hope it helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 14, 2014 1:08 AM