Mar 12th, 2012

In my last post, Get Me Some Video JS IdeaStrike was introduced to HTML 5 video goodness quickly, simply, and beautifully with Video.js. The New Support view provides an IdeaStrike 101 video experience leveraging HTML 5 video element and Video.js sweetness. In this installatment a review of the New Metric View will be the focus. The New Metric view leverages Raphael JS to provide an awesome, compelling, interactive user experience pie chart. Currently the Metric view only provides two pie charts; Most Ideas/Innovations and Most Votes.

Raphael.js can be downloaded here or you can install it from NuGet using Install-Package RaphaelJS or simply view the package here. It is important to note for IdeaStrike ALL resources, *.js files included are stored in ~/Resources. Therefore, I moved the Raphael scripts installed the NuGet package in ~/Scripts to the ~/Resources directory to remain consistent.

Raphael CSS References:

pie.css

pie-print.css

Raphael JS References:

raphael.js

pie.js

The raphael.js file is the main Raphael JS library. The pie.js file is specific to the pie chart functionality.

Build Chart Data

The view loops through the Model.Metrics, a collection of MetricViewModels building a table of row data in the form of user name, percentage. Each row calls a static method, MerticViewModels.GetPercentage to determine the percentage, passing in the total idea count and the metric view model count.

It is important to note when and where the Raphael chart is created. As you can see from the code below, we ONLY execute the Raphael script after the entire DOM has been loaded, $(document).ready(function (). JQuery is leveraged to get the data from the HTML Table rows as arrays passing them along to the Raphael pie function to create the chart.