Improve Your Image




Improve Your Image


By Steve C. Orr


They say a picture is worth a thousand words. Sometimes a chart can clarify complex data into crystal clear results like nothing else media can. While few people would dare to argue this point, there is plenty of room for debate about the best way to generate such charts. One way to create some basic charts is by using HTML (asp.netPRO subscribers may access Orr s article Bar Graphs to Go). Another technique is to let Excel generate such charts for you (asp.netPRO subscribers may access Orr s article Export to Excel). Yet another common technique is to use the System.Drawing namespace of the .NET Framework to harness the power of GDI+ (asp.netPRO subscribers may access Dino Esposito s article Build Dynamic Web Charts). Although you can generate gorgeous charts with the latter technique, it can be quite time consuming to do so. If you need charts that dazzle the eye, the most cost-effective solution is usually to buy a third-party component to help out. And I must say, .netCharting generates some of the most visually stunning charts I ve ever seen.


Getting Started

After downloading the free demo, you ll discover the installation process is fairly manual. You must establish the samples folder as an IIS application if you want to view the charting examples in action. To add the component to one of your own Web applications, you must copy the included DLL into your bin folder, make a reference to it from within Visual Studio.NET, and add it to your toolbox. You must then create a temporary folder and give the ASPNET worker process write access to this folder so that the component has a place to send the charts it generates. These steps should be familiar to experienced Web developers; however, the process could be a bit much for beginners to swallow. In my opinion, a more automated installation option would be a welcome addition to a future version of the product.


There is so much sample code that it s almost overwhelming. No matter what kind of chart you want to create, you ll certainly be able to find a code snippet that can be modified for your needs. All code samples are provided in both C# and VB.NET. The documentation is thorough and complete, providing detailed explanations for every property and method available in the object model.


Simple Implementation

It only takes a few lines of code to create a basic chart. To configure your chart you can use code such as this:


Chart1.Title = "My Chart"

Chart1.Use3D = True

Chart1.DefaultSeries.Type = SeriesType.Cylinder

Chart1.TempDirectory = "temp"

Chart1.Size = "640x480"


The first line (obviously) sets your chart title, and the second line configures the chart to appear in 3D, which is usually more visually appealing than 2D. The third line sets the bars in this chart to appear cylindrical instead of as plain old rectangles. The temp directory needs to be set to tell the control where to write the chart. As mentioned previously, the ASPNET user account needs write permissions to this temp directory. Finally, the size of the chart is set. Alternatively, these properties (and many others) can be set at design time.


The chart can be bound to DataSets, DataTables, DataViews, DataReaders, XML, and even Excel files. Alternatively, you can programmatically generate the data by using series and element metaphors that should be at least vaguely familiar if you ve used any kind of charting product before. When combined with the code in Figure 1, the previous code creates the output shown in Figure 2.


'Load some data

Dim SC As New SeriesCollection

Dim s As New Series

Dim el As Element

el = New Element

el.Name = "7/1/2004"

el.YValue = "202"


el = New Element

el.Name = "7/2/2004"

el.YValue = "201"


el = New Element

el.Name = "7/3/2004"

el.YValue = "200"


el = New Element

el.Name = "7/4/2004"

el.YValue = "198"



Chart1.YAxis.Minimum = 190

SC(0).Elements(0).Color = Color.FromArgb(49, 255, 49)

SC(0).Elements(1).Color = Color.FromArgb(255, 255, 0)

SC(0).Elements(2).Color = Color.FromArgb(255, 99, 49)

SC(0).Elements(3).Color = Color.FromArgb(0, 156, 255)


Figure 1: While databinding is a good option, chart data can also be generated programmatically.


Figure 2: Beautiful charts take little effort.


Dozens of chart types can be created. Of course, all the standard types such as bar graphs, pie charts, and line graphs are supported. In addition, many less common chart types are also possible, such as bubble charts, candlesticks, radar graphs, area charts, and even gauges that would look at home on the dashboard of your car. For most chart types there are dozens of properties that can be set to widely vary the output. Figure 3 demonstrates that you can even combine a mixture of chart types to create virtually any chart you can dream up.


Figure 3: Different chart types can be combined into a single chart, unleashing virtually unlimited possibilities.


Function and Form

The beauty in these charts is more than skin deep. Not only are they attractive, but they provide rich functionality, as well. Built-in drill-down capabilities allow you to click on different chart elements (such as a specific bar in a bar chart) to display a new chart that dissects the data even further. For example, if your user wants to know why 2003 sales were so much higher than 2002, they can click on the 2003 bar to get a breakdown by month. If your data supports it, they can then drill down further into daily figures and beyond.


Charts can be automatically cached, and stale charts can be automatically purged to free hard drive space on the server. Annotations can be added anywhere on the graph, or attached to any chart element in virtually any position imaginable. Tooltips can appear over any chart element to bring up additional data details for curious users. Legends can be configured in many flexible ways, including being rendered as a separate image so you can place it on another area of the page. Colors, symbols, and hatch styles can be adjusted to suit all users, including disabled users and users of mobile devices with limited display capabilities. In case you can manage to think of a chart that .netCharting won t fully create, PostRenderDrawing can be used to allow you to paint on the final details yourself.


The Price Is Right

Pricing starts at around US$400, and support options include an online knowledge base and e-mail technical support. There are a variety of no-nonsense licensing options available, including unlimited development servers, unlimited users, or unlimited CPUs for a given server. No matter which licensing option suits you best, you ll have the full functionality of the product at your disposal, as there are no annoying Professional or Enterprise versions of the product that unlock special functions for higher-paying customers.


Sure, you could create all this functionality yourself given enough time. After all, this product was developed purely in C#. However, $400 worth of your time could only create a fraction of the functionality included in this product, so you may want to give this product some serious consideration before embarking on your next charting project.


Steve C. Orr is an MCSD and a Microsoft MVP in ASP.NET. He s been developing software solutions for leading companies in the Seattle area for more than a decade. When he s not busy designing software systems or writing about it, he can often be found loitering at local user groups and habitually lurking in the ASP.NET newsgroup. Find out more about him at http://Steve.Orr.net or e-mail him at mailto:[email protected].



Web Site: http://www.dotnetcharting.com

Price: Starts around US$400



Hide comments


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.