CPU Usage Chart Part 1

July 17th, 2015

My website's hosting server is a virtual private server deployed on Digital Ocean’s cloud. Digital Ocean has a feature for its users to be able to view their server’s CPU usage on a graph. When I first booted up a Digital Ocean server I tried a few things to get this chart to show some activity. The servers I run use the Linux operating system Ubuntu but Ubuntu by itself has a baseline CPU usage somewhere close to 0%. After I uploaded a few old Java programs that had to do some decent calculations I was finally able to move the CPU usage around a little.

More recently I decided to try and recreate a simpler version of this chart on my website. This involves calculating the CPU usage every 5 seconds on the server, passing the data to a place viewable by my website, and then interpreting the data into a graph.


Above is the CPU chart so far. To see the information update you will have to refresh your browser. Most likely it will be reporting a CPU usage of between 3 and 6 percent on this server’s single core over the last 10 minutes.

After a little experimentation I went with Google Charts for the line graph. It seemed to be the most heavy duty and flexible of the free widgets available. It’s loaded in browser and powered by some JavaScript which can be found at the end of this blog. The JavaScript sources its data from a .txt file that is web accessible here. The format used is a JavaScript object array so that it can be easily read by the JavaScript powering the chart. Each object is surrounded by brackets and has two variables.


{"time":1438818867353, "percent":6.63}


The time is represented by a large integer which basically means that many milliseconds have passed since January 1st, 1970. This is by far the easiest way to represent time and pass it through JavaScript but requires more calculation by the browser rendering the webpage. Other options for timestamps look something along the lines of “2011-12-03T10:15:30+01:00” but are more difficult to work with.

Continue here for an explanation on how the data for this chart is generated by the Linux server.



                var xmlhttp = new XMLHttpRequest();
                var url = "http://farristate.com/WebsiteChart/myTutorials.txt";
                var overallArr;
                var timeArr = [];
                
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        var myArr = JSON.parse(xmlhttp.responseText);
                        overallArr = myArr;
                        var p;
                        for(p = 0; p < myArr.length; p++) {
                            var tempDate = new Date(overallArr[p].time);
                            timeArr[p] = tempDate;
                        }
                    }
                }
                xmlhttp.open("GET", url, true);
                xmlhttp.send();
                
                google.load('visualization', '1', {packages: ['corechart', 'line']});
                google.setOnLoadCallback(drawBasic);

                function drawBasic() {

                      var data = new google.visualization.DataTable();
                      data.addColumn('datetime', 'X');
                      data.addColumn('number', 'CPU 1');
                      
                      var t;
                      for(t = 0; t < timeArr.length; t++) {
                          data.addRows([
                            [timeArr[t], overallArr[t].percent]
                          ]);
                      }

                      var options = {
                        hAxis: {
                          title: 'Time'
                        },
                        vAxis: {
                          title: '%CPU Usage'
                        },
                        'width':1000,
                        'height':400
                      };

                      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

                      chart.draw(data, options);
                
                }