DSD - System Usage MultipleAxes

DSD - System Usage MultipleAxes

by Dumine Stefan Daniel

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container" style="height: 400px"></div>
<br>
<br>
<button id="button">===== Add CPU and RAM to Graph =====</button>
<br>
<br>

<table class="table_perf table-hover" style="width: 40%">
                <thead>
                  <tr>
                    <th style="color: black; font-weight: bold;">Time(hh:mm:ss)</th>
                    <th style="color: black; font-weight: bold;">CPU (%)</th>
                    <th style="color: black; font-weight: bold;">RAM (%)</th>
                  </tr>
                </thead>
                <tbody>
                
                          <tr>
                            <td><span style="color: black"> 00:00:01 </span></td>
                            <td><span style="color: green;"> 53.98 </span> </td>
                            <td><span style="color: green;"> 63.18 </span></td>
                          </tr>
            
                          <tr>
                            <td><span style="color: black"> 00:00:06 </span></td>
                            <td><span style="color: green;"> 13.37 </span> </td>
                            <td><span style="color: green;"> 63.17 </span></td>
                          </tr>
            
                          <tr>
                            <td><span style="color: black"> 00:00:11 </span></td>
                            <td><span style="color: green;"> 11.81 </span> </td>
                            <td><span style="color: green;"> 63.11 </span></td>
                          </tr>
            
                          <tr>
                             <td><span style="color: black">  00:00:16 </span></td>
                            <td><span style="color: green;"> 11.84...

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {},
    title: {
      text: 'System Usage',
      x: -20 //center
    },
    xAxis: {
      title: {
        text: 'Time'
      },
      categories: []
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert(this.y);
                    }
                }
            }
        }
    },
    yAxis: [{ // Primary yAxis
                    min: 0, max: 100, tickInterval: 10,
                    title: {

                        text: 'Usage (%)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                {// Secondary yAxis
                    title: {
                        text: 'Memmory',
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    labels: {
                        format: '{value} Mb',
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    opposite: true
                }],
                tooltip: {
                    valueSuffix: '%',
                    shared: true
                },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
        name: 'CPU',
        type: 'spline',
        yAxis: 0,
        data: [],
        tooltip: {
            valueSuffix: ' %'
        }

    }, {
        name: 'RAM',
        type: 'spline',
        yAxis: 1,
        data: [],
        tooltip: {
            valueSuffix: ' Mb'
        }
    }]
  });

  var time_ = "[";
  var cpu_= "["; 
  var ram_=...