Jump to content
JChartFX Community

spectdev

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by spectdev

  1. Help with realtime chart

    in General Questions

    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>

×
×
  • Create New...