使用ajax重新繪製JQplot圖表

Question

我一直試圖用不同的方式解決這個問題，但沒有使它按預期工作，我覺得它沒有那麼大（我真的很希望如此），但我的經驗和技能與Ajax和jQuery是有限的，這就是爲什麼我吸引你的專業知識！

我正在類似於這裏的圖表上工作http://www.jqplot.com/tests/data-renderers.php。但在我的情況下，根據用戶從選擇框中選擇的值生成json文件。我正在使用2個文件和ajax調用來完成此操作：

-AnnualB.html是選擇框所在的位置並且應該顯示圖表的文件。

-Index.php是對數據庫進行查詢的文件（使用從AnnualB.html中的選擇框獲取的值）並生成json數組。

在AnnualB.html中，我使用GET方法從selectbox中檢索值並將其發送到Index.php，該Index.php生成json數據。基於json數據，圖表必須在AnnualB中創建...這是我的問題出現的地方。生成圖表的函數工作正常，發送選擇值並返回json的調用也在工作（已經用Firebug進行了檢查），但是我知道我錯過了一些東西（但不知道還有什麼），因爲我不'設法將json數據傳遞給生成圖表的函數。

我在AnnualB.html代碼是這樣的（縮寫一些不相關的信息......）：

函數生成圖表（是，如果JSON數據傳遞工作確定）

function CreateGraph() { 
$(document).ready(function(){ 
var ajaxDataRenderer = function(url, plot) { 
    var ret = null; 
    $.ajax({ 
     async: false, 
     url: url, 
     dataType:'json', 
     success: function(data) { 
      ret = data; } 
    }); 
    return ret; }; 
$.jqplot.config.enablePlugins = true; 
var jsonurl = "./index.php"; 
var plotData = ajaxDataRenderer(jsonurl); 
var series = ... 
plot1 = $.jqplot('Chart1', series,{...}} 

AJAX調用（可能WHERE我的錯誤/遺漏）

function LoadGraph(int) 
{ 
if (window.XMLHttpRequest) 
    {xmlhttp=new XMLHttpRequest();} 
else 
    {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} 
xmlhttp.open("GET","index.php?tasel="+int,true); 
xmlhttp.send(); 
xmlhttp.onreadystatechange=function() 
    { 
    CreateGraph(int) 
    } 
} 

選擇框

<select name="tasel" size="1" onchange="LoadGraph(this.value)"> 
<option value="">Select accounts type:</option> 
    <option value="3">Tuloslaskelma</option> 
    <option value="2">Tasevastattava</option> 
    <option value="1">Tasevastaava</option> 
</select> 

在index.php文件相關的代碼是這樣的（好的工作時的選擇框（tasel）傳遞的值））：

$tasel = $_REQUEST['tasel']; 
if ($tasel == ...2) 
{...} 
. 
. 
. 
echo "[",$selite, ",";// These 2 variables create the json array 
echo $finaljson, "]"; 

在此先感謝您的耐心和幫助！

Answer 1

我意識到了這個問題的答案比我所期待的簡單。 反而使得整個function LoadGraph(int) Ajax調用的，我只需要調用tasel值?tasel="+int在函數生成這樣的圖表（這是已經在做一個Ajax調用）：

function CreateGraph() { 
    $(document).ready(function(){ 
     var ajaxDataRenderer = function(url, plot) { 
      var ret = null; 
      $.ajax({ 
       async: false, 
       url: url, 
       dataType:'json', 
       success: function(data) { 
        ret = data; 
       } 
      }); 
      return ret; 
     }; 

    $.jqplot.config.enablePlugins = true; 
    var jsonurl = "./index.php?tasel="+int; 
    var plotData = ajaxDataRenderer(jsonurl); 
    var series = ... 
    plot1 = $.jqplot('Chart1', series,{...} 
} 

Answer 2

var plot1 = undefined; 
var plotOptions = undefined; 

function CreateGraph() { 
    $.ajax({ 
     async: false, 
     url: "./index.php", 
     dataType:'json', 
     success: function(data) { 
      var series = fn... // Convert your json Data to array 
      if(plot1 != undefined) 
      { 
       plot1.destroy(); 
      } 
      plot1 = $.jqplot('Chart1', series, plotOptions); 
     } 
    }); 
} 

$(function(){ 
    $.jqplot.config.enablePlugins = true; 
    plotOptions = {...}; // jqPlot options 
    CreateGraph(); 
}); 

希望這可以幫助你..