spectdev Posted November 22, 2013 Report Share Posted November 22, 2013 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> Quote Link to comment Share on other sites More sharing options...
Question
spectdev
I am using 10/24 release of jchartfx.
Link to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.