Eden Ridgway's Blog

[Update: This does not apply to the Dojo Toolkit vesion of the Statistics Plugin.  For information on how to customize that version go to this page.]

As promised in my previous post, CruiseControl Statistics Graphs, here is a high level description of the implementation that allowed me to display graphs in CruiseControl.Net. I've also included a quick guide on how to extend the report to include your own custom statistics that you may have published as part of your build.

After I had decided to create a graphical view of the CruiseControl statistics I assessed various options that were available. My immediate thoughts were to use XSLT to create either SVG or VML graphs. The problem is that I wanted something that was quick and easy to implement and quite frankly the effort required to do all of this using xslt was just too great. My attentions then turned to doing the majority of the processing in JavaScript. The Dojo Charting library was the first solution that sprung to mind, but on further investigation is appeared to be undergoing some restructuring and the documentation is almost non-existent. It was then that I came across PlotKit, a cross browser charting framework built on top of MochiKit. It was simple and had documentation so it was a clear winner.

So the Statistics Graph solution ended up being structured as follows:

1. StatisticsGraphs.xsl - creates JSON representation of the detailed stats data and the general page structure
2. StatisticsGraphs.js - contains the logic to summarise the detailed stats data and to create the plotkit graphs and tables
3. MochiKit_lite_packed.js, PlotKit_Packed.js - packed versions of the libraries that provide the graphing functionality (from PlotKit)
4. excanvas.js - provides canvas emulation for Internet Explorer (from PlotKit)

If one wanted to create their own custom summary graph of new statistics on the page (for more info on including custom statistics see Grant Drake's blog post), you would open up StatisticsGraphs.js and do the following:

1. Edit the generateDailySummaries function and add your summarised statistic to daySummary
   
   
   var daySummary =
   {
   day : day,
   successfulBuildCount : count(currentStatistics, "Status", function(item) { return (item["Status"] == "Success"); }),
   failedBuildCount : count(currentStatistics, "Status", function(item) { return (item["Status"] == "Failure"); }),
   lastBuildLabel : getLastValue(currentStatistics, "BuildLabel"),
   testCount : testCount,
   testsPassed : testCount - testFailures - testsIgnored,
   testFailures : testFailures,
   testsIgnored : testsIgnored,
   fxCopWarnings : average(currentStatistics, "FxCop Warnings"),
   fxCopErrors : average(currentStatistics, "FxCop Errors"),
   averageBuildDuration: average(currentStatistics, "Duration"),
   minBuildDuration: min(currentStatistics, "Duration"),
   maxBuildDuration: max(currentStatistics, "Duration"),
   
   //Insert new summarised statistics here
   averageCodeCoverage : average(currentStatistics, "CodeCoverage")
   };
   
   
2. Create a new function to create the graph. Note that the createGraph function creates the title, graph and legend for you. eg.
   
   
   function createCodeCoverageGraph()
   {
   createGraph({
   graphName : "Average Daily Code Coverage",
   series : [
   {
   name : "Average Code Coverage",
   attributeName: "averageCodeCoverage",
   color : Color.greenColor()
   }
   ]
   })
   }
   
   
3. Then call your new function in the setupGraphs
   
   
   function setupGraphs()
   {
   createBuildReportGraph();
   createBuildDurationGraph();
   createTestGraph();
   createFxCopGraph();
   
   //Insert calls to functions that create new graphs here
   createCodeCoverageGraph();
   }

So if you are keen to give it a go take a look at my previous post for the download.