Hello, I can't seem to get any of the options for my charts as far as
stylization to work. I'm trying a few different things like putting the
legend on the bottom and making haxis labels horizontal but no luck.
<!DOCTYPE HTML>
<html>
<head>
<title>TheWayWardJourney</title>
<script src="http://.com/cynergi.js";></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css";>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css";
>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js";
></script>
<script src="js/cookie.js"></script>
<script>
$(document).ready(function() {
$("#computer_info").html(html_insert);
$("#computer_stats").html(stats);
$("#profile_data").html(profile_data_html);
});
var username = '';
var first_name = '';
var last_name = '';
var profile_data_html = '';
var logged = '';
var cookie_token = cookie.get('token');
var user_data = Cynergi.get(':3000/user?token=eq.' + cookie_token);
$.each(user_data, function(i, item) {
username = item.username;
first_name = item.first_name;
last_name = item.last_name;
});
profile_data_html = username + '<br>' + first_name + '<br>' + last_name;
//if there is userdata then there is a valid login token for the user.
if (user_data != ''){
function updateData(callback) {
// this is retrieving rows from the db and looping through
them.
var data = Cynergi.get(':3000/computer_stats?order=time.asc');
var data_array = []
var data_arrayMem = []
var net_array = []
$.each(data, function(i, item) {
html_insert = 'Computer Name:' + item.computer_name +
'<br>Operating
System:' + item.operating_system + '<br>CPU Model: ' + item.cpu_model +
'<br>Cores
Assigned: ' + item.cores + '<br>CPU MHz: ' + item.cpu_mhz + '<br>CPU Cache:
' + item.cpu_cache + '<br>Net Devices: ' + item.net_devices + '<br>Devices:
' + item.devices;
stats = 'Total Memory: ' + item.total_memory + '<br>Free
Memory:' + item.free_memory + '<br> Active Memory:' + item.active_memory +
'<br>
Bounce Memory:' + item.bounce_memory + '<br> Buffered Memory:' +
item.buffers_memory
+ '<br> Locked Memory:' + item.locked_memory + '<br> Swap Memory:' +
item.swap_memory
+ '<br> Swap Free:' + item.swapfree_memory
var time = item.time;
data_array.push([
{v: time.toString()},
{v: parseInt(item.cpu_usage)},
{v: parseInt(((item.total_memory-item.free_memory) /
item.total_memory)*100)}
]);
net_array.push([
{v: time.toString()},
{v: parseInt(item.net_devices.split("-")[0])},
{v: parseInt(item.net_devices.split("-")[1])}
]);
});
callback(data_array,net_array);
$("#computer_info").html(html_insert);
$("#computer_stats").html(stats);
}
(function() {
google.load('visualization', '1.1', { packages: ['line',
'corechart'] });
google.setOnLoadCallback(chartsLoaded);
var loadTracker = {
charts: false,
data: null
};
function maybeRenderChart() {
if (loadTracker.charts && loadTracker.data) {
drawChart(loadTracker.data[0], loadTracker.data[1])
}
}
function dataLoaded(data_array, net_array) {
loadTracker.data = [data_array, net_array];
maybeRenderChart()
}
function chartsLoaded() {
loadTracker.charts = true;
maybeRenderChart();
}
var chart1 = null;
var chart2 = null;
updateData(dataLoaded);
function drawChart(data_array, net_array) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'CPU Usage');
data.addColumn('number', 'Mem Usage');
data.addRows(data_array);
var options = {
chart: {title: "Playground's CPU/MEM Usage",subtitle: 'you
know you likie.'},
legend: { position: 'bottom' },
lineWidth: 5,
width: 500,
hAxis: {slantedText: true, slantedTextAngle: 90},
height: 300
};
var chart = chart1 = chart1 || new google.charts.Line(
document.getElementById('chart'));
chart.draw(data, options);
// past here is the second chart this will be added to the
library later
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time');
data.addColumn('number', 'Net TX');
data.addColumn('number', 'NET Rcv');
data.addRows(net_array);
var options = {
chart: { title: "Playground's Net Usage", subtitle: 'you
know you likie.'},
legend: { position: 'bottom' },
width: 500,
height: 300
};
var chart = chart2 = chart2 || new google.charts.Line(
document.getElementById('chartNet'));
chart.draw(data, options);
// Update the data and then draw the chart in 3 seconds.
setTimeout(function() { updateData(drawChart); }, 5000);
}})();
}
function logout(){
console.log('logout');
document.cookie = "token=0";
console.log(cookie.get('token'));
goHome();
}
function goHome() {
window.location="index.html"; // change url to your's
}
</script>
<style>
#topmid{
color:white;
}
html,body {
background: url(background.jpg) no-repeat center
center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
</style>
</head>
<body style="background-color: #2c3e50;">
<div class="row">
<div id="profile_data" style="color:white;" class="col-md-2"></div>
</div>
<div class="row" style="margin-top:50px;margin-left:50px;margin-right:50px;"
>
<div id="topmid" class="col-md-2"><p style='text-align:left;align:left;'
id='computer_info'></p></div>
<div id="topmid" class="col-md-2"><p style='text-align:left;align:left;'
id='computer_stats'></p></div>
<div id="chart" class="col-md-4"></div>
<div id="chartNet"class="col-md-4"><div ></div>
</div>
<p style='text-align:left;align:left;' id='updateStatus'></p>
<p style='text-align:left;align:left;' id='sentStatus'></p>
<p style='text-align:left;align:left;' id='deleteStatus'></p>
<p style='text-align:left;align:left;' id='messages'></p>
<button onClick="logout();" type='submit'> logout</button>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.
