Проблема карты данных JSON с HighCharts + Ajax

Question

У меня есть следующие данные, возвращаемые через JSON

{"rows":[{"Date":"07/10/2011","Value":1206,"Action":"Drink"},    
{"Date":"07/11/2011","Value":2288,"Action":"Pie"},
{"Date":"07/12/2011","Value":1070,"Action":"Drink"},
{"Date":"07/13/2011","Value":1535,"Action":"Beer"},
{"Date":"07/14/2011","Value":1721,"Action":"Drink"}],
"page":1,"total":1,"records":5}

Я пытаюсь использовать эти данные с HighCharts, но немного запутался.

jQuery.ajax({
  url: fullPath + 'datamap',
  dataType: "json",
  type: 'POST',
  data: "{}",
  contentType: "application/json; charset=utf-8",
  success: function (data) {
       var lines = data.split('\n');
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            var data = {};
            $.each(items, function(itemNo, item) {
                if (itemNo === 0) {
                    data.name = item;
                } else {
                    data.y = parseFloat(item);
                }
            });
            options.series[0].data.push(data);
        });
    // Create the chart
    var chart = new Highcharts.Chart(options);

  },
  cache: false
  });

Я пытаюсь нанести на график «Дата» и «Значение»?

Answer 1

Как я понимаю, вам нужно показать rows значения с помощью Highcharts.Итак, во-первых, ваши начальные данные будут:

var chartData = data.rows;

Теперь chartData это просто массив объектов.Используйте цикл for для итерации по chartData, как показано ниже:

var seriesData = [];
for (var i = 0; i < chartData.length; i++)
{
    var x = new Date(chartData[i].Date).getTime();
    var y = chartData[i].Value;
    seriesData.push([x, y]);
}

После этого цикла у вас будет seriesData массив точек, которые можно использовать в Highcharts.Теперь просто сделайте это:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chartContainer',
        defaultSeriesType: 'line'
    },

    xAxis: {
        type: 'datetime'
    },

    series: [{
        data: seriesData        
    }]
});

Вуаля!

Проверьте это: http://jsfiddle.net/ebuTs/8263/