I have looked at the following links Binding json result in highcharts for asp.net mvc 4 , highcharts with mvc C# and sql, HighChart Demo and many others. However, I couldn't find a working demo showing how to implement a highchart using data from a database.
我查看了以下链接绑定json结果在asp.net mvc 4的highcharts,与mvc C#和sql,HighChart Demo和许多其他人的highcharts。但是,我找不到一个工作演示,演示如何使用数据库中的数据实现高图。
Objective: I want to generate a real time highchart line graph getting data from my database. What I want is very similar to the third link which provides a real-time highchart with randomly generated values. It is also similar by X-axis and Y-axis, for I want my x-axis to be "Time" (I have a DateTime column in my database) and y-axis to be an integer (I have a variable for that as well in my database).
目标:我想生成一个实时高清图线图,从我的数据库中获取数据。我想要的是与第三个链接非常相似,它提供了随机生成的值的实时高图。它也类似于X轴和Y轴,因为我希望我的x轴是“时间”(我的数据库中有一个DateTime列),而y轴是一个整数(我有一个变量用于以及我的数据库)。
Please I need help in sending the model data to my razor view.
在将模型数据发送到我的剃刀视图时,我需要帮助。
Note that I am already using SignalR to display a realtime table. I also want to know if it can be used to automatically update the highchart as well.
请注意,我已经使用SignalR显示实时表。我也想知道它是否也可用于自动更新高图。
Below is the code snippet of my script in the view. I have used the code provided in link 3 for generating the highchart. Please tell me where should I apply the changes on my code.
下面是我在视图中的脚本的代码片段。我使用了链接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>
}
UPDATED CODE
//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;
}
1 个解决方案
#1
0
There is an example that might help you:
有一个例子可以帮助你:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/
it uses an ajax callback function.
它使用ajax回调函数。
Well, you can also have a look at my sample where I add dynamically series by clicking add button.
好吧,你也可以看看我的示例,我点击添加按钮动态添加系列。
http://plnkr.co/edit/Sh71yN?p=preview
You only need to add data in the right structure.
您只需要在正确的结构中添加数据。
Have a look at the function
看看这个功能
$("#btnAdd").click(function()
of my code script.js
我的代码script.js
I hope it helps. regards, Luis
我希望它有所帮助。问候,路易斯
#1
0
There is an example that might help you:
有一个例子可以帮助你:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-ajax/
it uses an ajax callback function.
它使用ajax回调函数。
Well, you can also have a look at my sample where I add dynamically series by clicking add button.
好吧,你也可以看看我的示例,我点击添加按钮动态添加系列。
http://plnkr.co/edit/Sh71yN?p=preview
You only need to add data in the right structure.
您只需要在正确的结构中添加数据。
Have a look at the function
看看这个功能
$("#btnAdd").click(function()
of my code script.js
我的代码script.js
I hope it helps. regards, Luis
我希望它有所帮助。问候,路易斯