ajax – 如何从我的数据库数据生成实时高图？

我查看了以下链接 Binding json result in highcharts for asp.net mvc 4,highcharts with mvc C# and sql,HighChart Demo以及其他许多链接.但是,我找不到一个工作演示,演示如何使用数据库中的数据实现高图.

目的：
我想生成一个实时高清图线图,从我的数据库中获取数据.我想要的是与第三个链接非常相??似,它提供了随机生成的值的实时高图.它也类似于X轴和Y轴,因为我希望我的x轴是“时间”(我的数据库中有一个DateTime列),而y轴是一个整数(我有一个变量用于以及在我的数据库中).

在将模型数据发送到我的剃刀视图时,我需要帮助.

请注意,我已经使用SignalR来显示实时表.我也想知道它是否也可用于自动更新高图.

下面是我在视图中的脚本的代码片段.我使用链接3中提供的代码生成高图.请告诉我应该在哪里对代码应用更改.

@section Scripts{
        <script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="~/SignalR/Hubs"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                // Declare a proxy to reference the hub.
                var notifications = $.connection.dataHub;

                //debugger;
                // Create a function that the hub can call to broadcast messages.
                notifications.client.updateMessages = function () {
                    getAllMessages()
                };
                // Start the connection.
                $.connection.hub.start().done(function () {
                    alert("connection started")
                    getAllMessages();
                }).fail(function (e) {
                    alert(e);
                });
                //Highchart
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });
                //Fill chart
                $('#container').highcharts({
                    chart: {
                        type: 'spline',animation: Highcharts.svg,// don't animate in old IE
                        marginRight: 10,events: {
                            load: function () {
                                // set up the updating of the chart each second
                                var series = this.series[0];
                                setInterval(function () {
                                    var x = (new Date()).getTime(),// current time
                                        y = Math.random();
                                    series.addPoint([x,y],true,true);
                                },1000);//300000
                            }
                        }
                    },title: {
                        text: 'Live random data'
                    },xAxis: {
                        type: 'datetime',tickPixelInterval: 150
                    },yAxis: {
                        title: {
                            text: 'Value'
                        },plotLines: [{
                            value: 0,width: 1,color: '#808080'
                        }]
                    },tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y,2);
                        }
                    },legend: {
                        enabled: false
                    },exporting: {
                        enabled: false
                    },series: [{
                        name: 'Random data',data: (function () {
                            // generate an array of random data
                            var data = [],time = (new Date()).getTime(),i;

                            for (i = -19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,y: Math.random()
                                });
                            }
                            return data;
                        }())
                    }]
                });

            });
            function getAllMessages() {
                var tbl = $('#messagesTable');
                var data = @Html.Raw(JsonConvert.SerializeObject(this.Model))

        $.ajax({
            url: '/home/GetMessages',data: {
                id: data.id,},contentType: 'application/html ; charset:utf-8',type: 'GET',dataType: 'html'

        }).success(function (result) {
            tbl.empty().append(result);
            $("#g_table").dataTable();
        }).error(function (e) {
            alert(e);
        });
            }
        </script>
    }

更新的代码

//Highchart
Highcharts.setOptions({
global: {
   useUTC: false }
 });
//Fill chart
chart = new Highcharts.Chart({
chart: {
  renderTo: 'container',defaultSeriesType: 'spline',events: {
      load:  $.connection.hub.start().done(function () {
      alert("Chart connection started")
      var point = getAllMessagesforChart();
      var series = this.series[0];
      setInterval(function (point) {

         // add the point
         series.addPoint([point.date_time,point.my_value],true)

         },1000);
           }).fail(function (e) {
                   alert(e);
                               })
                           }
                        }
        title: {
        text: 'Live random data'
                   },xAxis: {
        type: 'datetime',tickPixelInterval: 150,maxZoom: 20 * 1000
                        },yAxis: {
        minPadding: 0.2,maxPadding: 0.2,title: {
            text: 'Value',margin: 80
                           }
                       },series: [{
              name: 'Random data',data: []
                       }]
                    });


function getAllMessagesforChart() {
                var data = @Html.Raw(JsonConvert.SerializeObject(this.Model))

        $.ajax({
            url: '/home/GetMessagesforChat',dataType: 'html'

        }).success(function (data) {
            data = JSON.parse(data);
            //data_graph = [].concat(data);
            //$("#debug").html(data_graph);

        }).error(function (e) {
            alert(e);
        });

                return data;
                //return data_graph;

}

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

http://plnkr.co/edit/Sh71yN?p=preview

$("#btnAdd").click(function()