Home google table not populating when web page loads
Reply: 0

google table not populating when web page loads

user2464
1#
user2464 Published in June 20, 2018, 7:23 am

I am trying to populate a google visulation table. When my web page loads up I want the table to populate however currently nothing is happening and I don't know why?

The data coming from my web api is correct, example of it below,

<ArrayOfPosition xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/WebPerformance.Models">
<Position>
<DatePos>2018-06-04T00:00:00</DatePos>
<Name>Hannah</Name>
<StudentId>6643</StudentId>
<NrScore>4.8448741436004639</NrScore> 
</Position>
<Position>
<DatePos>2018-06-04T00:00:00</DatePos>
<Name>Natalie</Name>
<StudentId>2413</StudentId>
<NrScore>4.4401325285434723</NrScore>
</Position>
</ArrayOfPosition>

Below is my HTML code.

<!DOCTYPE html>
<html>
<head>
<title>Scores</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {
        google.charts.load('current', { 'packages': ['table'] });
        google.charts.setOnLoadCallback(drawTable);

        $.ajax({
            type: 'GET',
            url: 'api/Score',
            dataType: 'json',
            success: function (data) {
                DrawTable(data);
            },
            error: function () {
                alert("Error loading data! Please try again");
            }
        });            
    });


    function DrawTable(dataValues) {

        var data = new google.visualization.DataTable();
        var options = { title: 'Top Scores', showRowNumber: true, width: '75%', height: '75%' };

        data.addColumn('string', 'Name');
        data.addColumn('number', 'Score');

        for (var i = 0; i < dataValues.length; i++)
        {
            data.addRow([dataValues[i].Name, dataValues[i].NrScore]);
        }

        var table = new google.visualization.Table(document.getElementById('tableScore'));
        table.draw(data, options);
    };

    </script>

   </head>
   <body>
   <div id="tableScore"></div>
   </body>
   </html>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.30738 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO