Viewing File: /usr/local/cpanel/base/jqplot/dist/examples/help.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Test</title>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<!-- BEGIN: load jquery -->
<script language="javascript" type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
<script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<!-- END: load jqplot -->
<script type="text/javascript" language="javascript">
$(document).ready(function(){
// Supose this is what you get back from your ajax call
var response = [{"Name":"CPU Usage","Frequency":[39,30,30,25,31,48,57,34,37,36,57,24],"XAxis":["2010-01-08 14:49:28","2010-01-08 14:54:28","2010-01-08 14:59:28","2010-01-08 15:04:28","2010-01-08 15:09:28","2010-01-08 15:14:28","2010-01-08 15:19:28","2010-01-08 15:24:28","2010-01-08 15:29:28","2010-01-08 15:34:28","2010-01-08 15:39:28","2010-01-08 15:44:28"]},{"Name":"RAM Usage","Frequency":[20,20,20,20,20,20,20,21,21,22,20,20],"XAxis":["2010-01-08 14:49:28","2010-01-08 14:54:28","2010-01-08 14:59:28","2010-01-08 15:04:28","2010-01-08 15:09:28","2010-01-08 15:14:28","2010-01-08 15:19:28","2010-01-08 15:24:28","2010-01-08 15:29:28","2010-01-08 15:34:28","2010-01-08 15:39:28","2010-01-08 15:44:28"]}];
var dataLines = []; // initialize the array of lines.
var labels = []; // initialize array of line labels.
var current, i, j; // some variables we'll need.
for (i in response) {
dataLines.push([]); // add an empty line.
current = response[i];
labels.push(current.Name);
for (j in current.XAxis) {
dataLines[i].push([current.XAxis[j], current.Frequency[j]]);
}
}
var options = {
legend: { show: true },
title: 'Hosted Service H/W Usage',
series: [{ label: labels[0] }, { label: labels[1]}],
axesDefaults: {
pad: 1.2,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30,
enableFontSupport: true,
//fontFamily: 'Georgia',
fontSize: '9pt'
}
},
seriesDefaults: { showMarker:true , trendline: { show: false }, lineWidth: 2 },
axes: {
yaxis: {autoscale: true, label: '%[Percentage]', labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
xaxis: {label: 'Date[5 min intervals]', tickInterval:'5 minutes', tickOptions:{formatString:'%H:%M:%S'}, renderer: $.jqplot.DateAxisRenderer}
},
highlighter: {
sizeAdjust: 9,
tooltipLocation: 'n',
tooltipAxes: 'y',
tooltipFormatString: '<b><i><span style="color:red;">Spec:</span></i></b> %.2f',
useAxesFormatters: false
}
};
var plot1 = $.jqplot('HistoricChart', dataLines, options);
});
</script>
</head>
<body>
<?php include "nav.inc"; ?>
<div id="HistoricChart" style="margin-top:20px; margin-left:20px; width:600px; height:400px;"></div>
</body>
</html>
Back to Directory
File Manager