JSFiddle - React, Tailwind, and code Playground

Graph

by Dumine Stefan Daniel

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<br><br>
<button id="button">===== Add CPU and RAM to Graph =====</button>
<br><br>
<div class="time_class" value="['00:00:01', '00:00:02', '00:00:03']"></div>
<div class="cpu_class" value="[53.98, 13.98, 93.22]"></div>
<div class="ram_class" value="[21.12, 33.33, 80.00]"></div>
<b>Arrays</b>
<br> <br> 
TIME:<p id="TIME"></p> 
CPU: <p id="CPU"></p>
RAM: <p id="RAM"></p>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {},
    title: {
      text: 'System Usage',
      x: -20 //center
    },
    xAxis: {
      title: {
        text: 'Time (s)'
      },
      categories: []
    },
    yAxis: {
      title: {
        text: 'Usage (%)'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      valueSuffix: '%'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
      name: 'CPU',
      data: []
    }, {
      name: 'RAM',
      data: []
    }]
  });
  
  $('#button').click(function() {
    var chart = $('#container').highcharts();
    var time_ = $('.time_class').attr('value');
    var cpu_ = $('.cpu_class').attr('value');
    var ram_ = $('.ram_class').attr('value');
    document.getElementById("TIME").innerHTML = time_;
    document.getElementById("CPU").innerHTML = cpu_;
    document.getElementById("RAM").innerHTML = ram_;
    chart.series[1].setData(eval(ram_), false, true);
    chart.series[0].setData(eval(cpu_), false, true);
    chart.xAxis[0].setCategories(eval(time_), true, true);
  });
});