using JSON dates with Highstock chart (asp.net MVC)

Question

I am trying to output JSON data on to Highstock chart. Initially I struggled with the JSON formatted date which I resolved by following instruction on other answer on stackoverflow by re-formatting dates. But I'm still unable to get the graph plotted on view page -

 <script src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var mydata =[];
        chartOjb = new Object();
        $.ajax({
            type: "GET",
            url: "/ReportIntance/DummyCall/2",
            data: '{ }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, item) {
                    chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
                    chartOjb.data = item.Series1;
                    mydata.push({
                        x: new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)),
                        y: item.Series1
                    });
                })
            },
            failure: function (response) {
                alert(response);
            }

        });
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'Chart1'
            },
            title: {
                text: 'Delivery Price example using Chart'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Price'
                }
            },
            series: [ { data: mydata }]
        });
    });
</script>
<div id="Chart1" style="height: 500px; min-width: 500px"></div>

My JSON string is -

[{"DayDate":"\/Date(1334704500000)\/","Series1":4.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334705400000)\/","Series1":5.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334706300000)\/","Series1":4.51,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334707200000)\/","Series1":6.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334708100000)\/","Series1":4.71,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709000000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709900000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}]    

Currently I'm trying to output simple line chart and using only DayDate (X-axis) and 'Series1' as Y-axis.

Highstock chart shows just 'x axis' but no line graph or y axis is shown.

Can someone point me what I'm doing wrong? Any help will be appreciated.

Edit:

After setting turboThresold field I can now see the X Axis on my highstock chart. However values from y axis are still missing. This is how graph looks without any y axis lines. The data seems to be correct

Here's my updated code -

$(function () {
        var mydata = [];
        chartOjb = new Object();
        // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
        $.getJSON('/ReportIntance/DummyCall/2', function (data) {

            // Add a null value for the end date 
            //data = [].concat(data, [[Date.UTC(2013, 9, 14, 19, 59), null, null, null, null]]);

            $.each(data, function (index, item) {
                chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
                chartOjb.data = item.Series1;
                mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });

                //alert(chartOjb.name + "/" + chartOjb.data);
            });


            // create the chart
            $('#container').highcharts('StockChart', {
                chart: {
                    //type: 'candlestick',
                    zoomType: 'x'
                },

                navigator: {
                    adaptToUpdatedData: false,
                    series: {
                        data: mydata
                    }
                },

                scrollbar: {
                    liveRedraw: false
                },

                title: {
                    text: 'Historical prices from June 2012'
                },

                subtitle: {
                    text: 'Displaying 20K records using Highcharts Stock by using JSON'
                },
                plotOptions: {
                    line: {
                        turboThreshold: 20450
                    }
                },
                xAxis: {
                    type: 'datetime',
                    title: 'Time',
                    minRange: 3600 * 1000/15 // one hour
                },
                yAxis:{
                    title: {
                        text: 'Prices',
                        style: {
                            color: '#89A54E'
                        }
                    },
                    lineWidth: 1,
                    opposite: false,
                    showEmpty: false //hides empty data series
                },
                series: [{
                    data: data,
                    pointStart: Date.UTC(2012, 6, 1), // first of June
                    pointInterval: 3600 * 1000/15,  
                    dataGrouping: {
                        enabled: false
                    }
                }]
            });
        });
    });

Answer 1

Thanks to Sebastian, I can now see the graphs. Only issue I had was that I wasn't pointing to correct 'data' Your suggestion to not convert to datetime improved the performance