gogadmin
/
finopt


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<html>
  <head>
   <style>
   .chartWithMarkerOverlay {
       position: relative;
       width: 700px;
   }
   .overlay-text {
       width: 200px;
       height: 200px;
       position: absolute;
       top: 30px;   /* chartArea top */
       left: 200px; /* chartArea left */
   }
   .overlay-marker {
       width: 50px;
       height: 50px;
       position: absolute;
       top: 375px;   /* chartArea top */
       left: 350px; /* chartArea left */
       color: #000066;
       font: 15px arial;
    
   }
   </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></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">

      google.load("visualization", "1.1", {packages:['corechart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {


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


		var data = google.visualization.arrayToDataTable( 
{{{bubble_data}}}
		); 


		var options = { title: 'Portfolio Risk Distribution', 
			hAxis: {title: 'Strike Price'}, vAxis: {title: ' Unreal P/L'}, 
			// to display labels, remove the color: 'none option
			bubble: {textStyle: {fontSize: 11, color: 'none'}}, colorAxis: {colors: ['red', 'blue']},
			sizeAxis: {minValue: 2,  maxSize: 40}
			//backgroundColor: '#E4E4E4'
		 }; 


		var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); 
		chart.draw(data, options); 


		google.visualization.events.addListener(chart, 'ready', placeIndexMarker);
		
		var button = document.getElementById('b1');

		button.onclick = function() {
			refreshPortItems();
			refreshAcctItems();

		}

		setInterval(function() {
		  placeIndexMarker();
		}, 2000);


		function refreshPortItems() {
		    $.ajax({
			type: 'Post',
			url: '/ws_bubble_data',
			success: function (s_portitems) {


				$('#pt_status').text(s_portitems);				
				//alert(jdata.delta_all);
				lst = eval(s_portitems);
//alert(lst[0]);
				data = google.visualization.arrayToDataTable(eval(s_portitems));
				chart.draw(data, options);
				drawChart();

			}
		    });
		}


		function refreshAcctItems() {
		    $.ajax({
			type: 'Post',
			url: '/ws_acct_data',
			success: function (s_accttitems) {


				$('#pt_status').text(s_accttitems);				
				//alert(jdata.delta_all);
				lst = eval(s_portitems);
//alert(lst[0]);
				dataB = google.visualization.arrayToDataTable(eval(s_accttitems));
				chart.draw(dataB, options);
				drawChart();

			}
		    });
		}

		function placeIndexMarker(){
		    $.ajax({
			type: 'Post',
			url: '/ws_market_data?r_ckey={{{FUT_CONTRACT}}}&fid=4',
			success: function (data) {

				var spot = data
				$('#spot').text(spot);

				var cli = chart.getChartLayoutInterface();
				document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(0) - 25) + "px";
				document.querySelector('.overlay-marker').style.left = Math.floor(cli.getXLocation(spot) - 25) + "px";

			}
		    });


		var dataB = google.visualization.arrayToDataTable(
{{{barAcct}}}
		);

		var view = new google.visualization.DataView(dataB);
		view.setColumns([0, 1,
			       { calc: "stringify",
				 sourceColumn: 1,
				 type: "string",
				 role: "annotation" }, 2]);

		var options = {
		chart: {
		  title: 'Account Summary {{{account_no}}}',
		  subtitle: 'Last updated {{{last_updated}}}'
		},

		bars: 'horizontal',bar: {groupWidth: "55%"},

		  legend: { position: "none" },
		};
		var material = new google.visualization.BarChart(document.getElementById('barchart_div'));
		material.draw(view, options);

		}


//https://groups.google.com/forum/#!msg/google-chart-api/yYxkv4eorhA/P-MHQOLA19MJ
/* testing
		function placeMarker() {
			var cli = chart.getChartLayoutInterface();
			document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(0) - 25) + "px";
			var spot = Math.round(Math.max(25000 * Math.random(), 15000))
			$('#pt_status').text(spot);
			$('#spot').text(spot);
			document.querySelector('.overlay-marker').style.left = Math.floor(cli.getXLocation(spot)) + "px";
		};


		var cli = chart.getChartLayoutInterface();

		var l= cli.getChartAreaBoundingBox().left;
		var t=cli.getChartAreaBoundingBox().top;
		var h=cli.getChartAreaBoundingBox().height;
		var w= cli.getChartAreaBoundingBox().width;
		var hx = cli.getYLocation(50000);
		var cx = cli.getYLocation(0);

		$('#pt_status').text(l + ':' + t  + ':' + h  + ':' + w + ':' + hx + ':' + cx);
		  function chartMouseOver(e) {
			var cli = chart.getChartLayoutInterface();
			var xx = Math.floor(cli.getXLocation(e['row'])) + 'px';
			var yy = Math.floor(cli.getYLocation(data.getValue(e['row'], 1))) + 'px';
		  	$('#pt_status').text(e['row'] + ':' + xx +  + ':' + yy + ':' + data.getValue(e['row'], 1));
		  	$('#pt2_status').text(e['row'] + ':' + cli.getHAxisValue(e['row']));
		  }
*/
      } // end drawChart


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

  </head>
  <body>

<div id='pt2_status'></div>
<button type='button' id='b1'>Update</button>
<div id="chart_div" style="width: 900px; height: 800px;"></div>
<div id="barchart_div" style="width:800px; height: 600px;"></div>
<div id='temp'></div>
  <div class="overlay-marker">
  <img src="/public/green_marker.png" height="50"><div id='spot'></div>
  </div>

<div id='pt_status'></div>
  </body>
</html>