Jump to content
JChartFX Community
  • 0

Help with realtime chart

spectdev

Asked by spectdev,

 Share

Question

spectdev Newbie

spectdev

Posted
Posted

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>

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to question listing
×
×
  • Create New...