определение функции кнопка javascript

Question

Это мой код в JavaScript; У меня есть один PieChart, который получает данные из источника данных. Теперь я хочу добавить одну кнопку на моей странице, чтобы, щелкнув по ней, я увидел свой PieChart.

Я хочу определить function draw в моей кнопке.

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) { 
     // You can manipulate the variable response 
     // Success! 
     var query = new google.visualization.Query('http://localhost:8080/XXXXX-datasource/datasource?table='+cityName); 
     // Optional request to return only column C and the sum of column B, grouped by C members. 
     query.setQuery('select zone_name, sum(cost) group by zone_name'); 
     // Send the query with a callback function. 
     query.send(drawChart); 

    } 
    function initialize() { 
      var $newDiv = $('<div>').attr('id','chart_div'); 
      $('#reportingContainer').append($newDiv); 
    // Replace the data source URL on next line with your data source URL. 
    // Specify that we want to use the XmlHttpRequest object to make the 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 Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300}; 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 

}(jQuery); 

Answer 1

Если getTable() правильно функция для вызова круговой диаграммы означает то попробуйте ниже

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

вызов getTable примет вас до drawChart.

Обновления:

Поскольку имеется идентификатор прилагается к Див, вы можете попробовать, как этот

function initialize() { 
      var $newDiv = $('<div>').attr('id','chart_div');    
      $('#reportingContainer').append($newDiv); 

      $($newDiv).hide(); //hide the div here 

    // Replace the data source URL on next line with your data source URL. 
    // Specify that we want to use the XmlHttpRequest object to make the query. 
      getTable(); 
    } 

и показать его на кнопку мыши

$("#drawChart").on('click', function() { 
     $('#chart_div').show(); //If it is visible hide it or vice versa 
    }); 

Incase вы хотите go for .toggle()

$("#drawChart").on('click', function() { 
     $('#chart_div').toggle(); //If it is visible hide it or vice versa 
    });