ChartDirector 7.0 (ASP/COM/VB Edition)

Multi-Pie Chart


    

This example demonstrates drawing multiple pies with different data and colors. It also demonstrates putting labels on the sectors and using sector borders.

Source Code Listing

[Web Version (in ASP)] aspdemo\multipie.asp
<%@ language="vbscript" %> <% Set cd = CreateObject("ChartDirector.API") ' This script can draw different charts depending on the chartIndex Sub createChart(viewer, chartIndex) ' The data for the pie chart data0 = Array(25, 18, 15) data1 = Array(14, 32, 24) data2 = Array(25, 23, 9) ' The labels for the pie chart labels = Array("Software", "Hardware", "Services") ' Create a PieChart object of size 180 x 160 pixels Set c = cd.PieChart(180, 160) ' Set the center of the pie at (90, 80) and the radius to 60 pixels Call c.setPieSize(90, 80, 60) ' Set the border color of the sectors to white (ffffff) Call c.setLineColor(&Hffffff) ' Set the background color of the sector label to pale yellow (ffffc0) with a black border ' (000000) Call c.setLabelStyle().setBackground(&Hffffc0, &H000000) ' Set the label to be slightly inside the perimeter of the circle Call c.setLabelLayout(cd.CircleLayout, -10) ' Set the title, data and colors according to which pie to draw If chartIndex = 0 Then Call c.addTitle("Alpha Division", "Arial Bold", 8) Call c.setData(data0, labels) colors0 = Array(&Hff3333, &Hff9999, &Hffcccc) Call c.setColors2(cd.DataColor, colors0) ElseIf chartIndex = 1 Then Call c.addTitle("Beta Division", "Arial Bold", 8) Call c.setData(data1, labels) colors1 = Array(&H33ff33, &H99ff99, &Hccffcc) Call c.setColors2(cd.DataColor, colors1) Else Call c.addTitle("Gamma Division", "Arial Bold", 8) Call c.setData(data2, labels) colors2 = Array(&H3333ff, &H9999ff, &Hccccff) Call c.setColors2(cd.DataColor, colors2) End If ' Output the chart Call viewer.setChart(c, cd.SVG) ' Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", "title='{label}: US${value}M ({percent}%)'") End Sub ' This example includes 3 charts Dim viewers(2) 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>Multi-Pie Chart</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;"> Multi-Pie Chart </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\multipie.cls
Public Sub createChart(viewer As Object, chartIndex As Integer) Dim cd As New ChartDirector.API ' The data for the pie chart Dim data0() data0 = Array(25, 18, 15) Dim data1() data1 = Array(14, 32, 24) Dim data2() data2 = Array(25, 23, 9) ' The labels for the pie chart Dim labels() labels = Array("Software", "Hardware", "Services") ' Create a PieChart object of size 180 x 160 pixels Dim c As PieChart Set c = cd.PieChart(180, 160) ' Set the center of the pie at (90, 80) and the radius to 60 pixels Call c.setPieSize(90, 80, 60) ' Set the border color of the sectors to white (ffffff) Call c.setLineColor(&Hffffff) ' Set the background color of the sector label to pale yellow (ffffc0) with a black border ' (000000) Call c.setLabelStyle().setBackground(&Hffffc0, &H000000) ' Set the label to be slightly inside the perimeter of the circle Call c.setLabelLayout(cd.CircleLayout, -10) ' Set the title, data and colors according to which pie to draw If chartIndex = 0 Then Call c.addTitle("Alpha Division", "arialbd.ttf", 8) Call c.setData(data0, labels) Call c.setColors2(cd.DataColor, Array(&Hff3333, &Hff9999, &Hffcccc)) ElseIf chartIndex = 1 Then Call c.addTitle("Beta Division", "arialbd.ttf", 8) Call c.setData(data1, labels) Call c.setColors2(cd.DataColor, Array(&H33ff33, &H99ff99, &Hccffcc)) Else Call c.addTitle("Gamma Division", "arialbd.ttf", 8) Call c.setData(data2, labels) Call c.setColors2(cd.DataColor, Array(&H3333ff, &H9999ff, &Hccccff)) End If ' Output the chart Set viewer.Picture = c.makePicture() 'include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", _ "title='{label}: US${value}M ({percent}%)'") End Sub