Exploiting the HTML5 Canvas with jqChart
jqChart for ASP.NET MVC leverages HTML5 to deliver more responsive, scalable charting to the browser -- and throws in an HTML helper for ASP.NET MVC developers.
This is what jqChart does, generating everything from the simple bar chart shown in Figure 1 to complex financial charts (including overlaying multiple chart types). jqChart also takes care of generating legends and labels for you and even fires events as users move their mouse over the chart's data points. jqChart's data structure is simple (an array of objects representing the data points to be graphed), making it easy to format data for charting. I tested jqChart in several browsers and found the results to be virtually identical in all of them. Unfortunately, while the documentation suggests that tooltips will be generated for a chart's data points, I didn't get any.
[Click on image for larger view.]
|Figure 1. You can generate a bar chart at the client by passing jqChart an array of values, with each position representing a data point.|
After the initial chart is displayed, client-side charting should let you respond to the user's inputs. This requires a charting tool that makes it easy to modify an existing chart, which is where jqChart let me down. In my testing, I found that I needed to regenerate the complete chart to make virtually any change, including just updating the chart title.
ASP.NET MVC Helper
What I found missing in jqChart was the ability to easily manipulate the original chart after it's displayed in the browser. This isn't a fatal flaw -- it just means that I have to determine my users' scenarios in advance and add more code than I'd like to support those scenarios, especially if I want to support adding or removing a data series. However, it prevents jqChart from being as flexible a tool as I would want in a client-side charting solution.
jqChart for ASP.NET MVC
Price: $299 (developer license only), $499 (license with subscription and priority support)
Quick Facts: A client-side, jQuery plug-in for generating charts using the HTML5 Canvas; includes an HTML helper for both Razor and ASPX environments
Pros: Supports a wide variety of chart types with the ability to generate complex graphs simply
Cons: Changing a chart requires regenerating the whole chart rather than setting the appropriate property
Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.