Замена диаграммы JQplot с использованием ajax

Question

Я пытался решить эту проблему по-разному, но не сделал ее работу должной, я чувствую, что это не так много (я действительно надеюсь), но мой опыт и навыки с Ajax и jQuery являются ограниченными, поэтому я обращаюсь к вашему опыту!

Я работаю над диаграммой, аналогичной приведенной здесь http://www.jqplot.com/tests/data-renderers.php. но в моем случае json-файл генерируется в зависимости от значения, которое пользователь выбирает из поля выбора. Для этого я использую 2 файла и ajax-звонки:

-AnnualB.html - это файл, в котором находится поле выбора, и диаграмма должна отображаться.

-Index.php - файл, в котором производится запрос к базе данных (с использованием значения, полученного из selectbox в AnnualB.html), и генерируется массив json.

В AnnualB.html Я использую метод GET для извлечения значения из selectbox и отправки его в Index.php, который генерирует данные json. Основываясь на данных json, график должен быть создан в AnnualB ... Вот где моя проблема. Функция генерации диаграммы работает нормально, и вызов для отправки значения выбора и возврата json также работает (проверил с Firebug), но я знаю, что что-то не хватает (но пока не знаю), потому что я не знаю, t управлять передачей 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 вызовы (ВОЗМОЖНО ГДЕ МОИ ОШИБКИ/упущение)

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) АЯКС, мне просто нужно было назвать значение 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(); 
}); 

Надеется, что это может помочь вам ..