Creating Charts/Graphs with Powershell for Slack–Pt2

Continued from Creating Charts/Graphs with Powershell for Slack – Pt1.

Generate a graph/chart

So, this was an adventure that went down a wild number of paths. What I needed was a program that could run from powershell and generate a graph in .png/.svg format. The image would be used later to send a message in slack.

Skip down below to chartjs/canvas for a solution.

Initially I wanted to be able to build a graph using powershell, so I searched the https://www.powershellgallery.com/ and github for what they had under 'chart’ or ‘graph’. Here’s some of the ones I tried and I why I didn’t settle on them:

• Using System.Windows.Forms.DataVisualization
  (https://learn-powershell.net/2016/09/18/building-a-chart-using-powershell-and-chart-controls/)
  
  I really wanted to find a solution that had this all figured out and wrapped up into an easy to use module.
  
• Log2chart (https://github.com/buscseik/log2chart/)
  
  ”html based graphs” … nope. I needed an image output.
  
• SvgChart (https://github.com/nicholasdille/PowerShell-SvgChart)
  
  I never actually got this to work. I used the example (slimmed down a bit) but could never get it to generate a chart.
  
• SeeShell (https://github.com/beefarino/seeshell)
  
  So, this had one of the coolest demos I’ve ever seen! It can take continuous input from a source (like processer utilization) and generate a live graph. Really Cool!
  
  BUT … I couldn’t figure out how to output in an image format.
  
  
  
• OxyPlotCli (https://github.com/horker/oxyplotcli)
  
  This was easy to setup and easy to create a graph, but I could not figure out how to force the Y axis to go from 0 to 100. Since one of the graphs I was making was a CPU graph I needed to have the traditional min/max values displayed.
  
• PSGraph (https://github.com/KevinMarquette/PSGraph)
  
  The very beginning of their description used the words graph, edge, and node which made me think it was a utility for better understanding networks (and not bar charts/line charts). A few people I work with suggested taking another look at this and I might do that again.
  

At this point, I changed directions and started looking for regular .NET or nuget packages which could do graphing. This also resulted in a dead end, usually because of price.

• Live Charts (https://lvcharts.net/)
  
  I didn’t see a way to generate an image.
  
• Highcharts .NET (https://www.highcharts.com/blog/products/dotnet/)
  
  This one came up a lot on stackoverflow answers and blog posts. I think it’s really good and the price tag shows that the developers believe that too.
  
• DotNetCharting (https://www.dotnetcharting.com/)
  
  I think this could do the job, but it also costs money.
  
• OxyPlot (http://www.oxyplot.org/)
  
  I don’t think I spent as much time on this as I should have. I was still a little sore at OxyPlotCli making it seem like it was impossible to force the setting of the X axis from 0 to 100. When working with the powershell version I used the OxyPlot source code to check if I could set the Y axis min/max values using reflection, but the X axis is always recalculated dynamically on line graphs. So, I assumed that would also be the case with the nuget version.
  

So, by this point I reached back in time to about 15 years ago and a friend was showing me the plot he had made in a just a couple hours with Gnuplot. And, he was using a Windows PC.

• Gnuplot win64 mingw pre-compiled
  (http://tmacchant3.starfree.jp/gnuplot/Eng/winbin/)
  
  I really should have spent more time with this one. I only spent about 30 minutes on it and didn’t get a graph produced, so I scratched it. But, looking back now, it was probably the most straight forward product with the least amount of dependencies. I would really like to take a second look at this one.

At this point, I decided to try to stick with the two technology stacks I was already using (powershell & nodejs). Since, I felt like I had exhausted the powershell stack, I took a look at npm for the nodejs stack.

• Google Charts (https://developers.google.com/chart/)
  
  Google Charts came up over and over again on stackoverflow and blog post answers. But, most of the answers had to do with an older (and recently deprecated 3/18/2019) version which allowed for web api calls to be made to google which would return the generated charts.
  
  The newer Google Charts runs completely in the browser and generates the graphs on the client side. To make this work, I would just need to be able to use a shim in nodejs to make it use the google charts as if it were in the browser. The recommended choice was JSDOM.
  
  However, before I really took the time to make this work I remembered that a co-worker got charting working using chartjs & canvas. So, I did a google search on that and …

chartjs/canvas on node charting

• chartjs (examples) (https://www.npmjs.com/package/chartjs)
• canvas (https://www.npmjs.com/package/canvas)

This finally did the trick. The software was pretty easy to use, with plenty of examples on their website and it was in a technology stack that had previous experience with.

The challenge with using this combination is that I wanted to make the charting functionality available from a Powershell command. So, doing the ridiculous, I built a Powershell module around ChartJS. (Powershell code which, if you remember from Pt 1, is being called from nodejs!)

Some notes on this code …

• packages.json
  
  To use this module you will need to use npm install to pull down the node dependencies found in package.json.
  
• ChartJs.psm1
  
  This will setup some variables which will be referenced else where.
  
• New-ChartJsUtilizationGraph.ps1
  
  Obviously, this is the one that actually generates the graph. It expects data to be either CPU or Memory utilization data; anything else will probably cause an issue.
  
  In order to make a useful graph, we want as many data points from VMware as possible to display (see previous post). Each data points X value will have a datestamp associated with it. Unfortunately, that can make the X axis display become very dense / unreadable as the multiple timestamps display on top of each other (or they don’t display at all). To have better control over this, lines 41-52 ensure that there are only 5 datestamps displayed: first in time, 1/4 of the way through, 1/2 way, 3/4 of the way, and the most recent timestamp.
  
  The function works by generating the javascript which can actually run in nodejs. This script is placed in a temporary folder and the node_modules needed to use it are copied into that same folder (for local reference/usage).
  
  At the end of the script, it should clean up the temporary folder and files, but it won’t do that if an error occurs. I wanted to be able to debug errors, and if the temporary was always cleaned up … well, you get it.
  
• GraphUtilizationTemplate.js
  
  This is a copy and paste of an example file I found on stackoverflow. Using the documentation, it didn’t take too long to change things to what I needed; but it also wasn’t straight forward. You’ll probably need to do some experimentation to find what you need.
  
  An important thing to note, xAxes > ticket > autoSkip: false is really important to make the labels on the x axis appear correctly.

Next up: Creating Charts/Graphs with Powershell for Slack–Pt3 (Sending an Image to Slack).