examples/machinedata/src/main/html/index.php - apex-malhar - Git at Google

 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
  *   http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Machine Generated Data Example </title>

 <link rel="stylesheet" type="text/css" href="malhar.css">

 <!-- Google charts include -->
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
 google.load('visualization', '1', {'packages':['corechart']});
 </script>

 <!-- Malhar charting utils -->
 <script type="text/javascript" src="global.js"></script>

 <!-- window onload -->
 <script type="text/javascript">

 function DrawAggrCharts()
 {
   // get refresh url
   lookback = aggrLookBack;
   var url = DataUrl();

   // fetch data, draw charts
   try
   {
     var connect = new XMLHttpRequest();
     connect.onreadystatechange = function() {
       if(connect.readyState==4 && connect.status==200) {

 console.log(url);
         aggrData = connect.response;
         var pts = JSON.parse(aggrData);
         aggrDataPoints = new Array();
         for(var i=0; i <  pts.length; i++) aggrDataPoints.push(pts[i]);
         DrawCPUChart();
         DrawRAMChart();
         DrawHDDChart();
         //DrawImpressionsChart();
         delete aggrData;
       }
     }
     connect.open('GET',  url, true);
     connect.send(null);
   } catch(e) {
   }
   aggrLookBack += 30;
 }

 function DrawContCharts()
 {
   // get refresh url
   lookback = contLookBack;
   var url = DataUrl();
   //document.getElementById('chart_div').innerHTML = url;

   // fetch data, draw charts
   try
   {
     var connect = new XMLHttpRequest();
     connect.onreadystatechange = function() {
       if(connect.readyState==4 && connect.status==200) {
         contData = connect.response;
         var newPts = JSON.parse(contData);
         contDataPoints = new Array();
         for(var i=0; i <  newPts.length; i++) contDataPoints.push(newPts[i]);
         DrawCtrChart() ;
         DrawMarginChart();
         delete contData;
         delete newPts;
       }
     }
     connect.open('GET',  url, true);
     connect.send(null);
   } catch(e) {
   }
   contLookBack += contRefresh;
 }

 window.onload = function() {

   // Initialize global
   InitializeGlobal();

   // Inituialize form fields
   if (params['customer']) document.getElementById('customer').value = params['customer'];
   if (params['product']) document.getElementById('product').value = params['product'];
   if (params['os']) document.getElementById('os').value = params['os'];
   if (params['software1']) document.getElementById('software1').value = params['software1'];
   if (params['software2']) document.getElementById('software2').value = params['software2'];
   if (params['software3']) document.getElementById('software3').value = params['software3'];
   if (params['refresh'])
   {
     document.getElementById('refresh').value = params['refresh'];
   } else {
     document.getElementById('refresh').value = 5;
   }
   if (params['lookback'])
   {
     document.getElementById('lookback').value = params['lookback'];
   } else {
     document.getElementById('lookback').value = 6;
   }

   // draw charts
   DrawAggrCharts();
   //DrawContCharts();
   setInterval(DrawAggrCharts, 30000);
   //setInterval(DrawContCharts, contRefresh * 1000);
 };

 </script>

 </head>
 <body>

     <div id="header">
         <ul class="dashboard-modes">
             <li>
                 <a href="#" class="active">Machine Generated Data Example </a>
             </li>
         </ul>

     </div>

 	<div id="main">
     <div id="pagecontent">
         <div class="dashboardMgr">
             <div class="inner" style="">
                 <h2 class="title">View Real Time Data Charts</h2>
                 <form method="GET" action="index.php">

                     <label for="customer">Customer ID:</label>
                     <select name="customer" id="customer" style="width:200px;">
                   		<option value="">ALL</option>
                 		<?php
                    			for ($i = 1; $i <= 5; $i++) {
                   				print "<option value=\"$i\">Customer $i</option>\n";
                 			}
                 		?>
              		</select>

             		<label for="">Product ID:</label>
             		<select name="product" id="product" style="width:200px;">
               		    <option value="">ALL</option>
                 		<?php
                 			for ($i = 4; $i <= 6; $i++) {
                   				print "<option value=\"$i\">Product $i</option>\n";
                 			}
                 		?>
             		</select>

         		    <label for="">Product OS:</label>
             		<select name="os" id="os" style="width:200px;">
               		    <option value="">ALL</option>
         		        <?php
                 			for ($i = 10; $i <= 12; $i++) {
                   				print "<option value=\"$i\">OS $i</option>\n";
                 			}
         	            ?>
             		</select>

                     <label for="software1">Software1 Ver:</label>
                     <select name="software1" id="software1" style="width:200px;">
                   		<option value="">ALL</option>
                 		<?php
                    			for ($i = 10; $i <= 12; $i++) {
                   				print "<option value=\"$i\">Software1 Version $i</option>\n";
                 			}
                 		?>
              		</select>

                     <label for="software2">Software2 Ver:</label>
                     <select name="software2" id="software2" style="width:200px;">
                   		<option value="">ALL</option>
                 		<?php
                    			for ($i = 12; $i <= 14; $i++) {
                   				print "<option value=\"$i\">Software2 Version $i</option>\n";
                 			}
                 		?>
              		</select>

                     <label for="software3">Software3 Ver:</label>
                     <select name="software3" id="software3" style="width:200px;">
                   		<option value="">ALL</option>
                 		<?php
                    			for ($i = 4; $i <= 6; $i++) {
                   				print "<option value=\"$i\">Software3 Version $i</option>\n";
                 			}
                 		?>
              		</select>

             		<label for="">Refresh Interval:</label>
             		<div class="input-append">
                         <input type="text" name="refresh" id="refresh" class="input-small"/>
                         <span class="add-on">Secs</span>
                     </div>


         		    <label for="">Look Back:</label>
         		    <div class="input-append">
                         <input type="text" name="lookback" id="lookback" class="input-small"/>
                         <span class="add-on">Hours</span>
                     </div>

                     <input type="submit" value="submit" class="btn btn-primary" />

                 </form>
             </div>
             <div class="collapser-container">
                 <div class="collapser">
                     <div class="collapse-dot"></div>
                     <div class="collapse-dot"></div>
                     <div class="collapse-dot"></div>
                 </div>
             </div>
         </div>
         <div class="dashboardMain">

 	<!-- <table><tbody>
                 <tr>
         	      <td><div id="chart_div"></div></td>
         	      <td><div id="chart1_div" ></div></td>
                  </tr>
                  <tr>
         	     <td><div id="chart2_div" ></div></td>
         	     <td><div id="chart3_div" ></div></td>
                  </tr>
                  <tr>
         	   <td><div id="chart4_div" ></div></td>
         	    <td><div id="chart5_div" ></div></td>
                  </tr>
         	 </tr></tbody></table> -->
     	<div class="chart-ctnr" id="chart_div"></div>
         <div class="chart-ctnr" id="chart1_div" ></div>
         <div class="chart-ctnr" id="chart2_div" ></div>
 <!--        <div class="chart-ctnr" id="chart3_div" ></div>
         <div class="chart-ctnr" id="chart4_div" ></div>
         <div class="chart-ctnr" id="chart5_div" ></div> -->
         </div>
 </body>
 </html>
	/*
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* to you under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing,
	* software distributed under the License is distributed on an
	* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	* KIND, either express or implied. See the License for the
	* specific language governing permissions and limitations
	* under the License.
	*/
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Machine Generated Data Example </title>

	<link rel="stylesheet" type="text/css" href="malhar.css">

	<!-- Google charts include -->
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load('visualization', '1', {'packages':['corechart']});
	</script>

	<!-- Malhar charting utils -->
	<script type="text/javascript" src="global.js"></script>

	<!-- window onload -->
	<script type="text/javascript">

	function DrawAggrCharts()
	{
	// get refresh url
	lookback = aggrLookBack;
	var url = DataUrl();

	// fetch data, draw charts
	try
	{
	var connect = new XMLHttpRequest();
	connect.onreadystatechange = function() {
	if(connect.readyState==4 && connect.status==200) {

	console.log(url);
	aggrData = connect.response;
	var pts = JSON.parse(aggrData);
	aggrDataPoints = new Array();
	for(var i=0; i < pts.length; i++) aggrDataPoints.push(pts[i]);
	DrawCPUChart();
	DrawRAMChart();
	DrawHDDChart();
	//DrawImpressionsChart();
	delete aggrData;
	}
	}
	connect.open('GET', url, true);
	connect.send(null);
	} catch(e) {
	}
	aggrLookBack += 30;
	}

	function DrawContCharts()
	{
	// get refresh url
	lookback = contLookBack;
	var url = DataUrl();
	//document.getElementById('chart_div').innerHTML = url;

	// fetch data, draw charts
	try
	{
	var connect = new XMLHttpRequest();
	connect.onreadystatechange = function() {
	if(connect.readyState==4 && connect.status==200) {
	contData = connect.response;
	var newPts = JSON.parse(contData);
	contDataPoints = new Array();
	for(var i=0; i < newPts.length; i++) contDataPoints.push(newPts[i]);
	DrawCtrChart() ;
	DrawMarginChart();
	delete contData;
	delete newPts;
	}
	}
	connect.open('GET', url, true);
	connect.send(null);
	} catch(e) {
	}
	contLookBack += contRefresh;
	}

	window.onload = function() {

	// Initialize global
	InitializeGlobal();

	// Inituialize form fields
	if (params['customer']) document.getElementById('customer').value = params['customer'];
	if (params['product']) document.getElementById('product').value = params['product'];
	if (params['os']) document.getElementById('os').value = params['os'];
	if (params['software1']) document.getElementById('software1').value = params['software1'];
	if (params['software2']) document.getElementById('software2').value = params['software2'];
	if (params['software3']) document.getElementById('software3').value = params['software3'];
	if (params['refresh'])
	{
	document.getElementById('refresh').value = params['refresh'];
	} else {
	document.getElementById('refresh').value = 5;
	}
	if (params['lookback'])
	{
	document.getElementById('lookback').value = params['lookback'];
	} else {
	document.getElementById('lookback').value = 6;
	}

	// draw charts
	DrawAggrCharts();
	//DrawContCharts();
	setInterval(DrawAggrCharts, 30000);
	//setInterval(DrawContCharts, contRefresh * 1000);
	};

	</script>

	</head>
	<body>

	<div id="header">
	<ul class="dashboard-modes">
	<li>
	<a href="#" class="active">Machine Generated Data Example </a>
	</li>
	</ul>

	</div>

	<div id="main">
	<div id="pagecontent">
	<div class="dashboardMgr">
	<div class="inner" style="">
	<h2 class="title">View Real Time Data Charts</h2>
	<form method="GET" action="index.php">

	<label for="customer">Customer ID:</label>
	<select name="customer" id="customer" style="width:200px;">
	<option value="">ALL</option>
	<?php
	for ($i = 1; $i <= 5; $i++) {
	print "<option value=\"$i\">Customer $i</option>\n";
	}
	?>
	</select>

	<label for="">Product ID:</label>
	<select name="product" id="product" style="width:200px;">
	<option value="">ALL</option>
	<?php
	for ($i = 4; $i <= 6; $i++) {
	print "<option value=\"$i\">Product $i</option>\n";
	}
	?>
	</select>

	<label for="">Product OS:</label>
	<select name="os" id="os" style="width:200px;">
	<option value="">ALL</option>
	<?php
	for ($i = 10; $i <= 12; $i++) {
	print "<option value=\"$i\">OS $i</option>\n";
	}
	?>
	</select>

	<label for="software1">Software1 Ver:</label>
	<select name="software1" id="software1" style="width:200px;">
	<option value="">ALL</option>
	<?php
	for ($i = 10; $i <= 12; $i++) {
	print "<option value=\"$i\">Software1 Version $i</option>\n";
	}
	?>
	</select>

	<label for="software2">Software2 Ver:</label>
	<select name="software2" id="software2" style="width:200px;">
	<option value="">ALL</option>
	<?php
	for ($i = 12; $i <= 14; $i++) {
	print "<option value=\"$i\">Software2 Version $i</option>\n";
	}
	?>
	</select>

	<label for="software3">Software3 Ver:</label>
	<select name="software3" id="software3" style="width:200px;">
	<option value="">ALL</option>
	<?php
	for ($i = 4; $i <= 6; $i++) {
	print "<option value=\"$i\">Software3 Version $i</option>\n";
	}
	?>
	</select>

	<label for="">Refresh Interval:</label>
	<div class="input-append">
	<input type="text" name="refresh" id="refresh" class="input-small"/>
	<span class="add-on">Secs</span>
	</div>


	<label for="">Look Back:</label>
	<div class="input-append">
	<input type="text" name="lookback" id="lookback" class="input-small"/>
	<span class="add-on">Hours</span>
	</div>

	<input type="submit" value="submit" class="btn btn-primary" />

	</form>
	</div>
	<div class="collapser-container">
	<div class="collapser">
	<div class="collapse-dot"></div>
	<div class="collapse-dot"></div>
	<div class="collapse-dot"></div>
	</div>
	</div>
	</div>
	<div class="dashboardMain">

	<!-- <table><tbody>
	<tr>
	<td><div id="chart_div"></div></td>
	<td><div id="chart1_div" ></div></td>
	</tr>
	<tr>
	<td><div id="chart2_div" ></div></td>
	<td><div id="chart3_div" ></div></td>
	</tr>
	<tr>
	<td><div id="chart4_div" ></div></td>
	<td><div id="chart5_div" ></div></td>
	</tr>
	</tr></tbody></table> -->
	<div class="chart-ctnr" id="chart_div"></div>
	<div class="chart-ctnr" id="chart1_div" ></div>
	<div class="chart-ctnr" id="chart2_div" ></div>
	<!-- <div class="chart-ctnr" id="chart3_div" ></div>
	<div class="chart-ctnr" id="chart4_div" ></div>
	<div class="chart-ctnr" id="chart5_div" ></div> -->
	</div>
	</body>
	</html>