Real-time Graphing

One of the newest features of NCPA is real-time graphing. Real-time graphs are available for certain generic system metrics. These graphs show live data on a per second basis using D3.js and websockets. This means that in order to use them, you will need a browser that supports websockets. Most modern browsers, besides Safari, support websockets in their latest versions.

You can currently use the graphing module with the following API nodes: cpu, interface, memory, and disk. In future versions, we will likely add more API endpoints as we create ways to manage how the graphing module tells the backend to graph.

The easiest way to start using the graphing module is to click the Graphs tab in the GUI and select an API endpoint to graph. You should see a real-time graph appear and then follow the directions below.

Embedding Graphs

In NCPA 2 you can embed graphs in your own pages. In order to do so, you'll need to add a few libraries to your page, create a graph URL, and embed it in your HTML.

Adding the JS and CSS Includes

You need any version of jQuery and you also need both smoothie.js and d3.v4.min.js to your page. Typically you add these to the head section of your HTML. Be sure to change localhost:5693 to your defined NCPA hostname and port. Using the ones provided will ensure up-to-date versions when upgrading.

<script type="text/javascript" src="https://localhost:5693/static/js/jquery.2.2.4.min.js"></script>
<script type="text/javascript" src="https://localhost:5693/static/js/smoothie.js"></script>
<script type="text/javascript" src="https://localhost:5693/static/js/d3.v4.min.js"></script>

If you are planning on using the basic styling that we use inside NCPA's GUI, you can also add the CSS included.

<link type="text/css" href="https://localhost:5693/static/css/ncpa-graph.css" rel="stylesheet">

Creating the Graph Module URL

You can do this from the Graphs tab in the GUI or you can make the URL manually. Create the URL like the example below. Make sure to add your token in to the call or your call will be denied.

https://localhost:5693/graph/<api endpoint>?token=mytoken

Example

An example of the HTML of a simple page using the embedded graphing. Again, replace localhost:5693 with your NCPA hostname and port.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Embedded Graph</title>
    <link type="text/css" href="https://localhost:5693/static/css/ncpa-graph.css" rel="stylesheet">
    <script type="text/javascript" src="https://localhost:5693/static/js/jquery.2.2.4.min.js"></script>
    <script type="text/javascript" src="https://localhost:5693/static/js/smoothie.js"></script>
    <script type="text/javascript" src="https://localhost:5693/static/js/d3.v4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() { $('.graph').load('https://localhost:5693/graph/cpu/percent?token=mytoken'); });
    </script>
</head>
<body>
    <div class="graph" style="width: 600px; margin: 10% auto;"></div>
</body>
</html>