How to draw table with Google Datatable Using PHP & jQuery Ajax Json

I am trying to create table using google datatable with Ajax & json.When user selected file from selectbox , it gets file datas as json with php & jquery ajax.

Here is sample json datas:

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

Here is my jQuery Ajax Calls:

 google.load("visualization", "1", {packages:["table"]});
  google.setOnLoadCallback(drawTable);

  $(document).on("change","select#source",function(){

            var source=$("select#source option:selected").attr("value");    



                function drawTable() {

                  var jsonData = $.ajax({
                      url: "google_charts_data_preview_ajax.php",
                      data:{source:source},
                      dataType:"json",
                      async: false
                      }).responseText;

                  // Create our data table out of JSON data loaded from server.

                  var data = new google.visualization.DataTable(jsonData);

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

                  table.draw(data, {showRowNumber: true});


                }

        });

After all this an error ocuring on console.Error is:

Uncaught ReferenceError: drawTable is not defined

Google tells how to create charts using json.I applied what they says.But I couldnt figured out what is mistake what I had done?.

http://ift.tt/OlELHC

How can achive this?

Thanks