jquery - definition function button javascript -

this code in javascript; have 1 piechart gets data datasource. want add 1 button in page when click can see piechart.

i want define function draw in button.

html:

<input id="drawchart" type="button" value="click me" "> <script type="text/javascript" src="google.com/jsapi"></script>; <script src="{{=url('static','js/xxx/code/xxxx.js')}}"></script>  <div id="reportingcontainer"></div> 

---

!function($) {      function gettable() {       $.ajax({               datatype: 'json',                        type: 'get',               url: 'call/json/mytables',               xhrfields: {                          withcredentials: true                 },               success: function(response) {                   sendquery(response[0]);               },           });            }       $("#drawchart").click( function () {         ?????????????????????????????     });        function sendquery(cityname) {         // can manipulate variable response         // success!         var query = new google.visualization.query('http://localhost:8080/xxxxx-datasource/datasource?table='+cityname);       // optional request return column c , sum of column b, grouped c members.       query.setquery('select zone_name, sum(cost) group zone_name');       // send query callback function.       query.send(drawchart);      }     function initialize() {             var $newdiv = $('<div>').attr('id','chart_div');             $('#reportingcontainer').append($newdiv);   // replace data source url on next line data source url.   // specify want use xmlhttprequest object make query.            gettable();     }        function drawchart(response) {          if (response.iserror()) {          alert('error in query: ' + response.getmessage() + ' ' + response.getdetailedmessage());          return;     }             var data = response.getdatatable();          var options = {'title':'how pizza ate last night',                        'width':400,                        'height':300};          var chart = new google.visualization.piechart(document.getelementbyid('chart_div'));          chart.draw(data, options);     }     }(jquery); 

if gettable() correct function call pie-chart means try below

$("#drawchart").on('click', function () {         gettable();  //?????????????????????????????     }); 

calling gettable take drawchart.

updates:

since there id attached div, can try this

function initialize() {             var $newdiv = $('<div>').attr('id','chart_div');                         $('#reportingcontainer').append($newdiv);              $($newdiv).hide();  //hide div here    // replace data source url on next line data source url.   // specify want use xmlhttprequest object make query.            gettable();     }   

and show on button click

$("#drawchart").on('click', function () {        $('#chart_div').show(); //if visible hide or vice versa     }); 

incase want go .toggle()

$("#drawchart").on('click', function () {        $('#chart_div').toggle(); //if visible hide or vice versa     });