Всем доброго времени суток!
В чем проблема:
Из MySQL посредством PHP вытаскиваются нужные данные, преобразуются в json и передаются на исполнение скрипту, строящему график (JS). Все работает как положено.
Есть желание сделать так, чтобы график появлялся на странице после нажатия кнопки. Гугл подсказал решение
<button onclick="MyFunction()">Go!</button>
Приписывал свой скрипт как функцию MyFunction, однако оно не работает, скрипт может и отрабатывает, но на страничке в div-е ничего не появляется
Вот код скрипта
<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>
Простой