Dundas Chart for ASP.NET
Working with 3D Charts
See Also Send comments on this topic.
Using Dundas Chart > Chart Areas > Working with 3D Charts



Glossary Item Box

Overview

3D charts are displayed on a chart area-by-chart area basis, and it is possible to display both 2D, and 3D chart areas within the same chart image. 3D charts support all 2D features except for the following:

Summary of Classes used for 3D Charts

The display of 3D chart areas, as well as their rotation and style are implemented using the ChartArea3DStyle class, which is exposed as the Area3DStyle property of ChartArea objects. The Point3D class is used for the coordinates of 3D points, and the ChartArea class has methods to help transform these 3D points so that they can be used for custom drawing methods. To enable the 3D display of a chart area, set its Enable3D property to True. This can be done at either at design-time, or at run-time.

Example

This example demonstrates the syntax used to enable 3D for the default chart area. 

Visual Basic Copy Code
Imports Dundas.Charting.WebControl
  ...
  
' Enable the chart area 3D property.  
Chart1.ChartAreas("Default").Area3DStyle.Enable3D = True
C# Copy Code
using Dundas.Charting.WebControl;
  ...
  
// Enable the chart area 3D property.    
Chart1.ChartAreas["Default"].Area3DStyle.Enable3D = true;

 

Rotation and View Angles

The rotation of a chart is determined by the XAngle and YAngle properties, and these properties are measured in degrees. A positive XAngle will rotate the chart counter-clockwise around the horizontal axis, and a positive YAngle will rotate the chart clockwise around the vertical axis. The allowable range for Y angle rotation is -180 to 180 degrees, and -90 to 90 degrees for X angle rotation.

It is important to note that displaying the chart as an isometric projection (accomplished by having the RightAngleAxes property set to True) will result in perceived angles of rotation that may differ from the XAngle and YAngle property values. This occurs because an isometric projection does not display an authentic 3D view.

If your application allows end-users to rotate chart areas using these two properties, then we do not recommend using isometric projections, since the rotation may be unreliable, and not smooth.

Example

This example demonstrates how to set the rotation of the default chart area to 45 degrees around the vertical and horizontal axes.

Visual Basic Copy Code
Imports Dundas.Charting.WebControl
  ...
  
' Enable the chart area 3D property.  
Chart1.ChartAreas("Default").Area3DStyle.Enable3D = True
  
Chart1.ChartAreas("Default").Area3DStyle.XAngle = 45
Chart1.ChartAreas("Default").Area3DStyle.YAngle = 45
C# Copy Code
using Dundas.Charting.WebControl;
   ...

// Enable the chart area 3D property.    
Chart1.ChartAreas["Default"].Area3DStyle.Enable3D = true;   

Chart1.ChartAreas["Default"].Area3DStyle.XAngle = 45;
Chart1.ChartAreas["Default"].Area3DStyle.YAngle = 45;

 

Perspective

The amount of perspective in a chart is determined by the Perspective property, and the allowable range is 0-100 percent, the default being zero percent.

Setting Perspective will result in the RightAngleAxes property being set to False (they are mutually exclusive).

Figure 1: A chart showing perspective.

 

Isometric Projection

An isometric projection of a chart area is a view where the chart area axes are displayed at right angles to each other.

Isometric projections are displayed by setting the  RightAngleAxes property to True, and if set to True the Perspective property will be reset to zero (they are mutually exclusive).

Please note the following points concerning isometric projection:

 

View Depth

There are two properties that effect the view depth: PointDepth and PointGapDepth. The PointDepth is the depth of data points (e.g. the thickness of an area chart) and is measured as a percentage of the data point width. The PointGapDepth represents the distance between data series that are displayed along different rows (i.e. series with different Z positions), and is measured as a percentage of the distance between data points in one row. See figure 1 below for an illustration of these properties.


Figure 2: PointDepth and PointGapDepth.

 

Note that all series, regardless of chart types, have depth which may or may not be utilized to draw data points. For example, a column chart series uses it entire depth to draw the columns, while a point chart series does not use its entire depth to draw the points.

