DSD - System Usage Compare multiple series

DSD - System Usage - Compare multiple series

by Dumine Stefan Daniel

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<br>
<br>
<button id="button">===== Add CPU and RAM to Graph =====</button>

<br>
<br>
<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 </span> </td>
                            <td><span style="color: green;"> 62.91 </span></td>
     ...

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
           
        },
        title: {
      text: 'System Usage',
      x: -20 //center
    }, 
       
        navigator: {
            enabled: true      
        },
        xAxis: {
      title: {
        text: 'Time (s)'
      },
      categories: []
    },
        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
    },
       

        plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert(this.y);
                    }
                }
            }
        }
    },
        
         series: [{
        name: 'CPU',
        type: 'spline',
        yAxis: 0,
        data: [],
        tooltip: {
            valueSuffix: ' %'
        }

    }, {
        name: 'RAM',
        type: 'spline',
        yAxis:...