{"id":30,"date":"2011-02-03T16:43:24","date_gmt":"2011-02-03T21:43:24","guid":{"rendered":"http:\/\/rud.is\/b\/?p=30"},"modified":"2017-04-02T22:51:38","modified_gmt":"2017-04-03T03:51:38","slug":"awesomechartjs-meets-microsoft-security-bulletins","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2011\/02\/03\/awesomechartjs-meets-microsoft-security-bulletins\/","title":{"rendered":"AwesomeChartJS Meets Microsoft Security Bulletins"},"content":{"rendered":"

I wanted to play with the AwesomeChartJS<\/a> library and figured an interesting way to do that was to use it to track Microsoft Security Bulletins<\/a> this year. While I was drawn in by just how simple it is to craft basic charts, that simplicity really only makes it useful for simple data sets. So, while I’ve produced three diferent views of Microsoft Security Bulletins for 2011 (to-date, and in advance of February’s Patch Tuesday), it would not be a good choice to do a running comparison between past years and 20111 (per-month). \u00a0The authors self-admit that there are [deliberate] limitations and point folks to the most excellent flot library<\/a> for more sophisticated analytics (which I may feature in March).<\/p>\n

The library itself only works within an HTML5 environment (one of the reasons I chose it) and uses a separate <canvas><\/code> element to house each chart. After loading up the library iself in a script tag:<\/p>\n

<script src=\"\/b\/js\/AwesomeChartJS\/awesomechart.js\" type=\"application\/javascript\"><\/code><\/p>\n

(which is ~32K un-minified) you then declare a canvas element:<\/p>\n

<canvas id=\"canvas1\" width=\"400\" height=\"300\"><\/canvas><\/p>\n

<\/code>
\nand use some pretty straighforward javascript (no dependency on jQuery or other large frameworks) to do the drawing:<\/p>\n

var mychart = new AwesomeChart('canvas1');<\/code><\/div>\n
mychart.title = \"Microsoft Security Bulletins Raw Count By Month - 2011\";<\/code><\/div>\n
mychart.data = [2, 12];<\/code><\/div>\n
mychart.colors = [\"#0000FF\",\"#0000FF\"];<\/code><\/div>\n
mychart.labels = [\"January\", \"February\"];<\/code><\/div>\n
mychart.draw();<\/code><\/div>\n

\nIt’s definitely worth a look if you have simple charting needs.<\/p>\n

Regrettably, it looks like February is going to be a busy month for Windows administrators.<\/p>\n

\nYour web-browser does not support the HTML 5 canvas element.<\/canvas><\/p>\n

Your web-browser does not support the HTML 5 canvas element.<\/canvas><\/p>\n

Your web-browser does not support the HTML 5 canvas element.<\/canvas><\/p>\n<\/div>\n