Both properties have allowable ranges of 0-1000%.

Example

This example demonstrates how to set the PointDepth, and PointGapDepth properties.

Visual Basic Copy Code
Imports Dundas.Charting.WebControl
  ...

' Enable the chart area 3D property.  
Chart1.ChartAreas("Default").Area3DStyle.Enable3D = True
  
Chart1.ChartAreas("Default").Area3DStyle.PointDepth = 200
Chart1.ChartAreas("Default").Area3DStyle.PointGapDepth = 200
C# Copy Code
using Dundas.Charting.WebControl;
   ...

// Enable the chart area 3D property.    
Chart1.ChartAreas["Default"].Area3DStyle.Enable3D = true;
   
Chart1.ChartAreas["Default"].Area3DStyle.PointDepth = 200;
Chart1.ChartAreas["Default"].Area3DStyle.PointGapDepth = 200;

 

Clustering

When multiple series for bar or column charts are clustered they are displayed along two distinct rows in a chart area (i.e. each row has a distinct Z position). If the series are not clustered then their corresponding data points (i.e. data points with either the same data point collection index or X values) are then displayed adjacent to each other in one row.

Clustering only applies to bar and column charts, and is controlled by the Clustered property.

 

Lighting

Lighting is set by the Light property, and can be set to one of three LightStyle enumeration values:

  1. None - No lighting effects.
  2. Simplistic - The hue of all chart area elements (e.g. backwall, side walls, etc.) is fixed.
  3. Realistic - A realistic lighting style is applied, and the hue of all chart area elements (e.g. backwall, side walls, etc.) changes depending on the amount of rotation.

Realistic lighting will affect data points differently, depending on the type of chart being displayed.

 

Figure 3: A chart using realistic lighting.

 

Example

This example demonstrates how to specify realistic lighting for the default chart area.

Visual Basic Copy Code
Imports Dundas.Charting.WebControl
  ...

  ' Enable the chart area 3D property.  
Chart1.ChartAreas("Default").Area3DStyle.Enable3D = True

  
' Specify a realistic lighting effect.  
Chart1.ChartAreas("Default").Area3DStyle.Light = LightStyle.Realistic
C# Copy Code
using Dundas.Charting.WebControl;
  ...

// Enable the chart area 3D property.    
Chart1.ChartAreas["Default"].Area3DStyle.Enable3D = true;
  
// Specify a realistic lighting effect.
Chart1.ChartAreas["Default"].Area3DStyle.Light = LightStyle.Realistic;

 

Wall Width

The width of a chart area's walls is set by the WallWidth property. It is measured in pixels, and the allowable range is 0-30 pixels.

 

Figure 4: A chart demonstrating wall width.

 

Marker Lines

Marker lines are vertical and/or horizontal lines that indicate to end-users the exact locations of data points, and the type of marker line displayed depends on the chart type being shown. For example, area charts will have both horizontal and vertical marker lines, while a line chart will only have horizontal lines.

Marker lines are displayed using the ShowMarkerLines custom attribute, which is implemented using the CustomAttributes property.

Markers can be shown for single data points or entire data series, and can be used for the following chart types: all area-type charts, line charts, spline-type charts and range-type charts.

If the BorderColor property of a plotted series is set then the marker lines will use this specified color. If BorderColor is not set then the color of marker lines for the series will automatically be determined by the control, and will be slightly darker than the color of the series.

Example

This example demonstrates how to specify that marker lines are to be drawn for a series named "Default". Note that we only set the ShowMarkerLines custom attribute as opposed to setting all custom attributes using one method call.

Visual Basic Copy Code
Imports Dundas.Charting.WebControl
  ...

' Enable the chart area 3D property.  
Chart1.ChartAreas("Default").Area3DStyle.Enable3D = True
  
