php - ajax呼び出しからjavascriptへのチャートデータを取得する方法

Question

私は amcharts を使用しており、「var chartdata=[''];」を生成するために使用されるいくつかの php コードを含むファイル (data.php) があります。チャートのために。また、グラフを描画するための JavaScript もあります。user-id、dateStart、dateEnd の 3 つの変数を取ります。$_GET メソッドを介して上記のファイルにデータを送信するフォームを持つこの 2 番目のファイル (view.php) もあります。このファイルには、フォームのすぐ下にチャートを描画するスペースがあります。

私がしたいのは、ユーザーがユーザー ID、dateStart、dateEnd を入力してから送信し、フォームの下 (「div」内) に表示されるチャートを取得して、ユーザーが送信するたびにチャートを再描画することです。そのために、jQuery $.ajax を使用することを考えましたが、グラフを描画できません。指定された div では、「var chartdata=[' all chart data here '];」のみが表示されます。

view.php の ajax コードは次のとおりです。

$.ajax({
    type: "GET", 
    url: "data.php",
    data: {user: $("#user").val(), dtStart: $("[name=dtStart]").val(), dtEnd: $("[name=dtEnd]").val()},
    dataType: "html",
    success: function(data) {

    $("#chartdiv").html(' '); 
    $("#chartdiv").html(data); 
      }
    }); 

グラフを描画するためのコードは次のとおりです。

var chart;
var average = 90.4;
AmCharts.ready(function() {

// SERIAL CHART    
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.autoMarginOffset = 5;
chart.marginTop = 0;
chart.marginRight = 10;    
chart.zoomOutButton = {
    backgroundColor: '#000000',
    backgroundAlpha: 0.15
};
chart.dataProvider = chartData;
chart.categoryField = "date";

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "mm"; // our data is daily, so we set minPeriod to DD
categoryAxis.dashLength = 1;
categoryAxis.gridAlpha = 0.15;
categoryAxis.axisColor = "#DADADA";
categoryAxis.equalSpacing = false;

// value                
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisColor = "#DADADA";
valueAxis.dashLength = 1;
valueAxis.logarithmic = true; // this line makes axis logarithmic
chart.addValueAxis(valueAxis);

// GUIDE for average
var guide = new AmCharts.Guide();
guide.value = average;
guide.lineColor = "#CC0000";
guide.dashLength = 4;
guide.label = "average";
guide.inside = true;
guide.lineAlpha = 1;
valueAxis.addGuide(guide);


// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "smoothedLine";
graph.bullet = "round";
graph.bulletColor = "#FFFFFF";
graph.bulletBorderColor = "#00BBCC";
graph.bulletBorderThickness = 1;
graph.bulletSize = 1;
graph.title = "Price";
graph.valueField = "price";
graph.lineThickness = 2;
graph.lineColor = "#00BBCC";
chart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.categoryBalloonDateFormat = "DD MMM, JJ:NN:SS";
chart.addChartCursor(chartCursor);

// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);

// WRITE
chart.write("chartdiv");
}); 

</script>

助けてください。私はjQueryに慣れていないので、これを解決する方法を見つけるために最善を尽くしています..ありがとうよろしく