HighCharts (highstock) - данные не отображаются

Question

Я экспериментирую с HighStock API и испытываю проблему с отображением данных, возвращаемых с моего сервера.

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

var displayOHLCChart = function() { 
    var $input = $(this); 
    var listedId = $('[data-field="Id"]').val(); 
    var url = '/ListedSecurities/GetChartData/' + listedId; 
    $.getJSON(url, function (data) { 
     $('#ohlc-container').highcharts('StockChart', { 
      rangeSelector: { 
       selected: 2 
      }, 

      title: { 
       text: 'AAPL Stock Price' 
      }, 

      series: [{ 
       type: 'ohlc', 
       name: 'AAPL Stock Price', 
       data: data, 
       dataGrouping: { 
        enabled: false 
       } 

      }] 
     }); 
    }); 
}; 

$("#ohlc-container").each(displayOHLCChart); 

Мой призыв к /ListedSecurities/GetChartData/1 возвращает следующие JSON

Edit: копировать и вставлять кончили некоторые запятые

[{"date":"1/07/1996","DayOpen":2.95,"DayHigh":2.97,"DayLow":2.89,"DayClose":2.89}, 
{"date":"2/07/1996","DayOpen":2.91,"DayHigh":2.99,"DayLow":2.91,"DayClose":2.99}, 
{"date":"3/07/1996","DayOpen":3.00,"DayHigh":3.00,"DayLow":2.95,"DayClose":2.97}, 
{"date":"4/07/1996","DayOpen":2.95,"DayHigh":2.96,"DayLow":2.90,"DayClose":2.96}, 
{"date":"5/07/1996","DayOpen":2.96,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}, 
{"date":"8/07/1996","DayOpen":2.95,"DayHigh":3.00,"DayLow":2.93,"DayClose":2.98}, 
{"date":"9/07/1996","DayOpen":2.98,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}] 

Когда страница отображается Я вижу заголовок диаграммы, кнопки масштабирования, скроллер временной шкалы, но данных нет.

Если я смотрю на «данные» в своем java-скрипте, он говорит, что содержит 7 объектов (по одному для каждой даты выше), и я могу развернуться, чтобы увидеть фактические элементы. Если проблема «данные» - это объекты возврата внутри объектов, как мне изменить следующий запрос LINQ, чтобы вернуть правильный JSON?

public ActionResult GetChartData(int? id) 
    { 
     var EODData = _unitOfWork.Repository<EODSecurityData>() 
      .Query() 
      .OrderBy(q => q 
       .OrderBy(c => c.EODDate)) 
      .Filter(x => x.ListedSecurityId == id) 
      .Get().ToList() 
      .Select(r => new { date= r.EODDate.ToShortDateString(), r.DayOpen, r.DayHigh, r.DayLow, r.DayClose }); 
     return Json(EODData, JsonRequestBehavior.AllowGet); 
    } 

Спасибо.

Answer 1

Я нашел, что это было связано с тем, как мои данные передается обратно через объект JSON. Опоры к hutchonoid, чьи примеры jsfiddle указывали мне в правильном направлении.

Чтобы получить корректно отформатированный результат JSON, мне нужно было создать общий объект с соответствующими свойствами, а также пришлось изменить элемент DateTime на элемент Javascript datetime. Код закончился таким образом.

public ActionResult GetChartData(int? id) 
    { 
     if (id == null) 
     { 
      return Json(null); 
     } 
     var EODData = _unitOfWork.Repository<EODSecurityData>() 
      .Query() 
      .OrderBy(q => q 
       .OrderBy(c => c.EODDate)) 
      .Filter(x => x.ListedSecurityId == id) 
      .Get().ToList() 
      .Select(r => new { date= r.EODDate, r.DayOpen, r.DayHigh, r.DayLow, r.DayClose }); 

     List<object> output = new List<object>(); 
     foreach (var dataElement in EODData) 
     { 
      output.Add(new object[] { ToJsonTicks(dataElement.date), dataElement.DayOpen, dataElement.DayHigh, dataElement.DayLow, dataElement.DayClose }); 
     } 

     return Json(output, JsonRequestBehavior.AllowGet); 
    } 

    public long ToJsonTicks(DateTime value) 
    { 
     return (value.ToUniversalTime().Ticks - ((new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc)).Ticks))/10000; 
    } 

Обратите внимание на цикл через в Entity Framework результатов для добавления каждого в список объектов и преобразование DateTime свойства с методом ToJsonTicks.

Answer 2

Существует проблема с json, последние два элемента в коллекции не разделяются запятой.

Это (строка 5 & 6):

[{"date":"1/07/1996","DayOpen":2.95,"DayHigh":2.97,"DayLow":2.89,"DayClose":2.89}, 
{"date":"2/07/1996","DayOpen":2.91,"DayHigh":2.99,"DayLow":2.91,"DayClose":2.99}, 
{"date":"3/07/1996","DayOpen":3.00,"DayHigh":3.00,"DayLow":2.95,"DayClose":2.97}, 
{"date":"4/07/1996","DayOpen":2.95,"DayHigh":2.96,"DayLow":2.90,"DayClose":2.96}, 
{"date":"5/07/1996","DayOpen":2.96,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}  
{"date":"8/07/1996","DayOpen":2.95,"DayHigh":3.00,"DayLow":2.93,"DayClose":2.98} 
{"date":"9/07/1996","DayOpen":2.98,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}] 

Должен быть так:

[{"date":"1/07/1996","DayOpen":2.95,"DayHigh":2.97,"DayLow":2.89,"DayClose":2.89}, 
{"date":"2/07/1996","DayOpen":2.91,"DayHigh":2.99,"DayLow":2.91,"DayClose":2.99}, 
{"date":"3/07/1996","DayOpen":3.00,"DayHigh":3.00,"DayLow":2.95,"DayClose":2.97}, 
{"date":"4/07/1996","DayOpen":2.95,"DayHigh":2.96,"DayLow":2.90,"DayClose":2.96}, 
{"date":"5/07/1996","DayOpen":2.96,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96},  
{"date":"8/07/1996","DayOpen":2.95,"DayHigh":3.00,"DayLow":2.93,"DayClose":2.98}, 
{"date":"9/07/1996","DayOpen":2.98,"DayHigh":2.98,"DayLow":2.95,"DayClose":2.96}] 

Вот jsFiddle с исправленными данными:

http://jsfiddle.net/hutchonoid/99DUu/

Обновление

Я думаю, что дата должна быть представлена ​​в миллисекундах.

Если вы видите пример jsFiddle здесь:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/

Он представляет данные следующим образом, дату миллисекунды и сюжет

... 
/* May 2006 */ 
[1147651200000,67.79], 
[1147737600000,64.98], 
[1147824000000,65.26], 
[1147910400000,63.18], 
[1147996800000,64.51], 
[1148256000000,63.38], 
[1148342400000,63.15], 
[1148428800000,63.34], 
[1148515200000,64.33], 
[1148601600000,63.55], 
[1148947200000,61.22], 
[1149033600000,59.77], 
...