This example demonstrates an alternative 3D drawing method that uses shadows.
The standard way to draw a pie chart in 3D is to view the chart from an inclined angle. Using this method, the surface of a 3D pie will become an ellipse.
ChartDirector supports an alternative way to draw a pie chart in 3D - to draw the 3D portion like a shadow. The 3D pie will remain perfectly circular, and the sector areas will correctly reflect its percentages.
The 3D drawing method is configured using
PieChart.set3D.
[Web Version (in ASP)] aspdemo\shadowpie.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' This script can draw different charts depending on the chartIndex
Sub createChart(viewer, chartIndex)
' the tilt angle of the pie
angle = chartIndex * 90 + 45
' The data for the pie chart
data = Array(25, 18, 15, 12, 8, 30, 35)
' The labels for the pie chart
labels = Array("Labor", "Licenses", "Taxes", "Legal", "Insurance", "Facilities", "Production")
' Create a PieChart object of size 110 x 110 pixels
Set c = cd.PieChart(110, 110)
' Set the center of the pie at (50, 55) and the radius to 36 pixels
Call c.setPieSize(55, 55, 36)
' Set the depth, tilt angle and 3D mode of the 3D pie (-1 means auto depth, "true" means the 3D
' effect is in shadow mode)
Call c.set3D(-1, angle, True)
' Add a title showing the shadow angle
Call c.addTitle("Shadow @ " & angle & " deg", "Arial", 8)
' Set the pie data
Call c.setData(data, labels)
' Disable the sector labels by setting the color to Transparent
Call c.setLabelStyle("", 8, cd.Transparent)
' Output the chart
Call viewer.setChart(c, cd.SVG)
' Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{label}: US${value}K ({percent}%)'")
End Sub
' This example includes 4 charts
Dim viewers(3)
For i = 0 To Ubound(viewers)
Set viewers(i) = cd.WebChartViewer(Request, "chart" & i)
Call createChart(viewers(i), i)
Next
%>
<!DOCTYPE html>
<html>
<head>
<title>3D Shadow Mode</title>
<!-- Include ChartDirector Javascript Library to support chart interactions -->
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
<div style="font:bold 18pt verdana;">
3D Shadow Mode
</div>
<hr style="border:solid 1px #000080; background:#000080" />
<div style="font:10pt verdana; margin-bottom:1.5em">
<a href="viewsource.asp?file=<%= Request("SCRIPT_NAME") %>">View Chart Source Code</a>
</div>
<!-- ****** Here are the chart images ****** -->
<%
For i = 0 To Ubound(viewers)
Call Response.Write(viewers(i).renderHTML())
Call Response.Write(" ")
Next
%>
</body>
</html>
[Windows Version (in Visual Basic)] vbdemo\shadowpie.cls
Public Sub createChart(viewer As Object, chartIndex As Integer)
Dim cd As New ChartDirector.API
' the tilt angle of the pie
Dim angle As Long
angle = chartIndex * 90 + 45
' The data for the pie chart
Dim data()
data = Array(25, 18, 15, 12, 8, 30, 35)
' The labels for the pie chart
Dim labels()
labels = Array("Labor", "Licenses", "Taxes", "Legal", "Insurance", "Facilities", "Production")
' Create a PieChart object of size 110 x 110 pixels
Dim c As PieChart
Set c = cd.PieChart(110, 110)
' Set the center of the pie at (50, 55) and the radius to 36 pixels
Call c.setPieSize(55, 55, 36)
' Set the depth, tilt angle and 3D mode of the 3D pie (-1 means auto depth, "true" means the 3D
' effect is in shadow mode)
Call c.set3D(-1, angle, True)
' Add a title showing the shadow angle
Call c.addTitle("Shadow @ " & angle & " deg", "arial.ttf", 8)
' Set the pie data
Call c.setData(data, labels)
' Disable the sector labels by setting the color to Transparent
Call c.setLabelStyle("", 8, cd.Transparent)
' Output the chart
Set viewer.Picture = c.makePicture()
'include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
"title='{label}: US${value}K ({percent}%)'")
End Sub
© 2021 Advanced Software Engineering Limited. All rights reserved.