Генерация графика HighCharts с использованием JSON с PHP через Ajax

Question

Я создаю страницу с несколькими графами, которые определяются пользователем.

Когда информация о графиках изменяется, она сохраняется через вызов Ajax на сервер, а затем график должен быть воссоздан.

Я пытаюсь создать граф в PHP на стороне сервера, создав JSON для возврата в браузер.

До сих пор моя проблема заключается в том, чтобы отображать график, как только я получу данные json с сервера.

Проблема заключается в том, что в данные json включены данные о серии.

Вот что JSON возвращается выглядит следующим образом:

{"chart":{ "type":["column"]}, 
    "credits":false, 
    "legend":{"enabled":false}, 
    "title":{"text":"Turnover by Product","align":"left","y":7, 
      "style":{"fontSize":"10px"}}, 
    "xAxis":{"title":{"text":"Total Sales"}}, 
    "series":[ 
     {"name":"BA","data":[22375004.21]}, 
     {"name":"FR","data":[82542490.9]}, 
     {"name":"GA","data":[531139.77]}, 
     {"name":"MS","data":[112142]}, 
     {"name":"ON","data":[23464497.44]}, 
     {"name":"PO","data":[74623237.35]}, 
     {"name":"TO","data":[25845184.81]}, 
     {"name":"VG","data":[51496496.25]}, 
     {"name":"WM","data":[6849331.4]}]} 
} 

Когда я пытаюсь:

var cgraphdata = $.ajax({ 
    url: "/graphs/data/format/json", 
    global: false, 
    type: "POST", 
    dataType: "json", 
    data: {type:graphtypeID}, 
    async: false, 
    success: function(data) { 
     } 
}).responseText; // json returned in cgraphdata 
var rgResult = JSON.parse(cgraphdata); // convert to javascript object 
// currentGraph = id of container div for current graph 
rgResult.chart.renderTo = currentGraph; // set render target 
newGraph = new Highcharts.Chart(rgResult); // create chart 

Это приводит к ошибке Highcharts 14. Если исключить данные, которые я получаю пустой график с название и оси.

Означает ли это, что данные необходимо загружать отдельно после создания диаграммы (последняя строка выше)?

EDIT: Я проверил, что значения, переданные для каждой серии данных, являются числовыми. Ошибка 14 указывает на передачу текста в качестве значения данных.

Ричард

Answer 1

AJAX является асинхронным, так что вы должны сделать обновление графика в обработчике успеха. Кроме того, пока вы обслуживаете данные как JSON с соответствующими заголовками, он уже должен разбираться в обработчике, и вам не нужно указывать тип данных.

Итак, что-то в этом роде.

$.ajax({ 
    url: "/graphs/data/format/json", 
    type: "POST", 
    data: {type:graphtypeID}, 
    success: function(result) 
    { 
     new Highcharts.Chart(result); 
    } 
}); 

(Вы должны делать правильные вещи в обработчике, конечно, я просто не уверен, что это было бы для вашего дела, поэтому я свел его :)