<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<script type="text/javascript" src="arquivos/jquery-1.js"></script>
<script src="arquivos/jqchart.js" type="text/javascript"></script>
<script type="text/javascript" lang="javascript">
var _data = [];
var _data1 = [];
var yValue = 20;
var yValue1 = 10;
var i;
for (i = 0; i < 40; i++) {
yValue += Math.round(Math.random() * 20 - 10);
_data.push([i, yValue]);
yValue1 += Math.round(Math.random() * 20 - 10);
_data1.push([i, yValue1]);
}
$(document).ready(function () {
$('#usageResources2').jqChart({
width : '100%',
height: '250px',
title: { text: '' },
border: {
strokeStyle: 'red', // border line color
lineWidth: 0, // border line width
lineCap: 'butt', // butt | round | square
lineJoin: 'miter', // round | bevel | miter
miterLimit: 0,
cornerRadius: 0, // border corner radius
padding: 0 // border padding
},
legend:
{
title: 'Legenda',
customItems: [
{
text: 'Memória',
marker: { /*visible: false,*/ fillStyle: 'green' }
},
{
text: { text: 'Processador'/*, fillStyle: 'blue'*/ },
marker: { fillStyle: 'blue' }
}
]
},
series: [
{
type: 'line',
data: _data,
markers: null,
strokeStyle: 'green'
},
{
type: 'line',
data: _data1,
markers: null,
strokeStyle: 'blue'
}
]
});
updateChart();
});
function updateChart() {
yValue += Math.round(Math.random() * 20 - 10);
yValue1 += Math.round(Math.random() * 20 - 10);
// remove the first element
_data.splice(0, 1);
// add a new element
_data.push([i++, yValue]);
_data1.splice(0, 1);
// add a new element
_data1.push([i++, yValue1]);
$('#usageResources2').jqChart('update');
setTimeout("updateChart()", 500);
}
$(document).ready(function () {
$('#usageResources').jqChart({
border: { strokeStyle: '#6ba851' },
axes: [
{
type: 'linear',
location: 'left',
minimum: 10,
maximum: 100,
interval: 10
}
],
legend: { location: 'bottom' },
series: [
{
title: 'Memória',
type: 'column',
data: [['', Math.floor((Math.random() * (100-1+1))+1)], ['', '']]
},
{
title: 'Processador',
type: 'column',
data: [['', ''], ['Memória', Math.floor((Math.random() * (100-1+1))+1)] ]
}
]
});
chart1Update();
});
function chart1Update()
{
// get current series
var series_ = $('#usageResources').jqChart('option', 'series');
// get the data from the first series
var data_ = series_[0].data;
data_[1] = Math.floor((Math.random() * (100-0+1))+0);
// update (redraw) the chart
$('#usageResources').jqChart('update');
setTimeout( 'chart1Update()', 3000 );
}
</script>
</head>
<body>
<div style="position: relative; height: 250px;" class="ui-jqchart" id="usageResources"></div>
<div style="position: relative; width: 100%; height: 250px;" class="ui-jqchart" id="usageResources2"></div>
</body>
</html>