Simple Charts I: Graphing A Single Metric On A Single Element Over A Period Of Time

ALL of the content, custom resources, and general know how, came from the mind and hands of

jnathlich12

I am simply sharing his work with Thwack Nation. (With his approval, of course)

This set of documents will break down the different parts of the resource, and explain (to the best of my abilities) what each piece is, and how each piece works. Now, am I qualified to teach this stuff to anyone? Nope, not in the least. Hmm... Then why am I spending so much time trying? Well, I reckon I needed to know how to do it for my environment, another person was kind enough to walk me through it, and if anyone else needs this, or something similar, this will, hopefully, provide them a smoother path to their results... On the other hand, if nobody else ever needs this information, then please, feel free to call me a cotton-headed ninny-muggins all day long... nobody will think any less of you for doing so...

The Example

The attached custom resource file, once loaded into your SolarWinds environment, will graph the memory usage of a node. Nothing fancy. Nothing outrageously difficult. No need to be a rocket surgeon or anything. Just a simple example to get us started. We will be collecting a single metric (Average Percent Memory Used), for a single device, over a short time range.

If you have not yet read through part 1, "The Query: Retrieving, Formatting, And Storing The Data ", you may want to start there before you proceed down this page... Or, maybe you don't give a care, and you're just gonna do whatever you want... Either way works for me. Whatever cranks your cheese wheel.

Combining the content from the query, along with the content on this page, should allow us to create our first custom graph. If all goes well, we should see something similar to the following screenshot.

The Code

Now that we have created, and tested, our query, and verified it is returning the specific data we are wanting to see, we need to build the graph. The following code would be added directly after the code from part 1. (The attachment on this document, and the attachment on part 1/the query, are the same documents.)

//This line of code calls our highcharts into action. ** You will need to adjust this path to point to the location of your highcharts folder **
<script src="/Orion/js/Highcharts-5.0.9/code/highcharts.js"></script>
<script type="text/javascript">
$.ajax({
  async: true,
  url: '/Orion/OrionImprovement/JSON/Mem24Data.txt',//This line directs our highcharts to view/process the data at this location/file ** You will need to adjust this path to point to the location of your JSON file **
  type: 'GET',
  cache: false,
  dataype: 'json',
  success: function (data) 
  {
  //Create data object from input file.  Object is a JSON construct, so not an array or anything useful yet.
  //Orion appends a footer to http://.../GraphData.js so cut it off by stopping when we hit the '/' character.
  var sqlobject = "";
  $.each(data, function(key, value)
  {
  if (value === "/") {return false;}
  sqlobject = sqlobject.concat(value);
  })
  //console.log(sqlobject);
  var book = JSON.parse(sqlobject);
  timearray = [];
  for (var page in book)
  {
  var datapoint = [];
  var onepage = book[page];
  var words = Object.keys(onepage);
  var datetime = Date.UTC( onepage[words[0]],
  onepage[words[1]] - 1,
  onepage[words[2]],
  onepage[words[3]],
  onepage[words[4]],
  onepage[words[5]]);
  datapoint[0] = datetime;
  datapoint[1] = onepage[words[6]];
  //console.log(datapoint);
  timearray.push(datapoint);
  }
  console.log(timearray);
  //x-axis categories gets nodename because graphs with no categories are squished to the middle third of the graph.
  //highcharts 'series' requires an array in an object in an array. [{[]}].
  //Only one series, so we hardcode array, and send it an array of objects: nodeid and measure.
  //Highcharts parameters.
  //The following section defines the various settings of the highcharts graph we are building.
  //These are just a few of the basic settings. If you would like to implement more features, you can get more information at the highcharts webpage.
  Highcharts.chart('MemoryUseWindows24', 
  {
  chart: {type: 'area', //This tells highcharts we are making an "area" graph. We could change this to line, or various other types of charts.
  height: 150, //This is simply the height of the graph
  width: 1400}, //This is simply the width of the graph
  legend: {enabled: false}, //If you want to enable the legend for the graph, simply change this value to "true"
  plotOptions: {series: {marker: {symbol: 'circle', //There are several other options you can enable here, affecting how the graph displays the plotted data. 
  radius: 1
  }
  }
  },
  title: {text: null}, //If you would like a title, make your changes here.
  tooltip: {pointFormat: '<b>{point.y:,.0f}%</b> Memory Used'}, //This section will affect how the tooltip displays data when you hover the cursor over a plotted point in the graph
  xAxis: {type: 'datetime'},
  yAxis: {
  ceiling: 100,
  title: {
  text: 'Percent'
  }
  },
  series: [{data: timearray}]
  });
  }
});
</script>
<orion:resourceWrapper ID="ResourceWrapper" runat="server" ShowEditButton="false">
    <Content>
    <asp:DataGrid ID="grid" runat="server" />
  <asp:Label id="lblText" runat="server" />
  <div id="MemoryUseWindows24" style="height: 180px; margin: 0 auto"></div>
    </Content>
</orion:resourceWrapper>

For further, more specific, and in depth details on the inner workings of this code, please download jnathlich12's document, HERE. (This can be found in the attachments of the previous/main page, Custom Graphing: Fun With Highcharts)

Okay, But How Do We Make All Of This Work?

Now that we have all of our pieces built properly, and laid out in the correct order, we need to introduce our new custom resource to our SolarWinds environment.

While this step is mentioned in detail on the first/main page, I will simply list the general steps below.

1) Copy your new custom resource file to the appropriate folder on your main SolarWinds web server. (ex. /inetpub/SolarWinds/Orion/NetPerfMon/Resources/Misc/MemoryUseWindows24.ascx)

2) Delete the the resource cache file from your main SolarWinds web server. (ex. C:\ProgramData\Solarwinds\Orion\WebResourceCache.xml)

3) Recycle/Restart the SolarWinds Application Pool on your main SolarWinds web server.

4) Add your new resource to a page, the same way you would add any other resource.

Well, Did It Work?

If all has gone well, and you have made it this far, your work should now be complete. Or is it? Well, you have spent all this time building the resource... We should probably add it to the page and make sure it looks good!

Now that you have created your new custom highcharts resource, AND you have followed the steps above to add the resource to your SolarWinds environment, you just need to add the graph to the node details page.

So, what are we expecting to see? After you have added the resource to a node details page, every time that page is loaded, or refreshed, our custom resource should be running through the steps and updating, or rebuilding, our JSON data file, then updating the graph accordingly.

Here is a screenshot showing the newly created graph, added to the node details page.

Now that we have the basics out of the way, I plan on putting together a couple more documents showing how to build more advanced graphs. (screenshots shown on the main page)

I hope this information has been helpful.

Thanks for reading!

-Will