ChartDirector 7.0 (ASP/COM/VB Edition)

Floating Box Chart




This example demonstrates creating a multi-color floating box chart.

This chart is composed of 4 box-whisker layers, created using XYChart.addBoxWhiskerLayer. Each layer handles boxes of one color. Only the "box" part of the box-whisker layer is used.

Source Code Listing

[Web Version (in ASP)] aspdemo\floatingbox.asp
<%@ language="vbscript" %> <% Set cd = CreateObject("ChartDirector.API") ' Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd quartile ' and maximum values of some quantities Q0Data = Array(40, 45, 40, 30, 20, 50, 25, 44) Q1Data = Array(55, 60, 50, 40, 38, 60, 51, 60) Q2Data = Array(62, 70, 60, 50, 48, 70, 62, 70) Q3Data = Array(70, 80, 65, 60, 53, 78, 69, 76) Q4Data = Array(80, 90, 75, 70, 60, 85, 80, 84) ' The labels for the chart labels = Array("Group A", "Group B", "Group C", "Group D", "Group E", "Group F", "Group G", _ "Group H") ' Create a XYChart object of size 550 x 250 pixels Set c = cd.XYChart(550, 275) ' Set the plotarea at (50, 25) and of size 450 x 200 pixels. Enable both horizontal and vertical ' grids by setting their colors to grey (0xc0c0c0) Call c.setPlotArea(50, 50, 450, 200).setGridColor(&Hc0c0c0, &Hc0c0c0) ' Add a title to the chart Call c.addTitle("Computer Vision Test Scores") ' Set the labels on the x axis and the font to Arial Bold Call c.xAxis().setLabels(labels).setFontStyle("Arial Bold") ' Set the font for the y axis labels to Arial Bold Call c.yAxis().setLabelStyle("Arial Bold") ' Add a Box Whisker layer using light blue 0x9999ff as the fill color and blue (0xcc) as the line ' color. Set the line width to 2 pixels Call c.addBoxLayer(Q4Data, Q3Data, &H00ff00, "Top 25%") Call c.addBoxLayer(Q3Data, Q2Data, &H9999ff, "25% - 50%") Call c.addBoxLayer(Q2Data, Q1Data, &Hffff00, "50% - 75%") Call c.addBoxLayer(Q1Data, Q0Data, &Hff0000, "Bottom 25%") ' Add legend box at top center above the plot area using 10pt Arial Bold Font Set b = c.addLegend(50 + 225, 22, False, "Arial Bold", 10) Call b.setAlignment(cd.TopCenter) Call b.setBackground(cd.Transparent) ' Output the chart Set viewer = cd.WebChartViewer(Request, "chart1") Call viewer.setChart(c, cd.SVG) ' Include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("", "", _ "title='{xLabel} ({dataSetName}): {bottom} to {top} points'") %> <!DOCTYPE html> <html> <head> <title>Floating Box 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;"> Floating Box 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 is the chart image ****** --> <%= viewer.renderHTML() %> </body> </html>

[Windows Version (in Visual Basic)] vbdemo\floatingbox.cls
Public Sub createChart(viewer As Object, chartIndex As Integer) Dim cd As New ChartDirector.API ' Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd ' quartile and maximum values of some quantities Dim Q0Data() Q0Data = Array(40, 45, 40, 30, 20, 50, 25, 44) Dim Q1Data() Q1Data = Array(55, 60, 50, 40, 38, 60, 51, 60) Dim Q2Data() Q2Data = Array(62, 70, 60, 50, 48, 70, 62, 70) Dim Q3Data() Q3Data = Array(70, 80, 65, 60, 53, 78, 69, 76) Dim Q4Data() Q4Data = Array(80, 90, 75, 70, 60, 85, 80, 84) ' The labels for the chart Dim labels() labels = Array("Group A", "Group B", "Group C", "Group D", "Group E", "Group F", "Group G", _ "Group H") ' Create a XYChart object of size 550 x 250 pixels Dim c As XYChart Set c = cd.XYChart(550, 275) ' Set the plotarea at (50, 25) and of size 450 x 200 pixels. Enable both horizontal and vertical ' grids by setting their colors to grey (0xc0c0c0) Call c.setPlotArea(50, 50, 450, 200).setGridColor(&Hc0c0c0, &Hc0c0c0) ' Add a title to the chart Call c.addTitle("Computer Vision Test Scores") ' Set the labels on the x axis and the font to Arial Bold Call c.xAxis().setLabels(labels).setFontStyle("arialbd.ttf") ' Set the font for the y axis labels to Arial Bold Call c.yAxis().setLabelStyle("arialbd.ttf") ' Add a Box Whisker layer using light blue 0x9999ff as the fill color and blue (0xcc) as the ' line color. Set the line width to 2 pixels Call c.addBoxLayer(Q4Data, Q3Data, &H00ff00, "Top 25%") Call c.addBoxLayer(Q3Data, Q2Data, &H9999ff, "25% - 50%") Call c.addBoxLayer(Q2Data, Q1Data, &Hffff00, "50% - 75%") Call c.addBoxLayer(Q1Data, Q0Data, &Hff0000, "Bottom 25%") ' Add legend box at top center above the plot area using 10pt Arial Bold Font Dim b As LegendBox Set b = c.addLegend(50 + 225, 22, False, "arialbd.ttf", 10) Call b.setAlignment(cd.TopCenter) Call b.setBackground(cd.Transparent) ' Output the chart Set viewer.Picture = c.makePicture() 'include tool tip for the chart viewer.ImageMap = c.getHTMLImageMap("clickable", "", _ "title='{xLabel} ({dataSetName}): {bottom} to {top} points'") End Sub