It is well known that a picture is worth a thousand words. Likewise, a good graph is far superior to a large list of numbers, and a long series of numbers can quickly become meaningful when represented in a well-designed chart. Often all that is needed for good numeric presentations are standard graphing capabilities, and there are several excellent third-party components for making charts in .Net (see links below). Problems arise, however, when a programmer needs charting options that the third-party tool cannot provide. Naturally, it is impossible for a component to offer every feature that users could possibly want. For example, Server Objects used to have a component called AspChart, but this was discontinued and is no longer supported because users wanted to have too many different features than was reasonable to supply.
When graphic needs exceed the capabilities of third-party components, the programmer needs tools for generating customized charts. This article focuses on the use of SVG. The advantages of SVG include the following:
- SVG is XML based, integrates well with other W3C standards, and includes a complete DOM
- Events and animation can be added declaratively or using ECMAScript
- Charts print well from a web browser
- Charts can be zoomed in on and still maintain clean, sharp lines
- Charts can modified easily without the need to regenerate the whole chart
- An SVG file can be included in a web page
A couple disadvantages of SVG are that a plug in is necessary and animation on big files can be sluggish.
SVG Code Example
Here is an example of an SVG file that produces three bars, ie. for the beginning of a simple bar chart.
<svg width="120" height="170" x="0" y="0">
<path style="stroke-width:2; stroke:black; fill:red" d="M 20 150 L 20 35 L 40 35 L 40 150 Z"/>
<path style="stroke-width:2; stroke:black; fill:yellow" d="M 50 150 L 50 31 L 70 31 L 70 150 Z"/>
<path style="stroke-width:2; stroke:black; fill:purple" d="M 80 150 L 80 45 L 100 45 L 100 150 Z"/>
</svg>
This would produce a graphic that looks like the one below:
See in SVG format
To be included in a web page, an SVG file requires either an object tag or an embed tag.
<object data="bars.svg" width="500" height="500" type="image/svg-xml">
<embed src="bars.svg" width="500" height="500" type="image/svg-xml">
Combining SVG and .Net
The rest of the examples require a web browser with Adobe's SVG Viewer plugin installed. (If you do not have this plugin, you can get it at http://www.adobe.com/svg/viewer/install/main.html.)
By using .Net, charts can be built from dynamic data. As the data changes, so do the charts. The following are examples of charts that can be built with SVG and .Net:
Simple Bar Chart
The first SVG chart example is a bar chart that displays the names and ages of a list of people. The data for this chart comes from an xml file that has the names and birthdates of my children and my brother-in-law's children. The age is always accurate because it is calculated based on the birthday and today's date. Pointing to a different xml file produces a different bar chart. If I need to change the chart, I simply change the xml file.
Simple Line Chart
The next example is a line chart that shows the price of a stock over a period of time. It reads an xml file that has the date and closing price of the stock. The two stocks I used for this example are Microsoft (MSFT) and Sun Microsystems (SUNW). I obtained the data by downloading historical data since the beginning of the year from Yahoo. (At work, where I have access to real-time data, we have line charts that show our current profit / loss for a symbol, and the charts are updated once per minute.)
Combo Chart
The Combol Chart example combines a bar chart and a line chart. The price of a stock is represented by a line, and the volume traded is represented by bars. The bars are reduced to a fraction of the graph area and their opacity is reduced so that the view of the line is not obstructed. The combo chart reads from an xml file exactly the same way as in the previous example.
Multi Chart
The last example is a chart that actaully contains multiple charts. The user can switch from one chart to the next by clicking on the Symbol for the desired chart. This is accomplished by using SVG's scripting capability. The script is written in ECMA script and is included as part of the SVG code. The script in the Multi Chart causes the opacity of the lines to change from 0.0 (transparent) to 1.0 (completely opaque). The ASPX code loops through the symbols loading the xml file for each symbol and writes the SVG code for that symbol. All of the lines are in the SVG code for each symbol, but the lines for only one chart show at one time.
For a good example of a pie chart using .Net, go to yaflaSVG by Dennis Forbes.
SVG by itself is brilliant, but, when advanced graphing capabilities are needed, the combination of SVG and .Net is a powerhouse.
Third party Chart Components
Chart FX for .Net
Dundas Chart for .Net
Infragistics .Net Chart
ComponentOne Chart for .Net
Advanced Software Engineering Chart Director
.net Charting
SVG Links
Dynamically Generating SVG Graphs with .NET (By Dan Wahlin)
yaflaSVG: Example of generating a pie chart using .Net (By Dennis Forbes)
SVG Tutorials, Samples, Games, etc (By Kevin Lindsey)
Official W3C overview of the Scalable Vector Graphics (SVG) format
