opt-pos-chart-tmpl.html~ 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <html>
  2. <head>
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  4. <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  5. <script type="text/javascript">
  6. google.load("visualization", "1.1", {packages:["bar", 'table','gauge']});
  7. // google.load('visualization', '1', {'packages':['table']});
  8. // google.load("visualization", "1.1", {packages:["corechart"]});
  9. google.setOnLoadCallback(drawChart);
  10. function drawChart() {
  11. var data = google.visualization.arrayToDataTable([
  12. ['Strike Price', 'P', 'C', ],
  13. {{{dataPCpos}}}
  14. ]);
  15. var dataTbl = google.visualization.arrayToDataTable([
  16. {{{dataTablePos}}}
  17. ]);
  18. var options = {
  19. width: 900,
  20. chart: {
  21. title: 'Option Postion Distribution. PUT:CALL Ratio [{{{PRvsCR}}}}]',
  22. subtitle: 'for the month of {{{option_months}}}',
  23. },
  24. };
  25. var chart = new google.charts.Bar(document.getElementById('barchart_material'));
  26. chart.draw(data, options);
  27. // chart table display implied volatilities in a nicely formatted table
  28. var chartTbl = new google.visualization.Table(document.getElementById('chartTbl_div'));
  29. //var portTbl = new google.visualization.Table(document.getElementById('portTblDiv'));
  30. var formatter = new google.visualization.NumberFormat({pattern:'0.00'});
  31. for (var i = 2; i < 9; i++)
  32. formatter.format(dataTbl, i);
  33. var options2 = {
  34. displayAnnotations: true,
  35. showRowNumber: true, width: '100%', height: '100%', allowHtml: true,
  36. };
  37. chartTbl.draw(dataTbl, options2);
  38. $('input[id="b_reload"]').click();
  39. ////////////////////////////////////////////////////////////////////////////////
  40. // guage functions
  41. var dataG = google.visualization.arrayToDataTable([
  42. ['Label', 'Value'],
  43. ['Delta', 0],
  44. ['Delta-C', 0],
  45. ['Delta-P', 0]
  46. ]);
  47. var optionsG = {
  48. chart:{
  49. title: 'Portfolio Delta Value'},
  50. width: 400, height: 120,
  51. redFrom: -50, redTo: -25,
  52. yellowFrom:-24, yellowTo: -15,
  53. greenFrom: -10, greenTo: 10,
  54. minorTicks: 5,
  55. min: -50, max: 50
  56. };
  57. var dataT = google.visualization.arrayToDataTable([
  58. ['Label', 'Value'],
  59. ['Theta', 0],
  60. ['Theta-C', 0],
  61. ['Theta-P', 0]
  62. ]);
  63. var optionsT = {
  64. chart:{
  65. title: 'Portfolio Theta Value'},
  66. width: 400, height: 120,
  67. redFrom: -3000, redTo: -2000,
  68. yellowFrom:-1999, yellowTo: 500,
  69. greenFrom: 5000, greenTo: 15000,
  70. minorTicks: 5,
  71. min: -3000, max: 15000
  72. };
  73. var gchart = new google.visualization.Gauge(document.getElementById('chart_div'));
  74. // refreshPortSummary();
  75. // gchart.draw(dataG, optionsG);
  76. var tchart = new google.visualization.Gauge(document.getElementById('chartTheta_div'));
  77. refreshPortSummary();
  78. function refreshPortSummary(){
  79. $.ajax({
  80. type: 'Post',
  81. url: '/ws_port_summary',
  82. success: function (data) {
  83. //alert(data);
  84. var jdata = JSON.parse(data);
  85. $('#temp').text(data);
  86. //alert(jdata.delta_all);
  87. dataG.setValue(0, 1, Math.round(jdata.delta_all*100)/100);
  88. dataG.setValue(1, 1, Math.round(jdata.delta_c*100)/100);
  89. dataG.setValue(2, 1, Math.round(jdata.delta_p*100)/100);
  90. gchart.draw(dataG, optionsG);
  91. dataT.setValue(0, 1, Math.round(jdata.theta_all));
  92. dataT.setValue(1, 1, Math.round(jdata.theta_c));
  93. dataT.setValue(2, 1, Math.round(jdata.theta_p));
  94. tchart.draw(dataT, optionsT);
  95. $('#pt_status').text("Unreal P/L: " + Math.round(jdata.unreal_pl*100)/100 + " Cal Status: " + jdata.status);
  96. }
  97. });
  98. };
  99. setInterval(function() {
  100. refreshPortSummary();
  101. }, 9500);
  102. } // end drawChart
  103. //})
  104. // });
  105. </script>
  106. </head>
  107. <body>
  108. <div id='pt_status'></div>
  109. <div id="chart_div" style="width: 400px; height: 120px;"></div>
  110. <div id="chartTheta_div" style="width: 400px; height: 120px;"></div>
  111. <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  112. <div id='chartTbl_div' style='width: 900px; height: 500px;'></div>
  113. <div id="portTbl">
  114. <input type="button" id="b_reload" value="Reload" />
  115. </div>
  116. <div id='portTblDiv' style='width: 900px; height: 500px;'></div>
  117. <div id='temp'></div>
  118. </body>
  119. </html>