Highcharts graph not displaying on safari and internet explorer for PC and iPhone

Question

The JSON data is being received from the controller, and is being received in the format:

 [{
  "Time": "2017-08-17 16:35:28.000",
  "Value": "3.85"
}, {
  "Time": "2017-08-17 17:36:28.000",
  "Value": "3.85"
}, {
  "Time": "2017-08-17 18:35:28.000",
  "Value": "3.86"
}, {
  "Time": "2017-08-17 19:35:28.000",
  "Value": "3.86"
}, {
  "Time": "2017-08-18 07:35:28.000",
  "Value": "3.87"
}, {
  "Time": "2017-08-18 18:35:28.000",
  "Value": "3.86"
}];

The highcharts function being used:

 <script>

        $.ajax({
            url: '/User/getHighchartsData',
            type: "POST",
            cache: false,
            success: function (data) {
                //You can get your result data here
                console.log("Data :" + data);
                displaydata(data);


            }, error: function (error) {
                console.log(error.responseText);
            }
        });


        function displaydata(data) {
            data.forEach(function (element, index) {


                element.x = new Date(element['Time']).getTime();
                element.y = +element['Value'];

                delete element['Time'];
                delete element['Value'];
            });
            console.log(data);

            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

            Highcharts.chart('container', {
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: 'Pressure'
                },
                xAxis: {
                    title: {
                        text: 'Time'
                    },
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'PSI'
                    }
                },

                plotOptions: {
                    series: {
                        turboThreshold: 0
                    },
                    area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },
                series: [{
                    data: data
                }]
            });

        }
    </script>

I can see that the error is in the parsing of the date (ie UNIX timestamp).

One solution is to use Date.UTC(). but it converts the date to UTC time, which I don't want. Is there any other way around this?

Answer 1

I hope this solution is useful for someone. Works in IE FF Chrome.

The dates were working great in Firefox and Chrome, but in IE the date function was returning NaN. A reliable way is to construct our own date format(which does not change the time zone).

In place of element.x = new Date(element['Time']).getTime(); Use :

var dateStr=element['Time']; //returned from sql server timestamp
var a=dateStr.split(" ");
var d=a[0].split("-");
var t=a[1].split(":");
element.x = new Date(d[0],(d[1]-1),d[2],t[0],t[1],t[2]);