gogadmin
/
finopt


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1.1", {packages:["bar", 'table','gauge']});
//      google.load('visualization', '1', {'packages':['table']});
//      google.load("visualization", "1.1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Strike Price', 'P', 'C', ],
{{{dataPCpos}}}
        ]);

	var dataTbl = google.visualization.arrayToDataTable([
{{{dataTablePos}}}

        ]);


        var options = {
          width: 900,
          chart: {
            title: 'Option Postion Distribution. PUT:CALL Ratio [{{{PRvsCR}}}}]',
            subtitle: 'for the month of {{{option_months}}}',
          },
 
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
        chart.draw(data, options);


	// chart table display implied volatilities in a nicely formatted table	
       var chartTbl = new google.visualization.Table(document.getElementById('chartTbl_div'));


       //var portTbl = new google.visualization.Table(document.getElementById('portTblDiv'));

	var formatter = new google.visualization.NumberFormat({pattern:'0.00'});
	for (var i = 2; i < 9; i++)
		formatter.format(dataTbl, i); 
        var options2 = {
          displayAnnotations: true,
	  showRowNumber: true, width: '100%', height: '100%', allowHtml: true,
        };
	chartTbl.draw(dataTbl, options2);

	$('input[id="b_reload"]').click();


////////////////////////////////////////////////////////////////////////////////
// guage functions

		var dataG = google.visualization.arrayToDataTable([
		  ['Label', 'Value'],
		  ['Delta', 0],
		  ['Delta-C', 0],
		  ['Delta-P', 0]
		]);

		var optionsG = {

		  width: 400, height: 120,
		  redFrom: -50, redTo: -25,
		  yellowFrom:-24, yellowTo: -15,
		  greenFrom: -10, greenTo: 10,	
		  minorTicks: 5,
		  min: -50, max: 50
		};

		var dataT = google.visualization.arrayToDataTable([
		  ['Label', 'Value'],
		  ['Theta', 0],
		  ['Theta-C', 0],
		  ['Theta-P', 0]
		]);

		var optionsT = {

		  width: 400, height: 120,
		  redFrom: -3000, redTo: -2000,
		  yellowFrom:-1999, yellowTo: 500,
		  greenFrom: 5000, greenTo: 15000,	
		  minorTicks: 5,
		  min: -3000, max: 15000
		};

		var gchart = new google.visualization.Gauge(document.getElementById('chart_div'));
//		refreshPortSummary();
//		gchart.draw(dataG, optionsG);

		var tchart = new google.visualization.Gauge(document.getElementById('chartTheta_div'));
		refreshPortSummary();
		
		function refreshPortSummary(){
		    $.ajax({
			type: 'Post',
			url: '/ws_port_summary',
			success: function (data) {
				//alert(data);
				var jdata = JSON.parse(data);
				$('#temp').text(data);				
				//alert(jdata.delta_all);
				
				dataG.setValue(0, 1, Math.round(jdata.delta_all*100)/100);
				dataG.setValue(1, 1, Math.round(jdata.delta_c*100)/100);
				dataG.setValue(2, 1, Math.round(jdata.delta_p*100)/100);
				gchart.draw(dataG, optionsG);

				dataT.setValue(0, 1, Math.round(jdata.theta_all));
				dataT.setValue(1, 1, Math.round(jdata.theta_c));
				dataT.setValue(2, 1, Math.round(jdata.theta_p));
				tchart.draw(dataT, optionsT);

				$('#pt_status').text("Unreal P/L: " + Math.round(jdata.unreal_pl*100)/100 + "   Cal Status: " + jdata.status);

			}
		    });

		};

		setInterval(function() {
			refreshPortSummary();
		}, 9500);    


      } // end drawChart


		//})

//	});

    </script>
    <script>
	$(function() {
		$( "#tabs" ).tabs();
	});
    </script>

  </head>
  <body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Dashboard</a></li>
    <li><a href="#tabs-2">Position Distribution</a></li>
    <li><a href="#tabs-3">Risk Distribution</a></li>
  </ul>
  <div id="tabs-1">
	<div id='pt_status'></div>
	<div id="chart_div" style="width: 400px; height: 120px;"></div>
	<div id="chartTheta_div" style="width: 400px; height: 120px;"></div>
  </div>
  <div id="tabs-2">
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
    
  </div>
  <div id="tabs-3">
<div id='chartTbl_div' style='width: 900px; height: 500px;'></div>
  </div>
</div>

  </body>
</html>