Create a Sparkline in ASP.NET MCV in 30 seconds or less
January 13, 2011
I’m building a new performance analysis system for our web traffic and was considering different ways to display the data. Anyone who knows me well knows that for the most part I despise reporting. Mostly because time and time again I’ve been asked to build reports that never get used. This time is different. This time I’m the audience so I get to build the report the way I think it should look.
Several years ago I came across a website that had excerpts from Edward Tufte’s book Beautiful Evidence. I was interested in these things called Sparklines:
He also refers to sparklines as “wordlike graphics” or“datawords”. A sparkline usually consists of either a fluctuating line like in a line chart, or of a string of very tiny bars. It is usually longer than high, and is not accompanied by an x- or y-axis or other scale. A sparkline enables the visual display of a large amount of data in a tiny space. In addition, sparklines are often presented in a set, enabling comparisons between the data in different sparklines
At the time I had the idea of adding these sparklines to our flagship application to help give users a better at-a-glance understanding of the health of the account they were working. I did end up implementing it but never released it because I never thought it conveyed the point that I was hoping it would make.
Fast forward a few years later and Google added Sparkline capability to the Charts API which makes it simple. I realized that most of the performance data that I had would be best explained with sparklines. Here is how I did and you should be able to implement this yourself in 30 seconds or less, I promise.
##Step 1 – Create an HTML helper
This is a quick hack to get you going. You could probably structure your code better and make it more readable and allows for incoming options as not everything we are sending Google in the query string is required.
##Step 2 – Add the Sparkline to your markup
This is a simple MVC View Page. Don’t forget to import your Sparkline.Helpers reference…
https://gist.github.com/790548
##Step 3 – Run it
That’s it. It really is that simple… Maybe
Sparklines are easy to use if you have simple data points. You can take the code from above and change it around to better suit your needs. Perhaps you want a int array, or a simple string of comma delimited values to pass in. No problem.
At some point you’ll need to do some math. Why? Well, it depends on how you want to handle negative numbers.
Step 4 – Test it
Assume you have this series of numbers as your data point: 1,5,3,6,8,4,5,8,9,18,3.5,5,4,7,10,11,9,13,5,6,8
Your sparkline will look like this:
But what if you had a negative number in your series? Do you want your Sparkline to look like this or this ?
Please give them a try yourself and have fun. Ping me back if you have done any neat things with Sparklines!
I built a sample app and threw it on GitHub. Please feel free to take it and run with it.