Ajax请求服务器数据动态刷新HighCharts表格

<script type="text/javascript">
	$(function() {
		var realtime = new Array(10);
		var realvalue = new Array(10);
		$(document)
				.ready(
						function() {
							Highcharts.setOptions({
								global : {
									useUTC : false
								}
							});
							var chart;
							chart = new Highcharts.Chart(
									{
										chart : {
											renderTo : 'container',
											type : 'spline',
											animation : Highcharts.svg,
											// don't animate in old IE               
											marginRight : 10,
											events : {
												load : function() {
												}
											}
										},
										title : {
											text : 'Sensor\'s Dynamic Temperature'
										},
										subtitle : {
											text : 'Source: inteli405',
											x : -20
										},
										xAxis : {
											type : 'datetime',
											tickPixelInterval : 150
										},
										yAxis : [ {
											title : {
												text : 'Temperature'
											},
											plotLines : [ {
												value : 0,
												width : 1,
												color : '#808080'
											} ]
										}, {
											title : {
												text : '摄氏度'
											},
											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 : 'Sensor Data',
													data : (function() { // generate an array of random data                             
														var data = [], time = (new Date())
																.getTime(), i;
														for (i = -19; i <= 0; i++) {
															data.push({
																x : time + i
																		* 1000,
																y : 0
															});
														}
														return data;
													})()
												},
												{
													name : 'Sensor Data',
													data : (function() { // generate an array of random data                             
														var data = [], time = (new Date())
																.getTime(), i;
														for (i = -19; i <= 0; i++) {
															data.push({
																x : time + i
																		* 1000,
																y : 0
															});
														}
														return data;
													})()
												} ]
									}); // set up the updating of the chart each second                     
							setInterval(
									function() {

										var series = chart.series[0];
										var series1 = chart.series[1];
										$
												.ajax({
													url : "//192.168.199.187/statistic/Temperature/history",
													type : "GET",//这里是AJAX请求的方式
													dataType : "JSON",//如果你回发的内容是JSON格式的就用这个,否则用Text或其他
													//async: false,
													success : function(data) {
														var myobj = eval(JSON
																.stringify(data));
														var latest = 0;

														var unixTimestamp = new Date(
																myobj[latest].timestamp);
														var commonTime = unixTimestamp
																.toLocaleString();

														var value = myobj[latest].value;

														for ( var i = 0; i < 1; i++) {
															unixTimestamp = new Date(
																	myobj[i].timestamp);
															realtime[i] = unixTimestamp
																	.toLocaleString();
															realvalue[i] = myobj[i].value;
														}

														var x = (new Date())
																.getTime(), y = realvalue[0];
														series.addPoint(
																[ x, y ], true,
																true);
														series1.addPoint(
																[ x, y ], true,
																true);
													},
													error : function(
															XMLHttpRequest,
															Error, F) {
														//出错后可以在这里给出提示,Error参数表示错误信息
													}
												});
									}, 3000);
						});
	});
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值