I am trying to the realtime chart as showcased here to work: http://www.jchartfx.com/demo/0eb8aea3-1aa6-e211-84a5-0019b9e6b500
I am not having much success as I get a JavaScript error as shown in the attached image.
I am using 10/24 release of jchartfx.
Here is the entire HTML content of my page.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/prettify/prettify.js"></script>
<script type="text/javascript" src="js/jchartfx/js/jchartfx.system.js"></script>
<script type="text/javascript" src="js/jchartfx/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="js/jchartfx/js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="js/jchartfx/js/jchartfx.animation.js"></script>
<link href="js/prettify/prettify.css" type="text/css" rel="stylesheet" />
<link href="js/prettify/sunburts.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet"type="text/css" href="js/jchartfx/styles/jchartfx.css">
<title>Host CPU Load</title>
<style type="text/css">
#cpuLoadId .Title {
font-size: 16px;
}
#cpuLoadId .Border
{
fill: #000000;
}
#cpuLoadId .Attribute0Line {
stroke: #00E402;
stroke-width: 2;
}
#cpuLoadId .AxisY_Text
{
fill: #02592F;
}
#cpuLoadId .AxisY_Major
{
stroke: #02592F;
}
#cpuLoadId .AxisX_Line
{
stroke-width: 0;
}
#cpuLoadId .AxisX_Major
{
stroke: #02592F;
}
#cpuLoadId .AxisX_Text
{
fill: transparent;
}
</style>
</head>
<body onload="prettyPrint()">
<div>
<div align="center"><div id="cpuLoadId" style="width: 500px; height: 400px; display: inline-block"></div></div>
<div id="logConsoleParentId" style="display: none;"><strong>Error Log Console:</strong>
<pre id="logConsoleId" class="prettyprint"></pre>
</div>
</div>
<script>
var getPassedInParameterValue = function(param){
var prmstr = window.location.search.substr(1);
var prmarr = prmstr.split("&");
for(var i = 0; i < prmarr.length; i++) {
var tmparr = prmarr.split("=");
if(param === tmparr[0]) return tmparr[1];
}
return '';
};
var hostId = getPassedInParameterValue('hostId');
if(hostId === '') hostId = -1;
var sessionUUID = getPassedInParameterValue('sessionUUID');
var hostName = getPassedInParameterValue('host');
var pHeight = getPassedInParameterValue('height');
var pWidth = getPassedInParameterValue('width');
var requestId = 0;
var hasError = false;
var timerId = 0;
var chart1;
if(pHeight !== '' && pWidth !== ''){
if(pWidth != 0){
pWidth = pWidth > 100 ? pWidth - 50 : 100;
pHeight = ((pWidth * 3)/4);
} else {
pHeight = pHeight > 100 ? pHeight - 50 : 100;
pWidth = ((pHeight * 4)/3);
}
var chartElement = document.getElementById("cpuLoadId");
chartElement.style.height = pHeight + "px";
chartElement.style.width = pWidth + "px";
}
var cpuLoad = function () {
chart1 = new cfx.Chart();
chart1.getAnimations().getLoad().setEnabled(true);
chart1.getData().setSeries(1);
chart1.getData().setPoints(181);
chart1.getAxisY().getLabelsFormat().setDecimals(1);
chart1.getAxisY().setMin(0);
chart1.getAxisY().setMax(100);
chart1.getAxisX().getGrids().getMajor().setTickMark(cfx.TickMark.None);
chart1.getAxisX().getGrids().getMinor().setTickMark(cfx.TickMark.None);
chart1.getAxisX().getGrids().getMajor().setVisible(true);
var realTime = chart1.getRealTime();
realTime.getLoopMarker().setColor("#00E402");
realTime.setBufferSize(181);
realTime.setMode(cfx.RealTimeMode.Loop);
chart1.setGallery(cfx.Gallery.Lines);
chart1.getAllSeries().setMarkerShape(cfx.MarkerShape.None);
chart1.getLegendBox().setVisible(false);
offset = 2.15;
nTick = 0;
forceR = false;
var divHolder = document.getElementById('cpuLoadId');
chart1.create(divHolder);
}
var updateChart = function(value){
chart1.getRealTime().beginAddData(1, cfx.RealTimeAction.Append);
chart1.getData().setItem(0, 0, value);
chart1.getRealTime().endAddData(true, false);
};
var logError = function(message){
hasError = true;
$("#logConsoleId").html(message);
$("#logConsoleParentId").show();
};
var clearLogs = function(){
if(hasError){
hasError = false;
$("#logConsoleParentId").hide();
}
};
var getWindowsCPUUsage = function(){
$.ajax({
type: "POST",
url: "/json/rpc",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({method:"service.getWindowsCPUUsage", params: [hostId], id:requestId++}),
success: function(responseData) {
if(responseData.result.success){
var numb = responseData.result.payload.cpuLoad;
numb = numb.toFixed(2);
updateChart(numb);
clearLogs();
} else {
logError(responseData.result.message);
}
},
error: function (xhr, textStatus, errorThrown) {
logError(xhr.responseText);
}
});
};
var getHostId = function(){
$.ajax({
type: "POST",
url: "/json/rpc",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({method:"service.getHostIdByHostName", params: [hostName], id:requestId++}),
success: function(responseData) {
if(responseData.result.success){
hostId = responseData.result.payload;
getWindowsCPUUsage();
} else {
logError(responseData.result.message);
clearInterval(timerId);
}
},
error: function (xhr, textStatus, errorThrown) {
logError(xhr.responseText);
}
});
};
$(function() {
if(hostName === ''){
logError('Host Name not provided and is required!');
} else {
cpuLoad();
timerId = setInterval(function() {
if($("#cpuLoadId").is(':visible')){
if(hostId === -1) getHostId();
else getWindowsCPUUsage();
}
}, 15000);
getHostId();
}
});
</script>
</body>
</html>
