Search code examples
javascriptrazorhighchartsdotnethighcharts

HighChart- Wrong Datetime in the X-Axis for Live Chart

I am using HighChart for Live Chart (Data changes each 10 seconds).In each Second , an ajax call will take place and get the data from the Controller as json. In the example , I can get the data in each 10 seconds but the time shows in the X-axis is wrong. Instead of showing the correct time , it showing the time more than 4 from the current time.

This is the HTML+js file 

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    @*//Add JQUERY*@
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    @*//Add HighChart.js*@
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script>
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'spline',
                    events: {
                        load: getData
                    }
                },
                title: {
                    text: 'Live Bin Usage'
                },
                xAxis: {
                   type:'datetime',
                    tickPixelInterval: 150
                },
                yAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    title: {
                        text: 'Value',
                        margin: 80
                    }
                },
                series: [{
                    name: 'Time'
                }]
            });
        });

        /**
        * Request data from the server, add it to the graph and set a timeout to request again
        */
        function getData() {
            $.ajax({
                url: '/AswinDemo/FetchData',
                dataType: 'json',
                success: function (data) {
                    var series = chart.series[0],
                    shift = series.data.length > 20; // shift if the series is
                    // longer than 20
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    // add the point
                    chart.series[0].addPoint([x ,data.BinUsage], true, shift);
                    // call it again after one second
                    setTimeout(getData, 1000);
                },
                cache: false
            });
        }
    </script>
</head>
<body>

    <div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

The server or Controller 

 public ActionResult FetchData()
        {


            Random rn = new Random();


            return Json(new { BinUsage = rn.Next(), Time = DateTime.Now.TimeOfDay.ToString()} ,JsonRequestBehavior.AllowGet );
        }

Below is the Screen Shot of the Chart : - You can see the time in my chart is deffer from the time of the PC (in the task bar)

enter image description here

Solution

  • I have solved the problem by setting global.useUTC to false. Thanks.