2014-12-04 16:52:17 +00:00
< html >
< head >
2014-12-04 23:39:19 +00:00
<!-- Connect to the database -->
< ? php
// Database login details
$DB_NAME = 'cl51-openminds' ;
$DB_HOST = 'localhost' ;
$DB_USER = 'cl51-openminds' ;
$DB_PASS = 'hashtag' ;
// Connect to database server
$mysqli = new mysqli ( $DB_HOST , $DB_USER , $DB_PASS , $DB_NAME );
if ( $mysqli -> connect_errno ) {
printf ( " Connect failed: %s \n " , $mysqli -> connect_error );
exit ();
}
$i = 0 ;
2014-12-05 00:56:52 +00:00
$hostType = array ();
2014-12-04 23:39:19 +00:00
// Sets sql charset to utf-8
$mysqli -> set_charset ( " utf8 " );
2014-12-05 00:56:52 +00:00
$result = mysqli_query ( $mysqli , 'SELECT COUNT(HostType) AS "Num" FROM serverlist GROUP BY HostType;' );
2014-12-05 00:39:17 +00:00
while ( $row = mysqli_fetch_row ( $result )){
// puts the value for COUNT(HostType) into $num{i}, so $num0, $num1, $num2, etc.
2014-12-05 00:56:52 +00:00
$hostType [ $i ] = $row [ 0 ];
2014-12-05 00:39:17 +00:00
$i = $i + 1 ;
}
2014-12-04 23:39:19 +00:00
?>
2014-12-04 16:52:17 +00:00
<!-- Load the AJAX API -->
< script type = " text/javascript " src = " https://www.google.com/jsapi " ></ script >
< script type = " text/javascript " >
// Load the Visualization API and the piechart package.
2014-12-05 00:39:17 +00:00
google . load ( 'visualization' , '1.0' , { 'packages' : [ 'corechart' ]});
2014-12-04 16:52:17 +00:00
// Set a callback to run when the Google Visualization API is loaded.
google . setOnLoadCallback ( drawChart );
2014-12-05 00:56:52 +00:00
2014-12-04 16:52:17 +00:00
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart () {
2014-12-05 00:56:52 +00:00
// Create the data table.
var data = new google . visualization . DataTable ();
data . addColumn ( 'string' , 'hostType' );
data . addColumn ( 'number' , 'hostTypeCount' );
data . addRows ([
[ 'CIT' , < ? php echo $hostType [ 0 ]; ?> ],
[ 'DEV' , < ? php echo $hostType [ 1 ]; ?> ],
[ 'DR' , < ? php echo $hostType [ 2 ]; ?> ],
[ 'OAT' , < ? php echo $hostType [ 3 ]; ?> ],
[ 'PROD' , < ? php echo $hostType [ 4 ]; ?> ],
[ 'SIT' , < ? php echo $hostType [ 5 ]; ?> ],
[ 'UAT' , < ? php echo $hostType [ 6 ]; ?> ],
2014-12-05 01:14:38 +00:00
[ 'UNCLASSIFIED' , < ? php echo $hostType [ 7 ]; ?> ]
2014-12-05 00:56:52 +00:00
]);
2014-12-05 01:14:38 +00:00
2014-12-05 00:56:52 +00:00
// Set chart options
var options = { 'title' : 'Types of Servers' ,
'width' : 400 ,
'height' : 300 };
2014-12-04 16:52:17 +00:00
2014-12-05 00:56:52 +00:00
// Instantiate and draw our chart, passing in some options.
var pie_chart = new google . visualization . PieChart ( document . getElementById ( 'pie_chart' ));
var bar_chart = new google . visualization . BarChart ( document . getElementById ( 'bar_chart' ));
2014-12-05 01:14:38 +00:00
// The select handler. Call the chart's getSelection() method
function selectHandler () {
var selectedItem = pie_chart . getSelection ()[ 0 ];
if ( selectedItem ) {
var hostType = data . getValue ( selectedItem . row , 1 );
var hostTypeNum = data . getValue ( selectedItem . row , 0 );
alert ( 'There are ' + hostType + ' machines running as ' + hostTypeNum );
}
}
// Listen for the 'select' event, and call my function selectHandler() when
// the user selects something on the chart.
google . visualization . events . addListener ( pie_chart , 'select' , selectHandler );
2014-12-04 16:52:17 +00:00
2014-12-05 00:56:52 +00:00
pie_chart . draw ( data , options );
bar_chart . draw ( data , options );
2014-12-04 16:52:17 +00:00
}
</ script >
</ head >
< body >
<!-- Div that will hold the pie chart -->
< div id = " pie_chart " style = " display: inline; float: left; " ></ div >
<!-- Div that will hold the bar chart -->
< div id = " bar_chart " style = " display: inline; float: left; " ></ div >
</ body >
</ html >