' Show the marker lines.
Chart1.Series("Default)("ShowMarkerLines") = "True"
C# Copy Code
using Dundas.Charting.WebControl;
  ...
  
// Enable the chart area 3D property.    
Chart1.ChartAreas["Default"].Area3DStyle.Enable3D = true;

// Show the marker lines.
Chart1.Series["Default]["ShowMarkerLines"] = "True";

 

Custom Drawing and 3D

Please note that following points concerning custom drawing and 3D chart areas:

 

Scrolling and Zooming functionality is not available when using 3D charts.

 

The use of scale breaks is not available when using 3D charts.


 

In order to perform custom drawing for 3D charts perform the following steps:

  1. Determine the relative X, Y and Z coordinates for all points used in GDI+ method calls (see sample code below).

    The Axis class provides several utility methods to help get relative X and Y axis values. For example, use the Axis.ValueToPosition method to return a relative X or Y coordinate for a given axis value. Note that for bar-type charts the Y axis is horizontal and the X axis is vertical. GDI+ methods always have a vertical Y coordinate and horizontal X coordinate, so to get the X coordinate for bar-type charts from an axis value use an AxisY method, and vice-versa.

    Relative Z values can be obtained for series using the GetSeriesZPosition and GetSeriesDepth methods. GetSeriesZPosition returns the z coordinate for a given series, and is measured from the backwall of a chart area to the center of the given series. The GetSeriesDepth method returns the depth of a given series. Note that all series, regardless of the chart type, have depth which may or may not be utilized to draw data points. For example, a column chart series uses it entire depth to draw the columns, while a point chart series does not use its entire depth to draw the points.
     
  2. Transform the 3D Coordinates. All 3D coordinates must be converted into 2D coordinates. To do this use the TransformPoints method, which takes an array of Point3D objects with relative X, Y, and Z coordinates and then transforms those points so that they have relative 2-dimensional coordinates (i.e. the X and Y properties are changed to reflect the 3-dimensional view, and the Z property is then disregarded).
      
  3. Convert all relative coordinates to absolute pixel coordinates. The chart uses a relative coordinate system, with the top-left corner of the entire chart image at position 0,0 and the bottom-right corner at position 100,100 (for more information on the chart's coordinate system see the Chart Coordinate System topic). GDI+ methods, however, require absolute pixel coordinates. With absolute pixel coordinates the top-left corner of the chart image is at 0, 0 and the bottom-right position is at "Width, Height", measured in pixels.
     
    There are several conversion methods provided by the ChartGraphics class that will change relative chart coordinates to absolute coordinates. For example, ChartGraphics.GetAbsolutePoint takes a PointF structure that has relative coordinates, and converts it so that it uses absolute pixel coordinates (the PointF structure can then be used by any GDI+ method that uses a PointF structure).

Example

This example demonstrates how to draw a custom line from the 2nd data point in the first plotted series to the 3rd data point of the second plotted series. We assume that there are two data series, both of which are point charts. It is also assumed that the chart area is clustered, so the point charts are displayed along different rows.

Visual Basic Copy Code
Imports Dundas.Charting.WebControl
Imports System.Drawing
  ...
  
Private Sub Chart1_PostPaint(ByVal sender As Object, ByVal e As Dundas.Charting.WebControl.ChartPaintEventArgs)
    ' Check for chart area.
    If (sender.GetType = ChartArea) Then
        ' We need two 3D points, one for the second point in first series,
        ' and the next one for the third point in the second series.  
        Dim myPoints(1) As Point3D   myPoints(0) = New Point3D()
        myPoints(1) = New Point3D
        
        ' Get the relative X coordinate for second point in first series. We will assume
        ' that all data points have X values.
        myPoints(0).X = Chart1.ChartAreas("Default").AxisX.ValueToPosition(Chart1.Series("Default").Points(1).XValue)
        
        ' Get the relative Y coordinate for second point in first series.
        myPoints(0).Y = Chart1.ChartAreas("Default").AxisY.ValueToPosition(Chart1.Series("Default").Points(1).YValues(0))
        
        ' Get the relative Z coordinate for the first series.
        myPoints(0).Z = Chart1.ChartAreas("Default").GetSeriesZPosition(Chart1.Series(0))
        
        ' Do the same for the third point in the second series.
        myPoints(1).X = Chart1.ChartAreas("Default").AxisX.ValueToPosition(Chart1.Series("Series2").Points(2).XValue)
        myPoints(1).Y = Chart1.ChartAreas("Default").AxisY.ValueToPosition(Chart1.Series("Series2").Points(2).YValues(0))
        myPoints(1).Z = Chart1.ChartAreas("Default").GetSeriesZPosition(Chart1.Series(1))
        
        ' Transform 3d points into X and y relative coordinates.
        Chart1.ChartAreas("Default").TransformPoints(myPoints)
        
        ' Create PointF objects for GDI+ DrawLine method.
        Dim myPointF1 As PointF = New PointF
        Dim myPointF2 As PointF = New PointF
        
        ' Change relative coordinates to absolute pixel coordinates.
        myPointF1 = e.ChartGraphics.GetAbsolutePoint(myPoints(0).PointF)
        myPointF2 = e.ChartGraphics.GetAbsolutePoint(myPoints(1).PointF)
        
        ' Now draw the custom line.
        Dim myPen As System.Drawing.Pen = New System.Drawing.Pen(Color.Red)
        e.ChartGraphics.Graphics.DrawLine(myPen, myPointF1.X, myPointF1.Y, myPointF2.X, myPointF2.Y)
    End If
End Sub
C# Copy Code
using Dundas.Charting.WebControl;
using System.Drawing;
  ... 
  
private void Chart1_PostPaint(object sender, Dundas.Charting.WebControl.ChartPaintEventArgs e) 
{
    // Check for a ChartArea object.
    if ((sender.GetType() == ChartArea)) 
    {
        // We need two 3D points, one for the second point in first series,
        // and the next one for the third point in the second series. 
        Point3D[,] myPoints;
        myPoints[0] = new Point3D();
        myPoints[1] = new Point3D();
        
        // Get the relative X coordinate for second point in first series. We will assume
        // that all data points have X values.
        myPoints[0].X = Chart1.ChartAreas["Default"].AxisX.ValueToPosition(Chart1.Series["Default"].Points[1].XValue);
        
        // Get the relative Y coordinate for second point in first series.
        myPoints[0].Y = Chart1.ChartAreas["Default"].AxisY.ValueToPosition(Chart1.Series["Default"].Points[1].YValues[0]);
        
        // Get the relative Z coordinate for the first series.
        myPoints[0].Z = Chart1.ChartAreas["Default"].GetSeriesZPosition(Chart1.Series[0]);
        
        // Do the same for the third point in the second series.
        myPoints[1].X = Chart1.ChartAreas["Default"].AxisX.ValueToPosition(Chart1.Series["Series2"].Points[2].XValue);
        myPoints[1].Y = Chart1.ChartAreas["Default"].AxisY.ValueToPosition(Chart1.Series["Series2"].Points[2].YValues[0]);
        myPoints[1].Z = Chart1.ChartAreas["Default"].GetSeriesZPosition(Chart1.Series[1]);
        
        // Transform 3d points into X and y relative coordinates.
        Chart1.ChartAreas["Default"].TransformPoints(myPoints);
        
        // Create PointF objects for GDI+ DrawLine method.
        PointF myPointF1 = new PointF();
        PointF myPointF2 = new PointF();
        
        // Change relative coordinates to absolute pixel coordinates.
        myPointF1 = e.ChartGraphics.GetAbsolutePoint(myPoints[0].PointF);
        myPointF2 = e.ChartGraphics.GetAbsolutePoint(myPoints[1].PointF);
        
        // Now draw the custom line.
        System.Drawing.Pen myPen = new System.Drawing.Pen(Color.Red);
        e.ChartGraphics.Graphics.DrawLine(myPen, myPointF1.X, myPointF1.Y, myPointF2.X, myPointF2.Y);
    }
}

See Also

Copyright © 2001 - 2009 Dundas Data Visualization, Inc. and others.