219 行
11 KiB
HTML
219 行
11 KiB
HTML
 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
| ||
<html>
| |||
<head>
| |||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
| |||
<title>Time Series Analysis</title>
| |||
| |||
<script type="text/javascript" src="jquery.js"></script>
| |||
<script type="text/javascript" src="highcharts.js"></script>
| |||
<script type="text/javascript" src="TSDat.txt"></script>
| |||
<!-- ----------------------------------------------------------------------------------------- -->
| |||
<script type="text/javascript">
| |||
| |||
Highcharts.theme = {
| |||
credits:{enabled:false},
| |||
chart:{borderRadius:1,borderWidth:0,shadow:true,borderColor:'#EAEAEA',spacingRight:25,plotBorderWidth:1,plotBorderColor:'#EAEAEA'},
| |||
title:{style:{color:'#222',font:'normal 16px "Trebuchet MS",Verdana,Tahoma,Arial,Helvetica,sans-serif'}},
| |||
subtitle:{style:{color:'#444',font:'normal 12px "Trebuchet MS",Verdana,Tahoma,Arial,Helvetica,sans-serif'}},
| |||
xAxis:{gridLineWidth:1,lineColor:'#000',tickColor:'#000',startOnTick:false,endOnTick:false,gridLineColor:'#EAEAEA',
| |||
maxPadding:0.05,minPadding:0.05,
| |||
labels:{style:{color: '#000',font:'11px Trebuchet MS,Verdana,Tahoma,Arial,Helvetica,sans-serif'}},
| |||
title:{style:{color:'#444',fontWeight:'normal',fontSize:'12px',fontFamily:'Trebuchet MS,Verdana,Tahoma,Arial,Helvetica,sans-serif'}}
| |||
},
| |||
yAxis:{lineColor:'#000',lineWidth:1,tickWidth:1,tickColor:'#000',startOnTick:false,endOnTick:false,gridLineColor:'#EAEAEA',
| |||
maxPadding:0.05,minPadding:0.05,
| |||
labels:{style:{color:'#000',font:'11px Trebuchet MS,Verdana,Tahoma,Arial,Helvetica,sans-serif'}},
| |||
title:{style:{color:'#444',fontWeight:'normal',fontSize:'12px',fontFamily:'Trebuchet MS,Verdana,Tahoma,Arial,Helvetica,sans-serif'}}
| |||
},
| |||
legend:{enabled:false},
| |||
tooltip:{borderWidth:0,borderRadius:1},
| |||
plotOptions:{scatter:{enableMouseTracking:false,color:'rgb(17,50,110)',marker:{symbol:'diamond',radius:2}},
| |||
column:{pointPadding:0.1,groupPadding:0,color:'#F0F0F5',borderWidth:2,borderColor:'rgb(20,60,130)',shadow:false},
| |||
spline:{enableMouseTracking:false,color:'rgba(0,170,0,0.5)',lineWidth:1,shadow:false,enableMouseTracking:false,marker:{enabled:false}},
| |||
line:{enableMouseTracking:false,color:'rgb(20,60,130)',shadow:false,marker:{enabled:false}}}
| |||
};
| |||
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
| |||
| |||
$(document).ready(function(){
| |||
//------------ Header
| |||
var tit=new Highcharts.Chart({
| |||
chart:{renderTo:'top',borderWidth:0,shadow:false,backgroundColor:{linearGradient:[0,0,500,500],
| |||
stops:[[0,'rgb(251,252,255)'],[1,'rgb(223,227,252)']]}},
| |||
title:{style:{color:'#405A75',font:'normal 10px "Trebuchet MS",Verdana,Tahoma,Arial,Helvetica,sans-serif'},
| |||
align:'left',y:2,text:'Time Series Analysis. MQL5 language and JavaScript ( Highcharts, jQuery ).'}
| |||
});
| |||
//------------ Time series plot
| |||
var ymin=0;
| |||
var ymax=0;
| |||
if(minOut<MinTS)ymin=minOut;else ymin=MinTS;
| |||
if(maxOut>MaxTS)ymax=maxOut;else ymax=MaxTS;
| |||
ymin=ymin-(ymax-ymin)/12;ymax=ymax+(ymax-ymin)/12;
| |||
var ts=new Highcharts.Chart({
| |||
chart:{renderTo:'tseries',zoomType:'x'},
| |||
title:{text:'Time series plot. Number of samples = '+NumTS+'.'},
| |||
subtitle:{text:'Time series, mean and border of outliers lines. Click and drag in the plot area to zoom in.'},
| |||
tooltip:{enabled:true,shared:true,crosshairs:{dashStyle:'Dash'},
| |||
formatter:function(){return 'N = '+this.x+'<br>'+Highcharts.numberFormat(this.points[0].y,4,'.')}},
| |||
yAxis:{title:{text:'TS values'},min:ymin,max:ymax,
| |||
plotLines:[{zIndex:1,color:'#00AA00',dashStyle:'LongDash',width:1,value:Mean},
| |||
{zIndex:2,color:'#E02020',dashStyle:'LongDash',width:1,value:minOut},
| |||
{zIndex:3,color:'#E02020',dashStyle:'LongDash',width:1,value:maxOut}]},
| |||
xAxis:{title:{text:'Sample number'},showLastLabel:true,min:0,max:NumTS-1,maxZoom:NumTS/16},
| |||
series:[{zIndex:4,data:TS}]
| |||
});
| |||
//------------ Lag plot
| |||
var lp=new Highcharts.Chart({
| |||
chart:{renderTo:'lagplot'},
| |||
title:{text:'Lag plot.'},
| |||
yAxis:{title:{text:'TS[n+1]'}},
| |||
xAxis:{title:{text:'TS[n]'}},
| |||
series:[{type:'scatter',data:LagP}]
| |||
});
| |||
//------------- Histogram
| |||
var hi=new Highcharts.Chart({
| |||
chart:{renderTo:'hist'},
| |||
title:{text:'Histogram.'},
| |||
yAxis:{title:{text:'Probability density'}},
| |||
xAxis:{title:{text:'Standard deviation'},min:Nd[0][0],max:-Nd[0][0]},
| |||
tooltip:{enabled:true,formatter:function(){return this.y}},
| |||
series:[{type:'column',data:HistP},
| |||
{type:'spline',data:Nd}]
| |||
});
| |||
//------------- Normal probability plot
| |||
var np=new Highcharts.Chart({
| |||
chart:{renderTo:'norm'},
| |||
title:{text:'Normal probability plot.'},
| |||
yAxis:{title:{text:'Ordered TS'}},
| |||
xAxis:{title:{text:'Normal order statistic medians'}},
| |||
series:[{type:'line',color:'#00AA00',lineWidth:1,dashStyle:'LongDash',shadow:false,data:Ndl},
| |||
{type:'scatter',data:Xnpp}]
| |||
});
| |||
//------------- Spectrum
| |||
var k = Spec.length;
| |||
var spe=new Highcharts.Chart({
| |||
chart:{renderTo:'spectr'},
| |||
title:{text:'Spectral estimation via ACF.'},
| |||
subtitle:{text:'Number of ACF lags '+NLags+'.'},
| |||
yAxis:{title:{text:'Spectral levels'},plotLines:[{zIndex:1,color:'rgb(20,60,130)',width:1,value:0}]},
| |||
xAxis:{title:{text:'Frequency'},showLastLabel:true,min:0,max:k,tickInterval:k/4,
| |||
labels:{formatter:function(){return this.value/k/2;}}},
| |||
tooltip:{enabled:true,shared:true,crosshairs:{dashStyle:'Dash'},
| |||
formatter:function(){return this.points[0].y+'<br>F = '+Highcharts.numberFormat(this.x/k/2,3,'.')}},
| |||
series:[{type:'line',data:Spec}]
| |||
});
| |||
//------------- Statistics (text)
| |||
var i=0;
| |||
var tx=new Highcharts.Chart({
| |||
chart:{renderTo:'stat',plotBorderWidth:0},
| |||
title:{text:''}},
| |||
function(tx){
| |||
for(i=0;i<15;i++)
| |||
{
| |||
tx.renderer.text(s[i*2],18,25+i*16).css({color:'#445',font:'bold 12px "Courier New",monospace'}).add();
| |||
tx.renderer.text(s[i*2+1],65,25+i*16).css({color:'#445',font:'bold 12px "Courier New",monospace'}).add();
| |||
}
| |||
});
| |||
//------------- ACF. Autocorrelation function
| |||
var acf=new Highcharts.Chart({
| |||
chart:{renderTo:'acfunc'},
| |||
title:{text:'Autocorrelation function.'},
| |||
subtitle:{text:'Lag order '+NLags+' with 95% confidence bands.'},
| |||
yAxis:{title:{text:'ACF'},
| |||
plotLines:[{zIndex:1,color:'rgb(20,60,130)',width:1,value:0},
| |||
{zIndex:2,color:'rgb(0,170,0)',dashStyle:'LongDash',width:1,value:UPLim},
| |||
{zIndex:3,color:'rgb(0,170,0)',dashStyle:'LongDash',width:1,value:-UPLim}]},
| |||
xAxis:{title:{text:'Lag'},min:0,max:NLags+1},
| |||
tooltip:{enabled:true,formatter:function(){return 'N = '+this.x+'<br>'+this.y}},
| |||
series:[{type:'spline',dashStyle:'LongDash',color:'rgb(224,32,32)',data:CBup},
| |||
{type:'spline',dashStyle:'LongDash',color:'rgb(224,32,32)',data:CBlo},
| |||
{type:'column',pointPadding:0.1,groupPadding:0.2,borderWidth:0,color:'rgba(20,60,130,0.85)',data:ACF}]
| |||
});
| |||
//------------- PACF. Partial Autocorrelation function
| |||
var pacf=new Highcharts.Chart({
| |||
chart:{renderTo:'pacfunc'},
| |||
title:{text:'Partial autocorrelation function.'},
| |||
subtitle:{text:'Lag order '+NLags+' with 95% confidence bands.'},
| |||
yAxis:{title:{text:'PACF'},
| |||
plotLines:[{zIndex:1,color:'rgb(20,60,130)',width:1,value:0},
| |||
{zIndex:2,color:'rgb(0,170,0)',dashStyle:'LongDash',width:1,value:UPLim},
| |||
{zIndex:3,color:'rgb(0,170,0)',dashStyle:'LongDash',width:1,value:-UPLim}]},
| |||
xAxis:{title:{text:'Lag'},min:0,max:NLags+1},
| |||
tooltip:{enabled:true,formatter:function(){return 'N = '+this.x+'<br>'+this.y}},
| |||
series:[{type:'spline',dashStyle:'LongDash',color:'rgb(224,32,32)',data:CBup},
| |||
{type:'spline',dashStyle:'LongDash',color:'rgb(224,32,32)',data:CBlo},
| |||
{type:'column',pointPadding:0.1,groupPadding:0.2,borderWidth:0,color:'rgba(20,60,130,0.85)',data:PACF}]
| |||
});
| |||
//------------ Maximum entropy spectral estimation
| |||
var n = ARSp.length;
| |||
var ars=new Highcharts.Chart({
| |||
chart:{renderTo:'arspectr',zoomType:'x'},
| |||
title:{text:'Maximum entropy spectral estimation. Model order '+IP+'.'},
| |||
subtitle:{text:'Click and drag in the plot area to zoom in.'},
| |||
yAxis:{title:{text:'Power spectral density, dB'},tickInterval:10},
| |||
xAxis:{title:{text:'Frequency'},showLastLabel:true,min:0,max:n,maxZoom:n/16,tickInterval:n/8,
| |||
labels:{formatter:function(){return this.value/n/2;}}},
| |||
tooltip:{enabled:true,shared:true,crosshairs:{dashStyle:'Dash'},
| |||
formatter:function(){return this.points[0].y+' db'+
| |||
'<br>F = '+Highcharts.numberFormat(this.x/n/2,4,'.')+
| |||
'<br>T = '+Highcharts.numberFormat(2*n/this.x,4,'.')}},
| |||
series:[{type:'line',data:ARSp}]
| |||
});
| |||
//------------ Footer
| |||
var fo=new Highcharts.Chart({
| |||
credits:{enabled:true},
| |||
chart:{renderTo:'foot',borderWidth:0,shadow:false,backgroundColor:{linearGradient:[0,0,500,500],
| |||
stops:[[0,'rgb(251,252,255)'],[1,'rgb(223,227,252)']]}},
| |||
title:{style:{color:'#405A75',font:'normal 10px "Trebuchet MS",Verdana,Tahoma,Arial,Helvetica,sans-serif'},
| |||
align:'left',y:2,text:'MetaTrader 5. MetaQuotes Software Corp.'}
| |||
});
| |||
});
| |||
</script>
| |||
<!-- ----------------------------------------------------------------------------------------- -->
| |||
| |||
</head>
| |||
<body>
| |||
| |||
<table border=0 cellspacing=0>
| |||
<tr>
| |||
<td><div id="top" style="width:994px; height:20px; margin:0 auto"></div></td>
| |||
</tr>
| |||
</table>
| |||
| |||
<table border=0 cellspacing=0>
| |||
<tr>
| |||
<td><div id="tseries" style="width:662px; height:270px; margin:0 auto"></div></td>
| |||
<td><div id="lagplot" style="width:330px; height:270px; margin:0 auto"></div></td>
| |||
</tr>
| |||
</table>
| |||
| |||
<table border=0 cellspacing=0>
| |||
<tr>
| |||
<td><div id="hist" style="width:330px; height:270px; margin:0 auto"></div></td>
| |||
<td><div id="norm" style="width:330px; height:270px; margin:0 auto"></div></td>
| |||
<td><div id="spectr" style="width:330px; height:270px; margin:0 auto"></div></td>
| |||
</tr>
| |||
</table>
| |||
| |||
<table border=0 cellspacing=0>
| |||
<tr>
| |||
<td><div id="stat" style="width:170px; height:270px; margin:0 auto"></div></td>
| |||
<td><div id="acfunc" style="width:410px; height:270px; margin:0 auto"></div></td>
| |||
<td><div id="pacfunc" style="width:410px; height:270px; margin:0 auto"></div></td>
| |||
</tr>
| |||
</table>
| |||
| |||
<table border=0 cellspacing=0>
| |||
<tr>
| |||
<td><div id="arspectr" style="width:994px; height:270px; margin:0 auto"></div></td>
| |||
</tr>
| |||
</table>
| |||
| |||
| |||
<table border=0 cellspacing=0>
| |||
<tr>
| |||
<td><div id="foot" style="width:994px; height:20px; margin:0 auto"></div></td>
| |||
</tr>
| |||
</table>
| |||
| |||
</body>
| |||
</html>
|