| @import io.prediction.examples.stock.BacktestingResult |
| <html> |
| <head> |
| <script type='text/javascript' src='http://www.google.com/jsapi'></script> |
| <script |
| src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
| <script type='text/javascript'> |
| google.load('visualization', '1', |
| {'packages':['annotatedtimeline', 'table', 'corechart']}); |
| </script> |
| </head> |
| <body> |
| <h3>Backtesting Result</h3> |
| <div id='overall' style='width:1024px;'></div> |
| |
| <div id='t_timeline' style='width: 1024px; height: 360px;'></div> |
| <div id='b_timeline' style='width: 1024px; height: 200px;'></div> |
| <!-- Event listener only works when served from http server --> |
| |
| <script> |
| google.setOnLoadCallback(draw); |
| var tChart; |
| var bChart; |
| |
| var rawData; |
| |
| function draw() { |
| var jsonData = $.ajax({ |
| url: 'metrics_results.json', |
| dataType: 'json', |
| async: false, |
| }).responseText; |
| |
| rawData = JSON.parse(jsonData); |
| |
| drawOverall(); |
| drawTimeline(); |
| } |
| |
| function drawOverall() { |
| var data = new google.visualization.DataTable(); |
| data.addColumn('number', 'ret'); |
| data.addColumn('number', 'vol'); |
| data.addColumn('number', 'sharpe'); |
| data.addColumn('number', 'days'); |
| |
| var overall = rawData.overall; |
| data.addRow([overall.ret, overall.vol, overall.sharpe, overall.days]); |
| |
| var formatter = new google.visualization.NumberFormat( |
| {fractionDigits: 4}); |
| formatter.format(data, 0); |
| formatter.format(data, 1); |
| formatter.format(data, 2); |
| |
| var overallDiv = document.getElementById('overall'); |
| var overallTable = new google.visualization.Table(overallDiv); |
| overallTable.draw(data, {showRowNumber: false}); |
| } |
| |
| function drawTimeline() { |
| var tData = new google.visualization.DataTable(); |
| tData.addColumn('date', 'Date'); |
| tData.addColumn('number', 'Nav'); |
| tData.addColumn('number', 'Market'); |
| |
| var dailyStats = rawData.daily; |
| for (i = 0; i < dailyStats.length; i++) { |
| var stat = dailyStats[i]; |
| var row = [new Date(stat.time), stat.nav, stat.market]; |
| tData.addRow(row); |
| } |
| |
| var tTimelineDiv = document.getElementById('t_timeline'); |
| tChart = new google.visualization.AnnotatedTimeLine(tTimelineDiv); |
| tChart.draw(tData, { |
| 'displayRangeSelector': false, |
| 'displayZoomButtons': false, |
| 'scaleType': 'allmaximized', |
| 'scaleColumns': [0,1], |
| }); |
| |
| var bData = new google.visualization.DataTable(); |
| bData.addColumn('date', 'Date'); |
| bData.addColumn('number', 'Position Count'); |
| |
| var dailyStats = rawData.daily; |
| for (i = 0; i < dailyStats.length; i++) { |
| var stat = dailyStats[i]; |
| var row = [new Date(stat.time), stat.positionCount]; |
| bData.addRow(row); |
| } |
| |
| var bTimelineDiv = document.getElementById('b_timeline'); |
| bChart = new google.visualization.AnnotatedTimeLine(bTimelineDiv); |
| bChart.draw(bData); |
| |
| google.visualization.events.addListener( |
| bChart, 'rangechange', lineChartRangeChange); |
| } |
| |
| function lineChartRangeChange() { |
| var newRange = bChart.getVisibleChartRange(); |
| tChart.setVisibleChartRange(newRange.start, newRange.end); |
| } |
| </script> |
| |
| </body> |
| </html> |
