javascript - Render Table jQuery weird load order -

i'm pulling data json file jquery.

i trying create table data. works second piece of code rendering highcharts graph uses latter table create graph.

here i'm using render table (it's not pretty):

  $.getjson('data.json', function(data) {        var items = [];         $('.contn').append("<table id='datatable'>");                          $('.contn').append("<thead><tr><th></th> <th>take</th> <th>accrue</th></tr></thead><tbody>");        $.each(data.wlc_lieu_time, function(key, val) {              $('.contn').append("<tr><th>" + val.month + "</th><td>"+ val.take + "</td><td>" + val.accrue + "</td></tr>");          })          $('.contn').append("</tbody></table>");      }); 

then render graph:

 $('#container').highcharts({         data: {                     table: document.getelementbyid('datatable')                 },                 chart: {                     type: 'line'                 },                 title: {                     text: 'data extracted html table in page'                 },                 yaxis: {                     allowdecimals: false,                     title: {                         text: 'units'                     }                 },                 tooltip: {                     formatter: function () {                         return '<b>' + this.series.name + '</b><br/>' +                             this.point.y + ' ' + this.point.name.tolowercase();                     }                 }                 }); 

firstly, chart doesn't pick on table i'm presuming load order. how can make sure table created before chart looks table?

here official documentation highcharts w/ pulling data table generate graph can found here

maybe because you're using ajax data, highcharts method called before data.json loaded. should wait until getjson complete before trying render chart.