locked
Dynamic Google charts table RRS feed

  • Question

  • User-2062901272 posted

    Hi experts,

    How to create a Dynamic Google Charts Table.

    below is my json.

    function drawTableNumberPolicy() {

    $.ajax({
    type: "POST",
    url: 'WebForm2.aspx/GetTotalPremiumTable',
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
    var data = google.visualization.arrayToDataTable(r.d);

    var table = new google.visualization.Table(document.getElementById('TableNumberPolicy'));

    table.draw(data, { showRowNumber: true, width: '100%', height: '100%' });

    },
    failure: function (r) {
    alert(r.d);
    },
    error: function (r) {
    alert(r.d);
    }
    });

    Monday, November 26, 2018 6:46 AM

All replies

  • User-893317190 posted

    Hi ryoka012,

    You could use google chart api , after you get data from ajax.

    Below is my code.

      <script src="../Scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <script>
               
                function drawTableNumberPolicy() {
                    $.ajax({
                        type: "POST",
                        url: '/Services/GoogleChartService.asmx/GetData',
                        data: '{}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (r) {
                            google.charts.load('current', { 'packages': ['table'] });
                            google.charts.setOnLoadCallback(function () {
    
                                 var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('number', 'Salary');
            data.addColumn('string', 'address');
            data.addRows(r.d);
    
            var table = new google.visualization.Table(document.getElementById('TableNumberPolicy'));
    
            table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
    
    
                            });
                            
                        }
    
                    });
                }
       
    
                 drawTableNumberPolicy()
        
            </script>
            <div id="TableNumberPolicy">
            </div>
        </form>
    </body>
    </html>
    

    WebService.

     [WebMethod]
            public List<ArrayList> GetData()
            {
               
                List<ArrayList> list = new List<ArrayList>();
                for (int i = 0; i < 5; i++)
                {
                    ArrayList arrayList = new ArrayList();
                    arrayList.Add("stu" + i);
                    arrayList.Add(10 + i);
                    arrayList.Add("address" + i);
                    list.Add(arrayList);
                }
                return list;
               
            }

    The json returned by webservice.

    {"d":[["stu0",10,"address0"],["stu1",11,"address1"],["stu2",12,"address2"],["stu3",13,"address3"],["stu4",14,"address4"]]}

    The result.

    For more information , you could refer to google chart's document https://developers.google.com/chart/interactive/docs/gallery/table

    Best regards,

    Ackerly Xu

    Tuesday, November 27, 2018 3:24 AM