How to start JS script execution from button click?

Question

JavaScript

Good day to all!
What is the problem:
From MySQL, using PHP, the necessary data is pulled out, converted to json and passed to the script that builds the graph (JS) for execution. Everything works as it should.
There is a desire to make the graph appear on the page after pressing the button. Google suggested a solution
<button onclick="MyFunction()">Go!</button>
I attributed my script as a function MyFunction, but it does not work, the script may work, but nothing appears on the page in the div
Here is the script code

<script>
AmCharts.loadJSON = function(url) {

// create the request
  if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
  } else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
  }
// load it
// the last "false" parameter ensures that our code will wait before the
// data is loaded
request.open('GET', url, false);
request.send();
// parse adn return the output
return eval(request.responseText);
};
</script>
<script>
var chart;
// create chart
AmCharts.ready(function() {
  // load the data
  var chartData = AmCharts.loadJSON('data.php');
  // SERIAL CHART
  chart = new AmCharts.AmSerialChart();
  //chart.pathToImages = "http://www.amcharts.com/lib/images/";
  chart.dataProvider = chartData;
  chart.categoryField = "date";
  chart.dataDateFormat = "YYYY-MM-DD";
  chart.theme = "light";
  chart.thousandsSeparator = "";
  chart.fontSize = 14;
  chart.fontFamily = "Amble";
  chart.Background = "img/background_charts.jpg";
   // GRAPHS
  var graph1 = new AmCharts.AmGraph();
  graph1.valueField = "debet";
  graph1.bullet = "round";
  graph1.bulletColor = "#c0ff3e";
  graph1.bulletBorderColor = "#c0ff3e";
  graph1.bulletBorderThickness = 2;
  graph1.lineThickness = 2.5;
  graph1.lineColor = "#c0ff3e";
  graph1.lineAlpha = 0.73;
  chart.addGraph(graph1);
  var graph2 = new AmCharts.AmGraph();
  graph2.valueField = "credit";
  graph2.bullet = "round";
  graph2.bulletColor = "#ff6a6a";
  graph2.bulletBorderColor = "#000000";
  graph2.bulletBorderThickness = 1;
  graph2.lineThickness = 2.5;
  graph2.lineColor = "#ff0000";
  graph2.lineAlpha = 0.5;
  chart.addGraph(graph2);
  var graph3 = new AmCharts.AmGraph();
  graph3.valueField = "summ";
  graph3.type = "smoothedLine";
  graph3.bullet = "square";
  graph3.bulletSize = 0.000001;
  graph3.bulletColor = '#1E90FF',
  graph3.bulletBorderColor = "#FFFFFF";
  graph3.bulletBorderThickness = 2;
  graph3.lineThickness = 1;
  graph3.fillColors = '#1E90FF';
  graph3.lineColor = '#1E90FF';
  graph3.fillAlphas = 0.1;
  graph3.lineAlpha = 0.4;
  chart.addGraph(graph3);
  // CATEGORY AXIS
  chart.categoryAxis.parseDates = true;
  chart.categoryAxis.dateFormats = [{period:'DD',format:'MM.DD'},{period:'WW',format:'MM.DD'},{period:'MM',format:'MMM'}]
  chart.categoryAxis.fonSize = 100;
  // WRITE
  chart.write("chartdiv");
});
</script>

Answer 1

Try instead of AmCharts.ready(function() {
write
and at the end remove the parenthesis before the last semicolon (it is a pair with the one that we removed in the ready call)