bubble-port-static.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <html><head>
  2. <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  3. <style>
  4. .chartWithMarkerOverlay {
  5. position: relative;
  6. width: 700px;
  7. }
  8. .overlay-text {
  9. width: 200px;
  10. height: 200px;
  11. position: absolute;
  12. top: 30px; /* chartArea top */
  13. left: 200px; /* chartArea left */
  14. }
  15. .overlay-marker {
  16. width: 50px;
  17. height: 50px;
  18. position: absolute;
  19. top: 53px; /* chartArea top */
  20. left: 528px; /* chartArea left */
  21. }
  22. </style>
  23. <script src="bubble-port-static_files/jquery.js"></script>
  24. <script type="text/javascript" src="bubble-port-static_files/jsapi"></script>
  25. <script type="text/javascript">
  26. google.load("visualization", "1.1", {packages:['corechart']});
  27. google.setOnLoadCallback(drawChart);
  28. function drawChart() {
  29. ////////////////////////////////////////////////////////////////////////////////
  30. // guage functions
  31. var data = google.visualization.arrayToDataTable(
  32. [['contract', 'strike', 'unreal PL', 'theta', 'delta'],["HSI-20151029-21800-C",21800,23919.9417517,-847.640353617,34.3206494687],["HSI-20151029-20600-P",20600,2370.18040195,234.030821339,2.94991041015],["HSI-20151029-18000-P",18000,669.979772265,16.7243718533,0.0961753807965],["MHI-20151029-22400-C",22400,4571.99658662,-653.903571555,21.3110103014],["HSI-20151029-20800-P",20800,0.0,-0.0,-0.0],["HSI-20151029-17000-P",17000,4469.99924749,17.2106407419,0.078741153585],["HSI-20151029-19400-P",19400,1090.19189451,157.899556569,1.30201821447],["HSI-20151029-24600-C",24600,1709.81965805,244.615050639,-3.28831913087],["HSI-20151029-18400-P",18400,2259.99903292,49.4722768455,0.315622642862],["HSI-20151029-22400-C",22400,0.0,-0.0,0.0],["HSI-20151029-19800-P",19800,9030.05297609,439.87608901,4.12517690941],["HSI-20151029-24800-C",24800,1539.95739179,95.3030785737,-1.20569112818],["HSI-20151029-24200-C",24200,9430.2283091,1626.16833327,-25.1547381539],["MHI-20151029-24200-C",24200,59.0205730977,108.601166314,-1.66956781611],["HSI-20151029-23400-C",23400,6582.44069705,2015.2933091,-42.9465063458],["MHI-20151029-21400-P",21400,-2587.99599722,-335.511655065,-6.28266480291],["HSI-20151029-23600-C",23600,-4590.04663309,1275.53162128,-24.8106720387],["MHI-20151029-22200-C",22200,5018.99635688,-510.749138578,17.6661251353],["HSI-20151029-23200-C",23200,-21315.899837,2954.43687153,-68.7130818343],["HSI-20151029-22200-C",22200,32039.9788834,-1677.02322083,59.3074230743],["HSI-20151029-19600-P",19600,1540.01810034,190.494158898,1.67062250645],["HSI-20151029-20400-P",20400,5841.11465835,390.360320296,4.54010718334],["HSI-20151029-20200-P",20200,8829.84904992,648.441667022,6.99051336801],["MHI-20151029-21000-P",21000,-47984.8017666,-455.612887365,-6.87918674625],["MHI-20151029-21000-C",21000,40535.0017735,-886.520963812,39.5681292655],["HSI-20151029-16600-P",16600,10509.9969485,52.1482807266,0.21982694595],]
  33. );
  34. var options = { title: 'Portfolio Risk Distribution',
  35. hAxis: {title: 'Strikes'}, vAxis: {title: ' Unreal P/L'},
  36. bubble: {textStyle: {fontSize: 11}}, colorAxis: {colors: ['red', 'blue']},
  37. sizeAxis: {minValue: 2, maxSize: 40}
  38. };
  39. var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
  40. chart.draw(data, options);
  41. var cli = chart.getChartLayoutInterface();
  42. var l= cli.getChartAreaBoundingBox().left;
  43. var t=cli.getChartAreaBoundingBox().top;
  44. var h=cli.getChartAreaBoundingBox().height;
  45. var w= cli.getChartAreaBoundingBox().width;
  46. var hx = cli.getYLocation(50000);
  47. var cx = cli.getYLocation(0);
  48. $('#pt_status').text(l + ':' + t + ':' + h + ':' + w + ':' + hx + ':' + cx);
  49. google.visualization.events.addListener(chart, 'ready', placeMarker);
  50. function chartMouseOver(e) {
  51. var cli = chart.getChartLayoutInterface();
  52. var xx = Math.floor(cli.getXLocation(e['row'])) + 'px';
  53. var yy = Math.floor(cli.getYLocation(data.getValue(e['row'], 1))) + 'px';
  54. $('#pt_status').text(e['row'] + ':' + xx + + ':' + yy + ':' + data.getValue(e['row'], 1));
  55. $('#pt2_status').text(e['row'] + ':' + cli.getHAxisValue(e['row']));
  56. }
  57. setInterval(function() {
  58. placeMarker();
  59. }, 2000);
  60. //https://groups.google.com/forum/#!msg/google-chart-api/yYxkv4eorhA/P-MHQOLA19MJ
  61. function placeMarker() {
  62. var cli = chart.getChartLayoutInterface();
  63. document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(0) - 25) + "px";
  64. document.querySelector('.overlay-marker').style.left = Math.floor(
  65. cli.getXLocation(Math.round(Math.max(25000 * Math.random(), 15000)
  66. ))) + "px";
  67. };
  68. } // end drawChart
  69. </script><script src="bubble-port-static_files/a" type="text/javascript"></script><link href="bubble-port-static_files/uien.css" type="text/css" rel="stylesheet"><script src="bubble-port-static_files/webfontloaderformatendefaultenuiencorecharten.js" type="text/javascript"></script>
  70. <link type="text/css" rel="stylesheet" href="bubble-port-static_files/tooltip.css"></head>
  71. <body>
  72. <div id="pt_status">172:153:494:556:153.49999999999994:400</div>
  73. <div id="pt2_status"></div>
  74. <div id="chart_div" style="width: 900px; height: 800px;"><div style="position: relative;"><div dir="ltr" style="position: relative; width: 900px; height: 800px;"><div aria-label="A chart." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg aria-label="A chart." style="overflow: hidden;" height="800" width="900"><defs id="defs"><linearGradient gradientUnits="userSpaceOnUse" y2="106.5" x2="655.963174251267" y1="106.5" x1="249.03682574873295" id="_ABSTRACT_RENDERER_ID_0"><stop style="stop-color:#ff0000;stop-opacity:1" offset="0%"></stop><stop style="stop-color:#0000ff;stop-opacity:1" offset="100%"></stop></linearGradient><clipPath id="_ABSTRACT_RENDERER_ID_1"><rect height="494" width="556" y="153" x="172"></rect></clipPath></defs><rect fill="#ffffff" stroke-width="0" stroke="none" height="800" width="900" y="0" x="0"></rect><g><text fill="#000000" stroke-width="0" stroke="none" font-weight="bold" font-size="15" font-family="Arial" y="95.25" x="172" text-anchor="start">Portfolio Risk Distribution</text></g><g><rect fill="url(#_ABSTRACT_RENDERER_ID_0)" stroke-width="0" stroke="none" height="14.075" width="406.92634850253404" y="114.925" x="249.03682574873295"></rect><text fill="#000000" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="126.75" x="172" text-anchor="start">-1,677.023</text><text fill="#000000" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="126.75" x="664" text-anchor="start">2,954.437</text><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="22.5" width="556" y="106.5" x="172"></rect></g><g><rect fill="#ffffff" fill-opacity="0" stroke-width="0" stroke="none" height="494" width="556" y="153" x="172"></rect><g clip-path="url(file:///home/larry/l1304/workspace/finopt/src/html/bubble-port.html#_ABSTRACT_RENDERER_ID_1)"><g><rect fill="#cccccc" stroke-width="0" stroke="none" height="494" width="1" y="153" x="172"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="494" width="1" y="153" x="311"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="494" width="1" y="153" x="450"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="494" width="1" y="153" x="588"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="494" width="1" y="153" x="727"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="1" width="556" y="646" x="172"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="1" width="556" y="523" x="172"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="1" width="556" y="400" x="172"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="1" width="556" y="276" x="172"></rect><rect fill="#cccccc" stroke-width="0" stroke="none" height="1" width="556" y="153" x="172"></rect></g><g><rect fill="#333333" stroke-width="0" stroke="none" height="1" width="556" y="400" x="172"></rect></g><g><circle fill="#ff0000" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="40" cy="242.04290410483793" cx="572.1"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="245.89290410483792" x="572.1" text-anchor="middle">HSI-20151029-22200-C</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="245.89290410483792" x="572.1" text-anchor="middle">HSI-20151029-22200-C</text></g><circle fill="#d3002c" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="33" cy="200.16244125664497" cx="505.5"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="204.01244125664496" x="505.5" text-anchor="middle">MHI-20151029-21000-C</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="204.01244125664496" x="505.5" text-anchor="middle">MHI-20151029-21000-C</text></g><circle fill="#d1002e" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="30" cy="282.074687164119" cx="549.9"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="285.924687164119" x="549.9" text-anchor="middle">HSI-20151029-21800-C</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="285.924687164119" x="549.9" text-anchor="middle">HSI-20151029-21800-C</text></g><circle fill="#c70038" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="24" cy="377.4600568279634" cx="583.2"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="381.3100568279634" x="583.2" text-anchor="middle">MHI-20151029-22400-C</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="381.3100568279634" x="583.2" text-anchor="middle">MHI-20151029-22400-C</text></g><circle fill="#bf0040" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="21" cy="375.2563479605816" cx="572.1"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="379.1063479605816" x="572.1" text-anchor="middle">MHI-20151029-22200-C</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="379.1063479605816" x="572.1" text-anchor="middle">MHI-20151029-22200-C</text></g><circle fill="#7f0080" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="13" cy="356.46884418389436" cx="461.1"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="360.3188441838944" x="461.1" text-anchor="middle">HSI-20151029-20200-P</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="360.3188441838944" x="461.1" text-anchor="middle">HSI-20151029-20200-P</text></g><circle fill="#8d0072" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="10" cy="371.2033047343345" cx="472.2"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="375.0533047343345" x="472.2" text-anchor="middle">HSI-20151029-20400-P</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="375.0533047343345" x="472.2" text-anchor="middle">HSI-20151029-20400-P</text></g><circle fill="#8a0075" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="9" cy="355.4818388278763" cx="438.9"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="359.3318388278763" x="438.9" text-anchor="middle">HSI-20151029-19800-P</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="359.3318388278763" x="438.9" text-anchor="middle">HSI-20151029-19800-P</text></g><circle fill="#960069" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="7" cy="388.3150106183865" cx="483.3"></circle><g><text aria-hidden="true" fill="#000000" stroke-width="3" stroke="#ffffff" font-size="11" font-family="Arial" y="392.16501061838653" x="483.3" text-anchor="middle">HSI-20151029-20600-P</text><text fill="#000000" stroke-width="0" stroke="none" font-size="11" font-family="Arial" y="392.16501061838653" x="483.3" text-anchor="middle">HSI-20151029-20600-P</text></g><circle fill="#a2005d" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="396.69699972273355" cx="339"></circle><circle fill="#a3005c" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="400" cx="494.4"></circle><circle fill="#a2005d" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="377.9629037098743" cx="283.5"></circle><circle fill="#9a0065" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="394.6253539600657" cx="416.70000000000005"></circle><circle fill="#95006a" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="391.5705890858135" cx="705.3"></circle><circle fill="#a0005f" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="388.85820476770436" cx="361.2"></circle><circle fill="#a3005c" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="400" cx="583.2"></circle><circle fill="#9d0062" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="392.40801005847527" cx="716.4"></circle><circle fill="#4900b6" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="353.508974436137" cx="683.1"></circle><circle fill="#9d0062" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="399.7090285746283" cx="683.1"></circle><circle fill="#3400cb" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="367.5485673635435" cx="638.7"></circle><circle fill="#b5004a" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="412.7588202662946" cx="527.7"></circle><circle fill="#5c00a3" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="422.6289299011337" cx="649.8"></circle><circle fill="#0000ff" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="505.08738619640997" cx="627.6"></circle><circle fill="#980067" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="392.4077107653238" cx="427.8"></circle><circle fill="#bc0043" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="636.565072709338" cx="505.5"></circle><circle fill="#a0005f" fill-opacity="0.8" stroke-width="1" stroke="#cccccc" r="5" cy="348.18571504389496" cx="261.3"></circle></g></g><g></g><g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="668.75" x="172.5" text-anchor="middle">15,000</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="668.75" x="311.25" text-anchor="middle">17,500</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="668.75" x="450" text-anchor="middle">20,000</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="668.75" x="588.75" text-anchor="middle">22,500</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="668.75" x="727.5" text-anchor="middle">25,000</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="651.75" x="157" text-anchor="end">-50,000</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="528.5" x="157" text-anchor="end">-25,000</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="405.25" x="157" text-anchor="end">0</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="282" x="157" text-anchor="end">25,000</text></g><g><text fill="#444444" stroke-width="0" stroke="none" font-size="15" font-family="Arial" y="158.74999999999994" x="157" text-anchor="end">50,000</text></g></g></g><g><g><text fill="#222222" stroke-width="0" stroke="none" font-style="italic" font-size="15" font-family="Arial" y="740.75" x="450" text-anchor="middle">Strikes</text></g><g><text fill="#222222" stroke-width="0" stroke="none" transform="rotate(-90 59.25 400)" font-style="italic" font-size="15" font-family="Arial" y="400" x="59.25" text-anchor="middle">Unreal P/L</text></g></g><g></g></svg><div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;" aria-label="A tabular representation of the data in the chart."><table><thead><tr><th>contract</th><th>strike</th><th>unreal PL</th><th>theta</th><th>delta</th></tr></thead><tbody><tr><td>HSI-20151029-21800-C</td><td>21800</td><td>23919.9417517</td><td>-847.640353617</td><td>34.3206494687</td></tr><tr><td>HSI-20151029-20600-P</td><td>20600</td><td>2370.18040195</td><td>234.030821339</td><td>2.94991041015</td></tr><tr><td>HSI-20151029-18000-P</td><td>18000</td><td>669.979772265</td><td>16.7243718533</td><td>0.0961753807965</td></tr><tr><td>MHI-20151029-22400-C</td><td>22400</td><td>4571.99658662</td><td>-653.903571555</td><td>21.3110103014</td></tr><tr><td>HSI-20151029-20800-P</td><td>20800</td><td>0</td><td>0</td><td>0</td></tr><tr><td>HSI-20151029-17000-P</td><td>17000</td><td>4469.99924749</td><td>17.2106407419</td><td>0.078741153585</td></tr><tr><td>HSI-20151029-19400-P</td><td>19400</td><td>1090.19189451</td><td>157.899556569</td><td>1.30201821447</td></tr><tr><td>HSI-20151029-24600-C</td><td>24600</td><td>1709.81965805</td><td>244.615050639</td><td>-3.28831913087</td></tr><tr><td>HSI-20151029-18400-P</td><td>18400</td><td>2259.99903292</td><td>49.4722768455</td><td>0.315622642862</td></tr><tr><td>HSI-20151029-22400-C</td><td>22400</td><td>0</td><td>0</td><td>0</td></tr><tr><td>HSI-20151029-19800-P</td><td>19800</td><td>9030.05297609</td><td>439.87608901</td><td>4.12517690941</td></tr><tr><td>HSI-20151029-24800-C</td><td>24800</td><td>1539.95739179</td><td>95.3030785737</td><td>-1.20569112818</td></tr><tr><td>HSI-20151029-24200-C</td><td>24200</td><td>9430.2283091</td><td>1626.16833327</td><td>-25.1547381539</td></tr><tr><td>MHI-20151029-24200-C</td><td>24200</td><td>59.0205730977</td><td>108.601166314</td><td>-1.66956781611</td></tr><tr><td>HSI-20151029-23400-C</td><td>23400</td><td>6582.44069705</td><td>2015.2933091</td><td>-42.9465063458</td></tr><tr><td>MHI-20151029-21400-P</td><td>21400</td><td>-2587.99599722</td><td>-335.511655065</td><td>-6.28266480291</td></tr><tr><td>HSI-20151029-23600-C</td><td>23600</td><td>-4590.04663309</td><td>1275.53162128</td><td>-24.8106720387</td></tr><tr><td>MHI-20151029-22200-C</td><td>22200</td><td>5018.99635688</td><td>-510.749138578</td><td>17.6661251353</td></tr><tr><td>HSI-20151029-23200-C</td><td>23200</td><td>-21315.899837</td><td>2954.43687153</td><td>-68.7130818343</td></tr><tr><td>HSI-20151029-22200-C</td><td>22200</td><td>32039.9788834</td><td>-1677.02322083</td><td>59.3074230743</td></tr><tr><td>HSI-20151029-19600-P</td><td>19600</td><td>1540.01810034</td><td>190.494158898</td><td>1.67062250645</td></tr><tr><td>HSI-20151029-20400-P</td><td>20400</td><td>5841.11465835</td><td>390.360320296</td><td>4.54010718334</td></tr><tr><td>HSI-20151029-20200-P</td><td>20200</td><td>8829.84904992</td><td>648.441667022</td><td>6.99051336801</td></tr><tr><td>MHI-20151029-21000-P</td><td>21000</td><td>-47984.8017666</td><td>-455.612887365</td><td>-6.87918674625</td></tr><tr><td>MHI-20151029-21000-C</td><td>21000</td><td>40535.0017735</td><td>-886.520963812</td><td>39.5681292655</td></tr><tr><td>HSI-20151029-16600-P</td><td>16600</td><td>10509.9969485</td><td>52.1482807266</td><td>0.21982694595</td></tr></tbody></table></div></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 810px; left: 910px; white-space: nowrap; font-family: Arial; font-size: 15px; font-weight: bold;">17.6661251353</div><div></div></div></div>
  75. <div id="temp"></div>
  76. <div style="top: 375px; left: 255px;" class="overlay-marker">
  77. <!-- img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50" -->
  78. <img src="bubble-port-static_files/marker.png" height="50">
  79. </div>
  80. </body></html>