opt-pos-chart-tmpl.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  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. width: 400, height: 120,
  49. redFrom: -50, redTo: -25,
  50. yellowFrom:-24, yellowTo: -15,
  51. greenFrom: -10, greenTo: 10,
  52. minorTicks: 5,
  53. min: -50, max: 50
  54. };
  55. var dataT = google.visualization.arrayToDataTable([
  56. ['Label', 'Value'],
  57. ['Theta', 0],
  58. ['Theta-C', 0],
  59. ['Theta-P', 0]
  60. ]);
  61. var optionsT = {
  62. width: 400, height: 120,
  63. redFrom: -3000, redTo: -2000,
  64. yellowFrom:-1999, yellowTo: 500,
  65. greenFrom: 5000, greenTo: 15000,
  66. minorTicks: 5,
  67. min: -3000, max: 15000
  68. };
  69. var gchart = new google.visualization.Gauge(document.getElementById('chart_div'));
  70. // refreshPortSummary();
  71. // gchart.draw(dataG, optionsG);
  72. var tchart = new google.visualization.Gauge(document.getElementById('chartTheta_div'));
  73. refreshPortSummary();
  74. function refreshPortSummary(){
  75. $.ajax({
  76. type: 'Post',
  77. url: '/ws_port_summary',
  78. success: function (data) {
  79. //alert(data);
  80. var jdata = JSON.parse(data);
  81. $('#temp').text(data);
  82. //alert(jdata.delta_all);
  83. dataG.setValue(0, 1, Math.round(jdata.delta_all*100)/100);
  84. dataG.setValue(1, 1, Math.round(jdata.delta_c*100)/100);
  85. dataG.setValue(2, 1, Math.round(jdata.delta_p*100)/100);
  86. gchart.draw(dataG, optionsG);
  87. dataT.setValue(0, 1, Math.round(jdata.theta_all));
  88. dataT.setValue(1, 1, Math.round(jdata.theta_c));
  89. dataT.setValue(2, 1, Math.round(jdata.theta_p));
  90. tchart.draw(dataT, optionsT);
  91. $('#pt_status').text("Unreal P/L: " + Math.round(jdata.unreal_pl*100)/100 + " Cal Status: " + jdata.status);
  92. }
  93. });
  94. };
  95. setInterval(function() {
  96. refreshPortSummary();
  97. }, 9500);
  98. } // end drawChart
  99. //})
  100. // });
  101. </script>
  102. </head>
  103. <body>
  104. <div id='pt_status'></div>
  105. <div id="chart_div" style="width: 400px; height: 120px;"></div>
  106. <div id="chartTheta_div" style="width: 400px; height: 120px;"></div>
  107. <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  108. <div id='chartTbl_div' style='width: 900px; height: 500px;'></div>
  109. <div id="portTbl">
  110. <input type="button" id="b_reload" value="Reload" />
  111. </div>
  112. <div id='portTblDiv' style='width: 900px; height: 500px;'></div>
  113. <div id='temp'></div>
  114. </body>
  115. </html>