<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title></title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<script type="text/javascript">
		/*var series;
		var series2;
		var series3;
		function alcurve(){
		 if(curveb == true){
		 	if(car.topics[tnum] != null && car.topics[tnum] != ""){
			 	tnum++;
			 	//alert(car);
			 	var s2 =car.topics[tnum].gpst.replace("-","/");
				s2=s2.replace("-","/");
				s2=s2.replace("T"," ");
				var newtime =(new Date(s2)).getTime();
					
					series.addPoint([newtime+28809000,parseInt(car.topics[tnum].veo)], true, false);
					
					series2.addPoint([newtime+28809000,parseInt(car.topics[tnum].temp)], true, false);
					series3.addPoint([newtime+28809000,parseInt(car.topics[tnum].oil)], true, false);
					
				addNew();
				al();
				//alert(1);
				yctime = setTimeout("alcurve()", speedvalue);
				}
		 }
			
		}*/
	function curve(){
		$('#container_qu').highcharts({
				chart: {
					type: 'spline',
					animation: Highcharts.svg, // don't animate in old IE
					marginRight: 10,
					ignoreHiddenSeries: true,
					events: {
						load: function() {
							 //series = this.series[0];
							// series2 = this.series[1];
							// series3 = this.series[2];
							//yctime = setTimeout("alcurve()", speedvalue);
							/*var series = this.series[0];
							var series2 = this.series[1];
							var series3 = this.series[2];
							setInterval(function() {
								var x = (new Date()).getTime(), // current time
									y = Math.random();
								series.addPoint([x, y], true, false);
								series2.addPoint([x, y+1], false, false);
								series3.addPoint([x, y-1], false, false);
								
							}, 1000);*/
						}
					}
				},
				credits: {
				
				},
				 title: {
					text: '速度/温度/油量曲线图'
				},
				subtitle: {
					text: ''
				},
				xAxis: {
				   type: 'datetime',
				   id: 'temperature-xaxis',
				   tickPixelInterval: 150
				},
				yAxis: {
					title:{
						text: ''
					},
					id: 'temperature-yaxis',
				//	tickInterval: 20,
				//	min: 0,
					labels:{
						formatter: function() {
							return this.value; 
						}
					}
				},
				tooltip: {
					xDateFormat: '%Y-%m-%d %H:%M:%S',
					crosshairs: true,
					shared: true
					/*,
					formatter: function() {
								return '<b>时间：</b>'+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x)+'<br/>'+
								'<b>速度：</b>'+Highcharts.numberFormat(this.y, 2)+'km/h <br/>'
								;
					}*/
				},
				legend: {
					enabled: true
				},
				exporting: {
					enabled: true
				},
				navigation: {
					buttonOptions: {
						enabled: true
					}
				},
				plotOptions: {
					spline: {
						marker: {
							radius: 4,
					//		lineColor: '#666666',
							lineWidth: 1
						}
					},
					series: {
						turboThreshold:30000
					}
				},
				series: [{
					name: '速度(km/h)',
					color: '#9ACD32',
					marker: {
						enabled: false
					},
					data: (function() {
						var data = [],
							time = (new Date()).getTime(),
							i;
		
						for (i = 1; i <= 0; i++) {
							data.push({
								x: time + i * 1000,
								y: Math.random()
							});
						}
						return data;
					})()
				}, {
					name: '温度(℃)',
					color:'#CD0000',
					marker: {
						enabled: false
					},
					data: (function() {
							// generate an array of random data
							var data = [],
							time = (new Date()).getTime(),
							i;
		
							for (i = 1; i <= 0; i++) {
								data.push({
									x: time + i * 1000,
									y: Math.random()
								});
							}
							return data;
						})()
				}, {
					name: '油量(L)',
					marker: {
						enabled: false
					},
					data: (function() {
							// generate an array of random data
							var data = [],
							time = (new Date()).getTime(),
							i;
		
							for (i = 1; i <= 0; i++) {
								data.push({
									x: time + i * 1000,
									y: Math.random()
								});
							}
							return data;
						})()
				}]
			});
	}
		</script>
	  </head>
	  <body>
		<script src="<%=basePath%>gpsonline/js/highcharts.js"></script>
		
		<div id="container_qu" style="width:100%; height: 200px; margin: 0 auto"></div>
	  </body>
	</html>