如何从数据库数据生成实时图表？

Question

我看过以下链接，在asp.net mvc 4的highcharts中绑定json结果，使用mvc C＃和sql的highcharts，HighChart Demo等。但是，我找不到一个有效的演示来演示如何使用数据库中的数据实现高级图表。

目标： 我想生成一个实时的海图折线图，以从数据库中获取数据。我想要的与第三个链接非常相​​似，后者提供了带有随机生成的值的实时图表。X轴和Y轴也类似，因为我希望我的x轴是“时间”（我的数据库中有一个DateTime列），而y轴是一个整数（对此我有一个变量以及在我的数据库中）。

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

请注意，我已经在使用SignalR来显示实时表。我也想知道它是否也可以用于自动更新highchart。

下面是视图中我的脚本的代码片段。我已经使用链接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, 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',
            data: {
                id: data.id,
            },
            contentType: 'application/html ; charset:utf-8',
            type: 'GET',
            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;

}

Answer 1

有一个例子可能对您有帮助：

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

它使用 ajax 回调函数。

好吧，您还可以查看我的示例，其中我通过单击“添加”按钮动态添加系列。

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

您只需以正确的结构添加数据即可。

看看函数

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

我的代码 script.js

我希望它有帮助。问候，路易斯