HighCharts (highstock) - data will not display

Question

I am experimenting with the HighStock API and am experiencing an issue displaying the data returned from my Server.

The javascript query is as follows:

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);

My call to /ListedSecurities/GetChartData/1 returns the following JSON

Edit: Copy and paste left off some commas

[{"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}]

When the page renders I see the Chart Title, zoom buttons, timeline scroller but no data.

If I look at 'data' in my java script, it says that is contains 7 objects (one for each date above), and I can drill down to see the actual elements. If the issue is 'data' is return objects inside objects, how do I change the following LINQ query to return the correct 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);
    }

Thanks.

Answer 1

There is a problem with the json, the last two items in the collection are not separated by a comma.

This (line 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}]

Should be this:

[{"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}]

Here is a jsFiddle with the corrected data:

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

Update

I think the date has to be represented in milliseconds.

If you see the example jsFiddle here:

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

It represents the data as follows, millisecond date and plot

...
/* 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],
...

Answer 2

I found it was related to the way my data was being passed back through the JSON object. Props to hutchonoid whose jsfiddle examples pointed me in the right direction.

To get the correctly formatted JSON result I needed to generate a generic object with the relevant properties and also had to modified the DateTime element to a Javascript datetime element. The code has ended up looking like this.

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;
    }

Notice the looping through of the Entity Framework results to add each to an Object list and the conversion of the DateTime property with the ToJsonTicks method.