(Dundas Launches) The New Age of Charting
English | Italiano
 |
About Dino EspositoDino is a trainer and software consultant based in Rome, Italy. He is a member of the Solid Quality Learning team, specializes in Microsoft .NET technologies and spends most of his time teaching and consulting across Europe and the United States. Considered an authoritative and acknowledgeable expert in .NET web applications, Dino regularly contributes articles to Microsoft's content platform for developers and IT consultants. Check out his articles on a variety of MSDN Developer Centers and in MSDN Magazine. |
- Meet The Product
- Set Up The Product
- Interactive Charting in Action
- Selection
- Drill-Down
- Mouse-over Actions
- Embedded UI
- That’s NOT all, folks!
- The Bottom Line
It may sound dramatic at first, but there would be no exaggeration in the following statement: the web wouldn't be the same without the images.
Today, any pages we download from Web sites are topped with countless images that we can roughly categorize into two groups: helper and content images. Helper images serve to make the web page look like a printed magazine page with fading effects, rounded borders, shadows and fonts at will. Content images, on the other hand, just provide information to the user (pictures, charts, graphs).
Today, it's hard to believe there was a time--and it was only eight years ago--when one could arrange a web site with only an HTML editor, a C++ or Visual Basic compiler and a friend to help over the weekend with Photoshop.
So images are essential for the Web. Period.
But what tools can web developers leverage in order to build such great applications? Cross-browser multimedia channels or perhaps JavaScript-controlled streaming services or maybe powerful extensions for rich image formats?
Believe it or not, there is still just one way in which web pages can reference an image: using the HTML <img> tag that points to a public URL. In order to be displayed within a web page, an image must be identifiable through a URL and its bits should be contained in the output stream the web server returns for that URL.
As a result, the Web platform that hosts the application plays a key role as it determines for the most part what an application can or cannot do with images. Clearly, this is not an issue as far as helper images are concerned. Helper images, in fact, are just static GIF images often referenced through CSS styles. Content images, instead, bring some extra value to the table and valuable information for users. Having this information show up timely and effectively is key.
There are two main subtypes of content images: charts and photos. Photos are just a native form of information. The image in the photo is the already the information the user requests. You may need to build some level of interactivity on top of photos, but that's mostly a feature of a particular application (for example, a virtual tour of a museum).
Charts are a different story. Charts are a graphical tool to represent information. More often than not, they represent pure business critical information. Charts can be interactive, provide drill-down capabilities, support point-and-click semantics, offer an intuitive way to change parameters and regenerate quickly in the context of the web page.
Charts require ad hoc tools because they're a special type of data. Enter Dundas Chart for ASP.NET.
Meet The Product
Dundas Chart for ASP.NET is a popular and extremely advanced charting package with an extensive and largely unmatched feature set. In addition to a slew of chart types, the product brings special capabilities such as statistical analysis, data manipulation, specific formulas, grouping and filtering, annotations and UI support (toolbars, wizards).
Designed for Visual Studio 2005 and the .NET Framework 2.0, Dundas Chart for ASP.NET version 5.5 provides a great design-time experience with its full support for data visualizers, designers and properties box you normally find and use in the context of Visual Studio 2005.
Dundas Chart for ASP.NET comes in two flavors: Enterprise and Professional. The Enterprise Edition includes all the features of the Professional Edition, plus a few cool extras such as Dundas Map and Dundas Gauge. In addition, you have for free for a limited time the newest Dundas Chart OLAP Services. Check out latest news and offers at http://www.dundas.com/products.
Set Up The Product
The automatic product installer does the usual things for a top quality product such as testing if Visual Studio 2005 and a web server are installed on the machine. In these cases, the installer integrates the documentation with Visual Studio 2005 and gives you the option of creating a virtual folder to run the samples.
With the setup completed, you can start creating Dundas Chart-powered applications by simply dropping the following three files in your Bin folder: the license file (*.lic), the assembly (DundasWebChart.dll) and the IntelliSense documentation (DundasWebChart.xml). You're done. Or, more precisely, you may be done.
As long as you show only charts using binary streaming, no extra settings are required. Otherwise, if you plan to create charts using methods on the controls object model, be aware that the control will be required to save the chart as an image file on the file system. This poses an issue in any ASP.NET applications. By default, therefore, the ASP.NET worker process isn't granted enough privileges to write to disk. This limitation is by design and can be overcome only by granting special security privileges to the ASP.NET account. You need to enable the worker process to create and edit files in your applications directory tree. This is an easy task for a Web master or a site administrator. You just select the project folder in Windows Explorer and right-click to see the properties. Locate the Security tab and in it, the ASP.NET account. It is NETWORK SERVICE or ASPNET depending on which version of IIS you're running on. Finally, set read/write permissions on the folder.
Interactive Charting in Action
Real-world data presented through charts often results from aggregation. Users are displayed one view of the data, but they likely need to drill-down into numbers, rotate, filter or group data. On the other hand, in web applications a chart can be represented only as a stream of bytes or a static PNG or JPEG file.
As a developer, you know that ASP.NET applications use the postback mechanism to refresh the content of a displayed page. As a smart developer, though, you're certainly aware that a full page refresh is hardly affordable in a realistic page with plenty of graphics, tables, and multimedia content. That's just where AJAX fits in.
The Dundas Chart control is fully AJAX-enabled meaning that it can add interactivity to any displayed chart. In this way, it makes it possible for developers to drill-down into a more detailed view of the same data, display rich tooltips and context menus and zoom and rotate data in a personalized fashion. Dundas Chart for ASP.NET develops its support for interactivity around four concepts and related functionalities: selection, drill-down, mouse-over actions, embedded UI.
Selection
The chart control uses hit testing to determine what chart element was clicked on. Next, the control autonomously decides which action is appropriate. For example, if the user clicks on a pie slice, the selected slice is exploded. From a programmer's perspective, selection is a process naturally associated with server events. The HTML user interface of the control captures some relevant client activity (e.g., mouse clicks) and makes an AJAX postback. On the server, the control fires a server event that developers can handle through a C# or Visual Basic .NET piece of code. Here's an example:
protected void Page_Load(object sender, EventArgs e)
{
this.Chart1.Click += new ImageClickEventHandler(Chart1_Click);
}
protected void Chart1_Click(object sender, ImageClickEventArgs e)
{
HitTestResult hitTestResult = this.Chart1.HitTest(e.X, e.Y);
if (hitTestResult != null)
{
this.Chart1.Titles["ClickedElement"].Text = " ... ";
}
}
In the pages Load event, you hook up the Click event of the Chart control and when the event fires, you grab event-related data (such as coordinates) and update the UI.
The Click event is not the only possibility you have. You can also associate a server method with a client event. For example, you could bind the onclick JavaScript event automatically causing an AJAX postback that executes a well-known server method.
In any case, you have the tools to make the end user interact with the chart and modify settings or even data dynamically.
Drill-Down
Imagine for a moment you are a sales manager reviewing the quarter results of your agents. At first, you might want to see global numbers grouped per geographical area. Next, you might like to see the details of sales in a particular macro region, say, North America. As you can see in Figure 1, your job would be greatly simplified if you could just point and click.
Figure 1--Users click on the bar chart representing an aggregate value and get a second detailed chart.
The drill-down feature is a combination of selection and application-specific code. The custom code just determines the new data that is displayed.
Mouse-over Actions
Dundas Chart for ASP.NET also optionally allows you to add a bit of JavaScript to implement rich tooltips. As the user moves the mouse over sensitive areas of the chart, client JavaScript injects pop-up HTML elements with a preview of the chart being drilled down to.
Figure 2--The contents of the bar being clicked is previewed in a rich-HTML tooltip.
Scrolling and zooming are other actions you can take on a chart that would be impractical without a bunch of client side script. Injected client event handlers capture the user's intention and transmit it back to the server for further processing. For example, in Figure 3 the user selected an area in which to zoom. As the user releases the mouse button, a request hits the server and a new zoomed-in image is served to the user.
Figure 3--Interactive zooming of the selected area
Embedded UI
Even with the most powerful mix of client and server event handlers you can hardly claim to meet all possible user requirements. This is due to an extremely simple fact: you don't know all possible settings and formats an end user, or even a developer, may need to cover. Not to mention situations in which the chart is used to simulate hypothetical scenarios.
An advanced charting solution should incorporate some UI elements that, initially hidden, are displayed on demand and used to change the settings and data in the chart. Dundas Chart for ASP.NET provides three types of UI elements: toolbar, context menu and property box.
Figure 4 shows a chart associated with a toolbar. By using the toolbar commands, the user automatically modifies the appearance of the chart. In the example, the user can choose between 3-D and 2-D view.
Figure 4--Using an embedded toolbar to edit the chart dynamically
The toolbar can contain any combination of commands, including built-in commands and custom operations.
That's NOT all, folks!
Dundas Chart for ASP.NET contains much more than what was just outlined in this article. The package contains a large assortment of different 2D and 3D chart types, OLAP services, reporting capabilities and tools for maps and gauge solutions. Let's briefly review some of newest features.
Annotations objects are chart extensions that developers can use for highlighting data or for adding further customization to charts. Typical annotations include callouts, lines, rectangles, arrows, freehand writing and rendering and more.
As a developer, you have the tools to apply built-in and custom formulas to bound data, filter out data points, handle missing or empty data in an elegant manner and group data points. In just one word, you have the tools for good data analysis.
Manipulating dates and times through ad hoc types is normal in any library and framework. It is less common, though, that you plot data along the X axis as true date or time values. Dundas Chart for ASP.NET allows you use date objects as labels on the X axis for a increased ease of development and data binding.
Finally, the design-time support that Dundas Chart for ASP.NET has to offer inside Visual Studio 2005 is second to none. A large share of the control properties can be declaratively set at design-time and don't require server code. As usual, changes in the chart configuration are promptly reflected in the control preview and all advanced design-time features are supported, including smart tags, visualizers and actions. (See Figure 5.)
Figure 5--The Dundas Chart control in action live in Visual Studio 2005
The Bottom Line
At the break of the second age of the web, charting requires much more than just static images or full-page postbacks. AJAX is a key requirement for any data representation that needs to be interactive. A chart is not interactive per se, but users like and enjoy interactive charts. So for a leading component vendor such as Dundas Software, coming out with a rich offer of interactive charting components is a must.
For ASP.NET developers, Dundas Chart for ASP.NET is a must try. In the end, you may find reasons for not actually buying it. If you're looking for a charting tool, you have no reasons, instead, for not trying it out. Do it today. Visit http://www.dundas.com.