Hello, I am working on a MVC4 Jquery Mobile app and i am adding a bootstrap admin dashboard.  I am trying to add a morris area-chart using data from a html table on the same page. 

I eventually want the table to display that data when the page loads. I have a javascript function that gets the data and converts it into a json object (JSON.stringify) in the correct format but the chart is not showing the data...

I have the function hooked-up to a button_click event for testing. 

The sample code is on jsbin. the link is below.  Thanks for your help.

http://jsbin.com/ENiCaHIv/2/

    $('#run').click(function () {

            var data = $('table#students tbody tr').map(function (index) {
                var cols = $(this).find('td');
                return {
                   
                    name: cols[0].innerHTML,
                    age: (cols[1].innerHTML + '') * 1 // parse int
                  //  grade: (cols[2].innerHTML + '') * 1 // parse int
                };
            }).get();
            alert(JSON.stringify(data));
            var xyz = JSON.stringify(data);
          //  alert(xyz);
             
            Morris.Area({
                element: 'area-new-table',
                data: xyz,
                xkey: 'name',
                ykeys: ['age'],
                labels: ['Name']

            });

        });